diff --git a/RELEASE.md b/RELEASE.md
index ec8379cdc..430349fb3 100644
--- a/RELEASE.md
+++ b/RELEASE.md
@@ -41,6 +41,10 @@
- ...
-->
+## Versione x.x.x (xx/xx/xxxx)
+
+### Novità
+- Nel template Slider del blocco elenco, ora è possibile scegliere l'aspetto degli elementi dello slider (default: slide semplice con immagine e titolo cliccabile, Card semplice, Card con immagine).
## Versione X.X.X (dd/mm/yyyy)
### Migliorie
diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po
index a99f1c809..ffccdeeab 100644
--- a/locales/de/LC_MESSAGES/volto.po
+++ b/locales/de/LC_MESSAGES/volto.po
@@ -51,6 +51,7 @@ msgid "Allow Externals"
msgstr ""
#: config/Blocks/ListingOptions/simpleCardTemplate
+#: config/Blocks/ListingOptions/sliderTemplate
# defaultMessage: Aspetto
msgid "Aspetto"
msgstr ""
@@ -75,7 +76,7 @@ msgstr ""
msgid "Block style"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault
+#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault
#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow
# defaultMessage: Vedi
msgid "Card detail label"
@@ -459,9 +460,8 @@ msgstr ""
msgid "Path filter filtro"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
-# defaultMessage: Metti in pausa
+#: components/ItaliaTheme/Slider/ButtonPlayPause
+# defaultMessage: Seleziona per mettere in pausa lo slider
msgid "Pause slider"
msgstr "Pause"
@@ -476,9 +476,8 @@ msgstr ""
msgid "Piccolo"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
-# defaultMessage: Play
+#: components/ItaliaTheme/Slider/ButtonPlayPause
+# defaultMessage: Seleziona per riprodurre lo slider
msgid "Play slider"
msgstr ""
@@ -1112,21 +1111,11 @@ msgstr ""
msgid "calendarBlockSidebarTitle"
msgstr ""
-#: components/ItaliaTheme/Blocks/Calendar/Body
-# defaultMessage: Prossimi eventi
-msgid "calendar_next_arrow"
-msgstr ""
-
#: components/ItaliaTheme/Blocks/Calendar/Body
# defaultMessage: Nessun evento disponibile al momento
msgid "calendar_no_results"
msgstr ""
-#: components/ItaliaTheme/Blocks/Calendar/Body
-# defaultMessage: Eventi precedenti
-msgid "calendar_prev_arrow"
-msgstr ""
-
#: components/ItaliaTheme/manage/Widgets/CanaleDigitaleWidget
# defaultMessage: Accedere al servizio
msgid "canale_digitale_widget_title"
@@ -1153,6 +1142,21 @@ msgstr ""
msgid "card_width_image"
msgstr ""
+#: components/ItaliaTheme/Slider/CarouselWrapper
+# defaultMessage: Carosello
+msgid "carousel"
+msgstr ""
+
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra
+msgid "carousel-item-aria-label"
+msgstr ""
+
+#: components/ItaliaTheme/Slider/SingleSlideWrapper
+# defaultMessage: Slide
+msgid "carouselSlide"
+msgstr ""
+
#: components/ItaliaTheme/View/CartellaModulisticaView/CartellaModulisticaView
# defaultMessage: Formati scaricabili
msgid "cartellamodulistica_formati_scaricabili"
@@ -2652,6 +2656,7 @@ msgstr ""
msgid "openAccordion"
msgstr ""
+#: components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault
#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
# defaultMessage: Apri il link
msgid "openLink"
@@ -2841,7 +2846,7 @@ msgstr ""
msgid "playStoreLink"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+#: components/ItaliaTheme/Slider/PrevArrow
# defaultMessage: Precedente
msgid "precedente"
msgstr ""
@@ -2867,7 +2872,7 @@ msgstr ""
msgid "provvedimento_finale"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault
+#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault
#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow
# defaultMessage: Data di pubblicazione
msgid "publication_date"
@@ -3701,6 +3706,21 @@ msgstr ""
msgid "slideDot"
msgstr ""
+#: config/Blocks/ListingOptions/sliderTemplate
+# defaultMessage: Qui puoi selezionare, per il template 'Slider', un aspetto diverso da quello di default per gli elementi mostrati nello slider.
+msgid "slider_listing_appearance_description"
+msgstr ""
+
+#: config/Blocks/ListingOptions/sliderTemplate
+# defaultMessage: Card con immagine
+msgid "slider_listing_appearance_imagecard"
+msgstr ""
+
+#: config/Blocks/ListingOptions/sliderTemplate
+# defaultMessage: Card semplice
+msgid "slider_listing_appearance_simplecard"
+msgstr ""
+
#: config/Blocks/ListingOptions/sliderTemplate
# defaultMessage: N° slide da mostrare
msgid "slidesToShow"
@@ -3842,7 +3862,7 @@ msgstr ""
msgid "subjects"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+#: components/ItaliaTheme/Slider/NextArrow
# defaultMessage: Successivo
msgid "successivo"
msgstr ""
@@ -4059,7 +4079,7 @@ msgstr ""
msgid "uo_type"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault
+#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault
#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow
# defaultMessage: Data di aggiornamento
msgid "update_date"
@@ -4085,21 +4105,6 @@ msgstr ""
msgid "venues"
msgstr ""
-#: components/ItaliaTheme/Blocks/VideoGallery/Body
-# defaultMessage: Prossimo video
-msgid "videogallery_next_arrow"
-msgstr ""
-
-#: components/ItaliaTheme/Blocks/VideoGallery/Body
-# defaultMessage: Video precedente
-msgid "videogallery_prev_arrow"
-msgstr ""
-
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
-# defaultMessage: Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra
-msgid "viewImage"
-msgstr ""
-
#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/BottomBody
# defaultMessage: Vedi tutti
msgid "view_all"
diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po
index c8b7bffef..bf83ff4ab 100644
--- a/locales/en/LC_MESSAGES/volto.po
+++ b/locales/en/LC_MESSAGES/volto.po
@@ -36,6 +36,7 @@ msgid "Allow Externals"
msgstr "Accept external URL to embed"
#: config/Blocks/ListingOptions/simpleCardTemplate
+#: config/Blocks/ListingOptions/sliderTemplate
# defaultMessage: Aspetto
msgid "Aspetto"
msgstr ""
@@ -60,7 +61,7 @@ msgstr ""
msgid "Block style"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault
+#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault
#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow
# defaultMessage: Vedi
msgid "Card detail label"
@@ -444,9 +445,8 @@ msgstr "Page"
msgid "Path filter filtro"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
-# defaultMessage: Metti in pausa
+#: components/ItaliaTheme/Slider/ButtonPlayPause
+# defaultMessage: Seleziona per mettere in pausa lo slider
msgid "Pause slider"
msgstr "Pause"
@@ -461,9 +461,8 @@ msgstr ""
msgid "Piccolo"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
-# defaultMessage: Play
+#: components/ItaliaTheme/Slider/ButtonPlayPause
+# defaultMessage: Seleziona per riprodurre lo slider
msgid "Play slider"
msgstr "Play"
@@ -1097,21 +1096,11 @@ msgstr "Navigation path"
msgid "calendarBlockSidebarTitle"
msgstr ""
-#: components/ItaliaTheme/Blocks/Calendar/Body
-# defaultMessage: Prossimi eventi
-msgid "calendar_next_arrow"
-msgstr ""
-
#: components/ItaliaTheme/Blocks/Calendar/Body
# defaultMessage: Nessun evento disponibile al momento
msgid "calendar_no_results"
msgstr ""
-#: components/ItaliaTheme/Blocks/Calendar/Body
-# defaultMessage: Eventi precedenti
-msgid "calendar_prev_arrow"
-msgstr ""
-
#: components/ItaliaTheme/manage/Widgets/CanaleDigitaleWidget
# defaultMessage: Accedere al servizio
msgid "canale_digitale_widget_title"
@@ -1138,6 +1127,21 @@ msgstr "Read more"
msgid "card_width_image"
msgstr ""
+#: components/ItaliaTheme/Slider/CarouselWrapper
+# defaultMessage: Carosello
+msgid "carousel"
+msgstr ""
+
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra
+msgid "carousel-item-aria-label"
+msgstr ""
+
+#: components/ItaliaTheme/Slider/SingleSlideWrapper
+# defaultMessage: Slide
+msgid "carouselSlide"
+msgstr ""
+
#: components/ItaliaTheme/View/CartellaModulisticaView/CartellaModulisticaView
# defaultMessage: Formati scaricabili
msgid "cartellamodulistica_formati_scaricabili"
@@ -2637,6 +2641,7 @@ msgstr "Press release number"
msgid "openAccordion"
msgstr "Open the accordion"
+#: components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault
#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
# defaultMessage: Apri il link
msgid "openLink"
@@ -2826,7 +2831,7 @@ msgstr "Help text"
msgid "playStoreLink"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+#: components/ItaliaTheme/Slider/PrevArrow
# defaultMessage: Precedente
msgid "precedente"
msgstr ""
@@ -2852,7 +2857,7 @@ msgstr "Online procedure"
msgid "provvedimento_finale"
msgstr "Final provision"
-#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault
+#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault
#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow
# defaultMessage: Data di pubblicazione
msgid "publication_date"
@@ -3686,6 +3691,21 @@ msgstr ""
msgid "slideDot"
msgstr ""
+#: config/Blocks/ListingOptions/sliderTemplate
+# defaultMessage: Qui puoi selezionare, per il template 'Slider', un aspetto diverso da quello di default per gli elementi mostrati nello slider.
+msgid "slider_listing_appearance_description"
+msgstr ""
+
+#: config/Blocks/ListingOptions/sliderTemplate
+# defaultMessage: Card con immagine
+msgid "slider_listing_appearance_imagecard"
+msgstr ""
+
+#: config/Blocks/ListingOptions/sliderTemplate
+# defaultMessage: Card semplice
+msgid "slider_listing_appearance_simplecard"
+msgstr ""
+
#: config/Blocks/ListingOptions/sliderTemplate
# defaultMessage: N° slide da mostrare
msgid "slidesToShow"
@@ -3827,7 +3847,7 @@ msgstr ""
msgid "subjects"
msgstr "Tags"
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+#: components/ItaliaTheme/Slider/NextArrow
# defaultMessage: Successivo
msgid "successivo"
msgstr ""
@@ -4044,7 +4064,7 @@ msgstr "Search for a structure"
msgid "uo_type"
msgstr "Type"
-#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault
+#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault
#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow
# defaultMessage: Data di aggiornamento
msgid "update_date"
@@ -4070,21 +4090,6 @@ msgstr "Change in balance sheet"
msgid "venues"
msgstr "Venues"
-#: components/ItaliaTheme/Blocks/VideoGallery/Body
-# defaultMessage: Prossimo video
-msgid "videogallery_next_arrow"
-msgstr "Next video"
-
-#: components/ItaliaTheme/Blocks/VideoGallery/Body
-# defaultMessage: Video precedente
-msgid "videogallery_prev_arrow"
-msgstr "Previous video"
-
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
-# defaultMessage: Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra
-msgid "viewImage"
-msgstr "You are currently in a carousel, use left and right arrows to navigate"
-
#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/BottomBody
# defaultMessage: Vedi tutti
msgid "view_all"
diff --git a/locales/es/LC_MESSAGES/volto.po b/locales/es/LC_MESSAGES/volto.po
index 23f59429d..244c651f7 100644
--- a/locales/es/LC_MESSAGES/volto.po
+++ b/locales/es/LC_MESSAGES/volto.po
@@ -45,6 +45,7 @@ msgid "Allow Externals"
msgstr "Aceptar URL externa para incrustar"
#: config/Blocks/ListingOptions/simpleCardTemplate
+#: config/Blocks/ListingOptions/sliderTemplate
# defaultMessage: Aspetto
msgid "Aspetto"
msgstr "Yo espero"
@@ -69,7 +70,7 @@ msgstr "Título del bloque..."
msgid "Block style"
msgstr "Estilo de Bloque"
-#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault
+#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault
#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow
# defaultMessage: Vedi
msgid "Card detail label"
@@ -453,9 +454,8 @@ msgstr ""
msgid "Path filter filtro"
msgstr "Filtrar"
-#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
-# defaultMessage: Metti in pausa
+#: components/ItaliaTheme/Slider/ButtonPlayPause
+# defaultMessage: Seleziona per mettere in pausa lo slider
msgid "Pause slider"
msgstr "Pausa"
@@ -470,9 +470,8 @@ msgstr "Camino"
msgid "Piccolo"
msgstr "Pequeño"
-#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
-# defaultMessage: Play
+#: components/ItaliaTheme/Slider/ButtonPlayPause
+# defaultMessage: Seleziona per riprodurre lo slider
msgid "Play slider"
msgstr "Reproducir"
@@ -1106,21 +1105,11 @@ msgstr ""
msgid "calendarBlockSidebarTitle"
msgstr "Calendario"
-#: components/ItaliaTheme/Blocks/Calendar/Body
-# defaultMessage: Prossimi eventi
-msgid "calendar_next_arrow"
-msgstr "Próximo"
-
#: components/ItaliaTheme/Blocks/Calendar/Body
# defaultMessage: Nessun evento disponibile al momento
msgid "calendar_no_results"
msgstr "No hay eventos disponibles en este momento"
-#: components/ItaliaTheme/Blocks/Calendar/Body
-# defaultMessage: Eventi precedenti
-msgid "calendar_prev_arrow"
-msgstr "Precedente"
-
#: components/ItaliaTheme/manage/Widgets/CanaleDigitaleWidget
# defaultMessage: Accedere al servizio
msgid "canale_digitale_widget_title"
@@ -1147,6 +1136,21 @@ msgstr "Leer mas"
msgid "card_width_image"
msgstr "Tarjeta con imagen"
+#: components/ItaliaTheme/Slider/CarouselWrapper
+# defaultMessage: Carosello
+msgid "carousel"
+msgstr ""
+
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra
+msgid "carousel-item-aria-label"
+msgstr ""
+
+#: components/ItaliaTheme/Slider/SingleSlideWrapper
+# defaultMessage: Slide
+msgid "carouselSlide"
+msgstr ""
+
#: components/ItaliaTheme/View/CartellaModulisticaView/CartellaModulisticaView
# defaultMessage: Formati scaricabili
msgid "cartellamodulistica_formati_scaricabili"
@@ -2646,6 +2650,7 @@ msgstr "Número de comunicado de prensa"
msgid "openAccordion"
msgstr ""
+#: components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault
#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
# defaultMessage: Apri il link
msgid "openLink"
@@ -2835,7 +2840,7 @@ msgstr "Texto de ayuda"
msgid "playStoreLink"
msgstr "Enlaces de Play Store"
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+#: components/ItaliaTheme/Slider/PrevArrow
# defaultMessage: Precedente
msgid "precedente"
msgstr ""
@@ -2861,7 +2866,7 @@ msgstr "Trámite informatizado en línea"
msgid "provvedimento_finale"
msgstr "Disposición final"
-#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault
+#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault
#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow
# defaultMessage: Data di pubblicazione
msgid "publication_date"
@@ -3695,6 +3700,21 @@ msgstr ""
msgid "slideDot"
msgstr ""
+#: config/Blocks/ListingOptions/sliderTemplate
+# defaultMessage: Qui puoi selezionare, per il template 'Slider', un aspetto diverso da quello di default per gli elementi mostrati nello slider.
+msgid "slider_listing_appearance_description"
+msgstr ""
+
+#: config/Blocks/ListingOptions/sliderTemplate
+# defaultMessage: Card con immagine
+msgid "slider_listing_appearance_imagecard"
+msgstr ""
+
+#: config/Blocks/ListingOptions/sliderTemplate
+# defaultMessage: Card semplice
+msgid "slider_listing_appearance_simplecard"
+msgstr ""
+
#: config/Blocks/ListingOptions/sliderTemplate
# defaultMessage: N° slide da mostrare
msgid "slidesToShow"
@@ -3836,7 +3856,7 @@ msgstr "Visibile"
msgid "subjects"
msgstr "Etiquetas"
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+#: components/ItaliaTheme/Slider/NextArrow
# defaultMessage: Successivo
msgid "successivo"
msgstr ""
@@ -4053,7 +4073,7 @@ msgstr "Buscar una estructura"
msgid "uo_type"
msgstr "Tipo"
-#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault
+#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault
#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow
# defaultMessage: Data di aggiornamento
msgid "update_date"
@@ -4079,21 +4099,6 @@ msgstr "Cambio en el balance"
msgid "venues"
msgstr "Lugares"
-#: components/ItaliaTheme/Blocks/VideoGallery/Body
-# defaultMessage: Prossimo video
-msgid "videogallery_next_arrow"
-msgstr ""
-
-#: components/ItaliaTheme/Blocks/VideoGallery/Body
-# defaultMessage: Video precedente
-msgid "videogallery_prev_arrow"
-msgstr ""
-
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
-# defaultMessage: Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra
-msgid "viewImage"
-msgstr "Tu estás actualmente en un carrusel, para navegar usa las flechas izquierda y derecha"
-
#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/BottomBody
# defaultMessage: Vedi tutti
msgid "view_all"
diff --git a/locales/fr/LC_MESSAGES/volto.po b/locales/fr/LC_MESSAGES/volto.po
index e5ca646bd..a4b0c6c92 100644
--- a/locales/fr/LC_MESSAGES/volto.po
+++ b/locales/fr/LC_MESSAGES/volto.po
@@ -53,6 +53,7 @@ msgid "Allow Externals"
msgstr "Accepter les URL externes pour l'intégration"
#: config/Blocks/ListingOptions/simpleCardTemplate
+#: config/Blocks/ListingOptions/sliderTemplate
# defaultMessage: Aspetto
msgid "Aspetto"
msgstr ""
@@ -77,7 +78,7 @@ msgstr ""
msgid "Block style"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault
+#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault
#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow
# defaultMessage: Vedi
msgid "Card detail label"
@@ -461,9 +462,8 @@ msgstr ""
msgid "Path filter filtro"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
-# defaultMessage: Metti in pausa
+#: components/ItaliaTheme/Slider/ButtonPlayPause
+# defaultMessage: Seleziona per mettere in pausa lo slider
msgid "Pause slider"
msgstr "Pause"
@@ -478,9 +478,8 @@ msgstr ""
msgid "Piccolo"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
-# defaultMessage: Play
+#: components/ItaliaTheme/Slider/ButtonPlayPause
+# defaultMessage: Seleziona per riprodurre lo slider
msgid "Play slider"
msgstr "Début"
@@ -1114,21 +1113,11 @@ msgstr ""
msgid "calendarBlockSidebarTitle"
msgstr ""
-#: components/ItaliaTheme/Blocks/Calendar/Body
-# defaultMessage: Prossimi eventi
-msgid "calendar_next_arrow"
-msgstr ""
-
#: components/ItaliaTheme/Blocks/Calendar/Body
# defaultMessage: Nessun evento disponibile al momento
msgid "calendar_no_results"
msgstr ""
-#: components/ItaliaTheme/Blocks/Calendar/Body
-# defaultMessage: Eventi precedenti
-msgid "calendar_prev_arrow"
-msgstr ""
-
#: components/ItaliaTheme/manage/Widgets/CanaleDigitaleWidget
# defaultMessage: Accedere al servizio
msgid "canale_digitale_widget_title"
@@ -1155,6 +1144,21 @@ msgstr ""
msgid "card_width_image"
msgstr ""
+#: components/ItaliaTheme/Slider/CarouselWrapper
+# defaultMessage: Carosello
+msgid "carousel"
+msgstr ""
+
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra
+msgid "carousel-item-aria-label"
+msgstr ""
+
+#: components/ItaliaTheme/Slider/SingleSlideWrapper
+# defaultMessage: Slide
+msgid "carouselSlide"
+msgstr ""
+
#: components/ItaliaTheme/View/CartellaModulisticaView/CartellaModulisticaView
# defaultMessage: Formati scaricabili
msgid "cartellamodulistica_formati_scaricabili"
@@ -2654,6 +2658,7 @@ msgstr "Numéro du communiqué de presse"
msgid "openAccordion"
msgstr ""
+#: components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault
#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
# defaultMessage: Apri il link
msgid "openLink"
@@ -2843,7 +2848,7 @@ msgstr ""
msgid "playStoreLink"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+#: components/ItaliaTheme/Slider/PrevArrow
# defaultMessage: Precedente
msgid "precedente"
msgstr ""
@@ -2869,7 +2874,7 @@ msgstr ""
msgid "provvedimento_finale"
msgstr "Disposition finale"
-#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault
+#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault
#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow
# defaultMessage: Data di pubblicazione
msgid "publication_date"
@@ -3703,6 +3708,21 @@ msgstr ""
msgid "slideDot"
msgstr ""
+#: config/Blocks/ListingOptions/sliderTemplate
+# defaultMessage: Qui puoi selezionare, per il template 'Slider', un aspetto diverso da quello di default per gli elementi mostrati nello slider.
+msgid "slider_listing_appearance_description"
+msgstr ""
+
+#: config/Blocks/ListingOptions/sliderTemplate
+# defaultMessage: Card con immagine
+msgid "slider_listing_appearance_imagecard"
+msgstr ""
+
+#: config/Blocks/ListingOptions/sliderTemplate
+# defaultMessage: Card semplice
+msgid "slider_listing_appearance_simplecard"
+msgstr ""
+
#: config/Blocks/ListingOptions/sliderTemplate
# defaultMessage: N° slide da mostrare
msgid "slidesToShow"
@@ -3844,7 +3864,7 @@ msgstr ""
msgid "subjects"
msgstr "Sujettes"
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+#: components/ItaliaTheme/Slider/NextArrow
# defaultMessage: Successivo
msgid "successivo"
msgstr ""
@@ -4061,7 +4081,7 @@ msgstr "Chercher une structure"
msgid "uo_type"
msgstr "Typologie"
-#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault
+#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault
#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow
# defaultMessage: Data di aggiornamento
msgid "update_date"
@@ -4087,21 +4107,6 @@ msgstr "Changement de bilan"
msgid "venues"
msgstr "Lieux"
-#: components/ItaliaTheme/Blocks/VideoGallery/Body
-# defaultMessage: Prossimo video
-msgid "videogallery_next_arrow"
-msgstr "Prochaine vidéo"
-
-#: components/ItaliaTheme/Blocks/VideoGallery/Body
-# defaultMessage: Video precedente
-msgid "videogallery_prev_arrow"
-msgstr "Vidéo précédente"
-
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
-# defaultMessage: Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra
-msgid "viewImage"
-msgstr ""
-
#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/BottomBody
# defaultMessage: Vedi tutti
msgid "view_all"
diff --git a/locales/it/LC_MESSAGES/volto.po b/locales/it/LC_MESSAGES/volto.po
index f34fb7d60..f62556f56 100644
--- a/locales/it/LC_MESSAGES/volto.po
+++ b/locales/it/LC_MESSAGES/volto.po
@@ -36,6 +36,7 @@ msgid "Allow Externals"
msgstr "Accetta URL esterni per l'embed"
#: config/Blocks/ListingOptions/simpleCardTemplate
+#: config/Blocks/ListingOptions/sliderTemplate
# defaultMessage: Aspetto
msgid "Aspetto"
msgstr "Aspetto"
@@ -60,7 +61,7 @@ msgstr "Titolo del blocco..."
msgid "Block style"
msgstr "Stile del blocco"
-#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault
+#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault
#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow
# defaultMessage: Vedi
msgid "Card detail label"
@@ -444,9 +445,8 @@ msgstr ""
msgid "Path filter filtro"
msgstr "Filtro"
-#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
-# defaultMessage: Metti in pausa
+#: components/ItaliaTheme/Slider/ButtonPlayPause
+# defaultMessage: Seleziona per mettere in pausa lo slider
msgid "Pause slider"
msgstr "Metti in pausa"
@@ -461,9 +461,8 @@ msgstr "Percorso"
msgid "Piccolo"
msgstr "Piccolo"
-#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
-# defaultMessage: Play
+#: components/ItaliaTheme/Slider/ButtonPlayPause
+# defaultMessage: Seleziona per riprodurre lo slider
msgid "Play slider"
msgstr "Seleziona per riprodurre"
@@ -1097,21 +1096,11 @@ msgstr ""
msgid "calendarBlockSidebarTitle"
msgstr "Calendario"
-#: components/ItaliaTheme/Blocks/Calendar/Body
-# defaultMessage: Prossimi eventi
-msgid "calendar_next_arrow"
-msgstr "Prossimi eventi"
-
#: components/ItaliaTheme/Blocks/Calendar/Body
# defaultMessage: Nessun evento disponibile al momento
msgid "calendar_no_results"
msgstr "Nessun evento disponibile al momento"
-#: components/ItaliaTheme/Blocks/Calendar/Body
-# defaultMessage: Eventi precedenti
-msgid "calendar_prev_arrow"
-msgstr "Eventi precedenti"
-
#: components/ItaliaTheme/manage/Widgets/CanaleDigitaleWidget
# defaultMessage: Accedere al servizio
msgid "canale_digitale_widget_title"
@@ -1138,6 +1127,21 @@ msgstr "Vedi"
msgid "card_width_image"
msgstr "Card con immagine"
+#: components/ItaliaTheme/Slider/CarouselWrapper
+# defaultMessage: Carosello
+msgid "carousel"
+msgstr ""
+
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra
+msgid "carousel-item-aria-label"
+msgstr ""
+
+#: components/ItaliaTheme/Slider/SingleSlideWrapper
+# defaultMessage: Slide
+msgid "carouselSlide"
+msgstr ""
+
#: components/ItaliaTheme/View/CartellaModulisticaView/CartellaModulisticaView
# defaultMessage: Formati scaricabili
msgid "cartellamodulistica_formati_scaricabili"
@@ -2637,6 +2641,7 @@ msgstr "Numero del comunicato stampa"
msgid "openAccordion"
msgstr ""
+#: components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault
#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
# defaultMessage: Apri il link
msgid "openLink"
@@ -2826,7 +2831,7 @@ msgstr "Testo di aiuto"
msgid "playStoreLink"
msgstr "PlayStore Link"
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+#: components/ItaliaTheme/Slider/PrevArrow
# defaultMessage: Precedente
msgid "precedente"
msgstr "Precedente"
@@ -2852,7 +2857,7 @@ msgstr "Procedura informatizzata online"
msgid "provvedimento_finale"
msgstr "Provvedimento finale"
-#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault
+#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault
#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow
# defaultMessage: Data di pubblicazione
msgid "publication_date"
@@ -3686,6 +3691,21 @@ msgstr "Skype"
msgid "slideDot"
msgstr "Vai alla slide {index}"
+#: config/Blocks/ListingOptions/sliderTemplate
+# defaultMessage: Qui puoi selezionare, per il template 'Slider', un aspetto diverso da quello di default per gli elementi mostrati nello slider.
+msgid "slider_listing_appearance_description"
+msgstr ""
+
+#: config/Blocks/ListingOptions/sliderTemplate
+# defaultMessage: Card con immagine
+msgid "slider_listing_appearance_imagecard"
+msgstr ""
+
+#: config/Blocks/ListingOptions/sliderTemplate
+# defaultMessage: Card semplice
+msgid "slider_listing_appearance_simplecard"
+msgstr ""
+
#: config/Blocks/ListingOptions/sliderTemplate
# defaultMessage: N° slide da mostrare
msgid "slidesToShow"
@@ -3827,7 +3847,7 @@ msgstr "Visibile"
msgid "subjects"
msgstr "Tags"
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+#: components/ItaliaTheme/Slider/NextArrow
# defaultMessage: Successivo
msgid "successivo"
msgstr "Successivo"
@@ -4044,7 +4064,7 @@ msgstr "Cerca una struttura"
msgid "uo_type"
msgstr "Tipologia"
-#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault
+#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault
#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow
# defaultMessage: Data di aggiornamento
msgid "update_date"
@@ -4070,21 +4090,6 @@ msgstr "Variazione situazione patrimoniale"
msgid "venues"
msgstr "Luoghi"
-#: components/ItaliaTheme/Blocks/VideoGallery/Body
-# defaultMessage: Prossimo video
-msgid "videogallery_next_arrow"
-msgstr "Prossimo video"
-
-#: components/ItaliaTheme/Blocks/VideoGallery/Body
-# defaultMessage: Video precedente
-msgid "videogallery_prev_arrow"
-msgstr "Video precedente"
-
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
-# defaultMessage: Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra
-msgid "viewImage"
-msgstr "Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra"
-
#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/BottomBody
# defaultMessage: Vedi tutti
msgid "view_all"
diff --git a/locales/volto.pot b/locales/volto.pot
index a4a47e9e8..fb9571d01 100644
--- a/locales/volto.pot
+++ b/locales/volto.pot
@@ -38,6 +38,7 @@ msgid "Allow Externals"
msgstr ""
#: config/Blocks/ListingOptions/simpleCardTemplate
+#: config/Blocks/ListingOptions/sliderTemplate
# defaultMessage: Aspetto
msgid "Aspetto"
msgstr ""
@@ -62,7 +63,7 @@ msgstr ""
msgid "Block style"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault
+#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault
#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow
# defaultMessage: Vedi
msgid "Card detail label"
@@ -446,9 +447,8 @@ msgstr ""
msgid "Path filter filtro"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
-# defaultMessage: Metti in pausa
+#: components/ItaliaTheme/Slider/ButtonPlayPause
+# defaultMessage: Seleziona per mettere in pausa lo slider
msgid "Pause slider"
msgstr ""
@@ -463,9 +463,8 @@ msgstr ""
msgid "Piccolo"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
-# defaultMessage: Play
+#: components/ItaliaTheme/Slider/ButtonPlayPause
+# defaultMessage: Seleziona per riprodurre lo slider
msgid "Play slider"
msgstr ""
@@ -1099,21 +1098,11 @@ msgstr ""
msgid "calendarBlockSidebarTitle"
msgstr ""
-#: components/ItaliaTheme/Blocks/Calendar/Body
-# defaultMessage: Prossimi eventi
-msgid "calendar_next_arrow"
-msgstr ""
-
#: components/ItaliaTheme/Blocks/Calendar/Body
# defaultMessage: Nessun evento disponibile al momento
msgid "calendar_no_results"
msgstr ""
-#: components/ItaliaTheme/Blocks/Calendar/Body
-# defaultMessage: Eventi precedenti
-msgid "calendar_prev_arrow"
-msgstr ""
-
#: components/ItaliaTheme/manage/Widgets/CanaleDigitaleWidget
# defaultMessage: Accedere al servizio
msgid "canale_digitale_widget_title"
@@ -1140,6 +1129,21 @@ msgstr ""
msgid "card_width_image"
msgstr ""
+#: components/ItaliaTheme/Slider/CarouselWrapper
+# defaultMessage: Carosello
+msgid "carousel"
+msgstr ""
+
+#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+# defaultMessage: Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra
+msgid "carousel-item-aria-label"
+msgstr ""
+
+#: components/ItaliaTheme/Slider/SingleSlideWrapper
+# defaultMessage: Slide
+msgid "carouselSlide"
+msgstr ""
+
#: components/ItaliaTheme/View/CartellaModulisticaView/CartellaModulisticaView
# defaultMessage: Formati scaricabili
msgid "cartellamodulistica_formati_scaricabili"
@@ -2639,6 +2643,7 @@ msgstr ""
msgid "openAccordion"
msgstr ""
+#: components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault
#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
# defaultMessage: Apri il link
msgid "openLink"
@@ -2828,7 +2833,7 @@ msgstr ""
msgid "playStoreLink"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+#: components/ItaliaTheme/Slider/PrevArrow
# defaultMessage: Precedente
msgid "precedente"
msgstr ""
@@ -2854,7 +2859,7 @@ msgstr ""
msgid "provvedimento_finale"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault
+#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault
#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow
# defaultMessage: Data di pubblicazione
msgid "publication_date"
@@ -3285,7 +3290,7 @@ msgid "search_startDate"
msgstr ""
#: helpers/Translations/searchBlockExtendedTranslations
-# defaultMessage: Ricerca per: {searchedtext}.
+# defaultMessage: Ricerca per: {searchedtext}.
msgid "searchedFor"
msgstr ""
@@ -3688,6 +3693,21 @@ msgstr ""
msgid "slideDot"
msgstr ""
+#: config/Blocks/ListingOptions/sliderTemplate
+# defaultMessage: Qui puoi selezionare, per il template 'Slider', un aspetto diverso da quello di default per gli elementi mostrati nello slider.
+msgid "slider_listing_appearance_description"
+msgstr ""
+
+#: config/Blocks/ListingOptions/sliderTemplate
+# defaultMessage: Card con immagine
+msgid "slider_listing_appearance_imagecard"
+msgstr ""
+
+#: config/Blocks/ListingOptions/sliderTemplate
+# defaultMessage: Card semplice
+msgid "slider_listing_appearance_simplecard"
+msgstr ""
+
#: config/Blocks/ListingOptions/sliderTemplate
# defaultMessage: N° slide da mostrare
msgid "slidesToShow"
@@ -3829,7 +3849,7 @@ msgstr ""
msgid "subjects"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
+#: components/ItaliaTheme/Slider/NextArrow
# defaultMessage: Successivo
msgid "successivo"
msgstr ""
@@ -4046,7 +4066,7 @@ msgstr ""
msgid "uo_type"
msgstr ""
-#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault
+#: components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault
#: components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow
# defaultMessage: Data di aggiornamento
msgid "update_date"
@@ -4072,21 +4092,6 @@ msgstr ""
msgid "venues"
msgstr ""
-#: components/ItaliaTheme/Blocks/VideoGallery/Body
-# defaultMessage: Prossimo video
-msgid "videogallery_next_arrow"
-msgstr ""
-
-#: components/ItaliaTheme/Blocks/VideoGallery/Body
-# defaultMessage: Video precedente
-msgid "videogallery_prev_arrow"
-msgstr ""
-
-#: components/ItaliaTheme/Blocks/Listing/SliderTemplate
-# defaultMessage: Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra
-msgid "viewImage"
-msgstr ""
-
#: components/ItaliaTheme/Blocks/ArgumentsInEvidence/BottomBody
# defaultMessage: Vedi tutti
msgid "view_all"
diff --git a/src/components/ItaliaTheme/Blocks/Calendar/Body.jsx b/src/components/ItaliaTheme/Blocks/Calendar/Body.jsx
index dcd033610..cfcbe89ed 100644
--- a/src/components/ItaliaTheme/Blocks/Calendar/Body.jsx
+++ b/src/components/ItaliaTheme/Blocks/Calendar/Body.jsx
@@ -3,8 +3,11 @@ import { useDispatch, useSelector } from 'react-redux';
import { useIntl, defineMessages } from 'react-intl';
import useDeepCompareEffect from 'use-deep-compare-effect';
import {
- FontAwesomeIcon,
ListingLinkMore,
+ CarouselWrapper,
+ SingleSlideWrapper,
+ NextArrow,
+ PrevArrow,
} from 'design-comuni-plone-theme/components/ItaliaTheme';
import { Card, Row, Col, Container, Button } from 'design-react-kit';
import cx from 'classnames';
@@ -28,14 +31,6 @@ const messages = defineMessages({
id: 'calendar_no_results',
defaultMessage: 'Nessun evento disponibile al momento',
},
- calendar_next_arrow: {
- id: 'calendar_next_arrow',
- defaultMessage: 'Prossimi eventi',
- },
- calendar_prev_arrow: {
- id: 'calendar_prev_arrow',
- defaultMessage: 'Eventi precedenti',
- },
});
const copyFields = ['limit', 'query', 'sort_on', 'sort_order', 'depth'];
@@ -169,43 +164,6 @@ const Body = ({ data, block, inEditMode, path, onChangeBlock, reactSlick }) => {
setAdditionalFilters(filters);
};
- const NextArrow = (props) => {
- const { onClick, className } = props;
- return (
-
- );
- };
- const PrevArrow = (props) => {
- const { onClick, className } = props;
- return (
-
- );
- };
-
const settings = {
dots: true,
arrows: true,
@@ -330,19 +288,25 @@ const Body = ({ data, block, inEditMode, path, onChangeBlock, reactSlick }) => {
{calendarResults[block]?.items?.length > 0 ? (
-
- {calendarResults[block].items.map((day, index) => (
-
-
- ))}
-
+
+
+ {calendarResults[block].items.map((day, index) => (
+
+
) : inEditMode ? (
{intl.formatMessage(messages.insert_filter)}
diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx
new file mode 100644
index 000000000..c21f5b906
--- /dev/null
+++ b/src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx
@@ -0,0 +1,182 @@
+/*
+ * componente per visulizzare un elemento del template 'Card con immagine' del blocco listing con l'aspetto di default.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import {
+ Card,
+ CardBody,
+ CardTitle,
+ CardText,
+ Chip,
+ ChipLabel,
+} from 'design-react-kit';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import { UniversalLink } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { CardCategory } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import {
+ getCalendarDate,
+ getEventRecurrenceMore,
+ getComponentWithFallback,
+} from 'design-comuni-plone-theme/helpers';
+import { getCategory } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils';
+
+import {
+ getItemIcon,
+ CardCalendar,
+ ListingCategory,
+ ListingImage,
+ ListingText,
+ CardPersona,
+} from 'design-comuni-plone-theme/components/ItaliaTheme';
+
+const CardWithImageDefault = (props) => {
+ const {
+ item,
+ index,
+ isEditMode,
+ always_show_image = false,
+ set_four_columns = false,
+ show_type = true,
+ show_section,
+ show_icon = true,
+ show_description = true,
+ show_topics = true,
+ hide_dates = false,
+ natural_image_size = false,
+ id_lighthouse,
+ rrule,
+ } = props;
+
+ const imagesToShow = set_four_columns ? 4 : 3;
+
+ const icon = show_icon ? getItemIcon(item) : null;
+ const date = hide_dates ? null : getCalendarDate(item, rrule.rrulestr);
+ const eventRecurrenceMore = hide_dates
+ ? null
+ : getEventRecurrenceMore(item, isEditMode);
+ const listingText = show_description ? : null;
+
+ const image = ListingImage({ item, showTitleAttr: false });
+
+ const showImage =
+ (index < imagesToShow || always_show_image) && image != null;
+ const category = getCategory(item, show_type, show_section, props);
+ const topics = show_topics ? item.tassonomia_argomenti : null;
+
+ const BlockExtraTags = getComponentWithFallback({
+ name: 'BlockExtraTags',
+ dependencies: ['CardWithImageDefault', item['@type']],
+ }).component;
+
+ return (
+ <>
+ {item['@type'] === 'Persona' ? (
+
+ ) : (
+
+ {/* wrapperClassName="card-overlapping" */}
+ {showImage && (
+
+
+ {image}
+ {item['@type'] === 'Event' && (
+
+ )}
+
+
+ {topics.map((argument, index) => (
+
+
+ {argument.title}
+
+
+ ))}
+
+ )}
+
+ {eventRecurrenceMore}
+
+
+ )}
+
+ );
+};
+
+CardWithImageDefault.propTypes = {
+ item: PropTypes.any.isRequired,
+ isEditMode: PropTypes.bool,
+};
+
+export default injectLazyLibs(['rrule'])(CardWithImageDefault);
diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx
index 65e723954..5e7e9dfb0 100644
--- a/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx
+++ b/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx
@@ -1,68 +1,28 @@
/*
- * componente per visulizzare un CT "Persona" nei Listing o in aclune pagine
+ * componente per visulizzare i risultati del blocco Listing con il template 'Card con immagine'
*/
import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
-import {
- Container,
- Row,
- Col,
- Card,
- CardBody,
- CardTitle,
- CardText,
- Chip,
- ChipLabel,
-} from 'design-react-kit';
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import { UniversalLink } from '@plone/volto/components';
-import { flattenToAppURL } from '@plone/volto/helpers';
-import {
- CardCategory,
- ListingLinkMore,
-} from 'design-comuni-plone-theme/components/ItaliaTheme';
-import {
- getCalendarDate,
- getEventRecurrenceMore,
- getComponentWithFallback,
-} from 'design-comuni-plone-theme/helpers';
-import { getCategory } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils';
+import { Container, Row, Col } from 'design-react-kit';
+import { ListingLinkMore } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import {
- getItemIcon,
- CardCalendar,
- ListingCategory,
- ListingImage,
- ListingText,
- CardPersona,
-} from 'design-comuni-plone-theme/components/ItaliaTheme';
+import CardWithImageDefault from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault';
const CardWithImageTemplate = (props) => {
const {
items,
- isEditMode,
title,
linkAlign,
linkTitle,
linkHref,
show_block_bg = false,
- always_show_image = false,
set_four_columns = false,
- show_type = false,
- show_section,
- show_icon = true,
- show_description = true,
- show_topics = true,
- hide_dates = false,
- natural_image_size = false,
- id_lighthouse,
linkmore_id_lighthouse,
titleLine,
- rrule,
} = props;
- const imagesToShow = set_four_columns ? 4 : 3;
+
return (
@@ -82,28 +42,6 @@ const CardWithImageTemplate = (props) => {
)}
{items.map((item, index) => {
- const icon = show_icon ? getItemIcon(item) : null;
- const date = hide_dates
- ? null
- : getCalendarDate(item, rrule.rrulestr);
- const eventRecurrenceMore = hide_dates
- ? null
- : getEventRecurrenceMore(item, isEditMode);
- const listingText = show_description ? (
-
- ) : null;
-
- const image = ListingImage({ item, showTitleAttr: false });
-
- const showImage =
- (index < imagesToShow || always_show_image) && image != null;
- const category = getCategory(item, show_type, show_section, props);
- const topics = show_topics ? item.tassonomia_argomenti : null;
-
- const BlockExtraTags = getComponentWithFallback({
- name: 'BlockExtraTags',
- dependencies: ['CardWithImageTemplate', item['@type']],
- }).component;
const layoutSelected = set_four_columns ? '3' : '4';
return (
@@ -113,111 +51,7 @@ const CardWithImageTemplate = (props) => {
key={item['@id']}
className="col-item mb-3"
>
- {item['@type'] === 'Persona' ? (
-
- ) : (
-
- {/* wrapperClassName="card-overlapping" */}
- {showImage && (
-
-
- {image}
- {item['@type'] === 'Event' && (
-
- )}
-
-
- {topics.map((argument, index) => (
-
-
-
- {argument.title}
-
-
-
- ))}
-
- )}
-
- {eventRecurrenceMore}
-
-
- )}
+
);
})}
@@ -242,4 +76,4 @@ CardWithImageTemplate.propTypes = {
title: PropTypes.string,
};
-export default injectLazyLibs(['rrule'])(CardWithImageTemplate);
+export default CardWithImageTemplate;
diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/NextArrow.jsx b/src/components/ItaliaTheme/Blocks/Listing/Commons/NextArrow.jsx
deleted file mode 100644
index 3ac16ee96..000000000
--- a/src/components/ItaliaTheme/Blocks/Listing/Commons/NextArrow.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-
-export default function NextArrow(props) {
- const { className, style, onClick } = props;
- return (
-
-
-
- );
-}
diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/PrevArrow.jsx b/src/components/ItaliaTheme/Blocks/Listing/Commons/PrevArrow.jsx
deleted file mode 100644
index 1ba29a168..000000000
--- a/src/components/ItaliaTheme/Blocks/Listing/Commons/PrevArrow.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-
-export default function PrevArrow(props) {
- const { className, style, onClick } = props;
- return (
-
-
-
- );
-}
diff --git a/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js b/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js
index 82282bd32..4889306b4 100644
--- a/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js
+++ b/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js
@@ -1,5 +1,3 @@
-import { useRef, useEffect } from 'react';
-
export const getCategory = (item, show_type, show_section, props) => {
let cat = [];
@@ -17,71 +15,3 @@ export const getCategory = (item, show_type, show_section, props) => {
}
return null;
};
-export const visibleSlideTitle = (selector) => {
- // Needed to deal with react-slick duplicating a lot of slides
- // when used in infinite mode. It's an useless and counterproductive
- // thing to do on their part, there are multiple issues opened.
- // The lib is not actually mantained so...
- return Array.from(document.querySelectorAll(selector)).find((e) => {
- const rect = e.getBoundingClientRect();
- return rect.left >= 0 && rect.right <= window.innerWidth;
- });
-};
-
-export const useSlider = (userAutoplay) => {
- const slider = useRef(null);
- const onIntersection = (entries, opt) => {
- entries.forEach((entry) =>
- entry.target.classList.toggle('visible', entry.isIntersecting),
- );
- };
- const observer = new IntersectionObserver(onIntersection, {
- root: null,
- threshold: 0.5,
- });
- if (document.querySelector('.block.listing.slider'))
- observer.observe(document.querySelector('.block.listing.slider'));
- useEffect(() => {
- return () => observer.disconnect();
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
-
- const focusNext = (currentSlide) => {
- const sliderElement = document.querySelector('.block.listing.slider');
- if (!sliderElement) return;
- const sliderIsVisible = sliderElement.classList.contains('visible');
-
- if (!sliderIsVisible) {
- slider.current.slickPause();
- return;
- }
- const slide = sliderElement.querySelectorAll(
- `a.slide-link[data-slide="${currentSlide}"]`,
- );
-
- if ((userAutoplay && !slide) || (userAutoplay && !slide.length > 0)) return;
-
- // Custom handling of focus for a11y
- const link = visibleSlideTitle(
- `a.slide-link[data-slide="${currentSlide}"]`,
- );
-
- if (!link || document.activeElement === link) {
- return;
- }
- // eslint-disable-next-line no-unused-expressions
- else if (
- // if the focus was already on a slide, move it to the current one
- Array.from(document.querySelectorAll('.slick-slide')).some((el) =>
- el.contains(document.activeElement),
- )
- ) {
- link.focus();
- }
- };
-
- return {
- slider,
- focusNext,
- };
-};
diff --git a/src/components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate.jsx
index 5380b9362..7a6462e1f 100644
--- a/src/components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate.jsx
+++ b/src/components/ItaliaTheme/Blocks/Listing/PhotogalleryTemplate.jsx
@@ -4,22 +4,26 @@
import 'slick-carousel/slick/slick.css';
import 'design-comuni-plone-theme/components/slick-carousel/slick/slick-theme.css';
+import React, { useRef, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
import { Col, Container, Row } from 'design-react-kit';
+
+import { UniversalLink } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
import {
ListingImage,
ListingLinkMore,
NextArrow,
PrevArrow,
+ SingleSlideWrapper,
+ CarouselWrapper,
+ ButtonPlayPause,
} from 'design-comuni-plone-theme/components/ItaliaTheme';
-import React, { useRef, useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
import { GalleryPreview } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import PropTypes from 'prop-types';
-import { UniversalLink } from '@plone/volto/components';
-import cx from 'classnames';
-import { flattenToAppURL } from '@plone/volto/helpers';
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
const messages = defineMessages({
viewImage: {
@@ -30,14 +34,6 @@ const messages = defineMessages({
id: 'gallery_viewPreview',
defaultMessage: "Vedi l'anteprima di",
},
- play: {
- id: 'Play slider',
- defaultMessage: 'Play',
- },
- pause: {
- id: 'Pause slider',
- defaultMessage: 'Metti in pausa',
- },
});
const PhotogalleryTemplate = ({
@@ -116,21 +112,12 @@ const PhotogalleryTemplate = ({
prevArrow: ,
appendDots: (dots) => (
-
-
-
+
+
@@ -162,7 +149,7 @@ const PhotogalleryTemplate = ({
)}
-
+
{items.map((item, i) => {
const image = ListingImage({
@@ -178,11 +165,12 @@ const PhotogalleryTemplate = ({
}px`,
});
return (
-
{!show_image_popup ? (
)}
-
+
);
})}
@@ -231,7 +219,7 @@ const PhotogalleryTemplate = ({
items={items}
/>
) : null}
-
+
+ {item?.effective && (
+
+
+ {intl.formatMessage(messages.publication_date)}:{' '}
+
+ {moment(item.effective).format('DD-MM-YYYY')}
+
+ )}
+ {item?.modified && (
+
+
+ {intl.formatMessage(messages.update_date)}:{' '}
+
+ {moment(item.modified).format('DD-MM-YYYY')}
+
+ )}
+
- {item?.effective && (
-
-
- {intl.formatMessage(messages.publication_date)}:{' '}
-
- {moment(item.effective).format('DD-MM-YYYY')}
-
- )}
- {item?.modified && (
-
-
- {intl.formatMessage(messages.update_date)}:{' '}
-
- {moment(item.modified).format('DD-MM-YYYY')}
-
- )}
-
+
+ {full_width ? (
+
+ {item.title}{' '}
+
+
+ ) : (
+ <>
+ {item.title}{' '}
+
+
+ )}
+
+
+ )}
+
+ );
+};
+
+export default SlideItemDefault;
diff --git a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx
index 832006211..2a9346934 100644
--- a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx
+++ b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx
@@ -5,43 +5,26 @@ import 'slick-carousel/slick/slick.css';
import 'design-comuni-plone-theme/components/slick-carousel/slick/slick-theme.css';
import { Col, Container, Row } from 'design-react-kit';
import {
- Icon,
ListingImage,
ListingLinkMore,
+ SingleSlideWrapper,
+ CarouselWrapper,
+ ButtonPlayPause,
} from 'design-comuni-plone-theme/components/ItaliaTheme';
-import {
- useSlider,
- visibleSlideTitle,
-} from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils';
+import { useSlider } from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/slider';
import React, { useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import PropTypes from 'prop-types';
-import { UniversalLink } from '@plone/volto/components';
import cx from 'classnames';
import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import config from '@plone/volto/registry';
const messages = defineMessages({
- viewImage: {
- id: 'viewImage',
+ carouselItemAriaLabel: {
+ id: 'carousel-item-aria-label',
defaultMessage:
'Sei attualmente in un carosello, per navigare usa le frecce sinistra e destra',
},
- play: {
- id: 'Play slider',
- defaultMessage: 'Seleziona per riprodurre',
- },
- pause: {
- id: 'Pause slider',
- defaultMessage: 'Seleziona per mettere in pausa',
- },
- precedente: {
- id: 'precedente',
- defaultMessage: 'Precedente',
- },
- successivo: {
- id: 'successivo',
- defaultMessage: 'Successivo',
- },
dots: {
id: 'dots',
defaultMessage: 'Navigazione elementi slider',
@@ -56,169 +39,29 @@ const messages = defineMessages({
},
});
-function NextArrow(props) {
- // Custom handling of focus for a11y
- const { className, style, onClick, intl, currentSlide } = props;
- const handleClick = (options) => {
- onClick(options, false);
- };
- const handleKeyboardUsers = (e) => {
- if (e.key === 'Tab' && e.shiftKey) {
- e.stopPropagation();
- e.preventDefault();
-
- const link = visibleSlideTitle(
- `a.slide-link[data-slide="${currentSlide}"]`,
- );
- link && link.focus();
- }
- };
-
- return (
-
- );
-}
-
-function PrevArrow(props) {
- // Custom handling of focus for a11y
- const {
- className,
- style,
- onClick,
- intl,
- focusNext,
- currentSlide,
- slideCount,
- } = props;
- const handleClick = (options) => {
- onClick(options, false);
- };
- const handleKeyboardUsers = (e) => {
- if (e.key === 'Tab' && !e.shiftKey) {
- e.stopPropagation();
- e.preventDefault();
- if (currentSlide < slideCount) {
- const link = visibleSlideTitle(
- `a.slide-link[data-slide="${currentSlide}"]`,
- );
- link && link.focus();
- } else focusNext(0);
- }
- };
- return (
-
- );
-}
+const Slide = (props) => {
+ const intl = useIntl();
+ const { item, index, appearance, appearanceProp, onKeyDown } = props;
-const Slide = ({
- item,
- index,
- image,
- show_image_title,
- full_width,
- intl,
- setUserAutoplay,
- userAutoplay,
- slider,
-}) => {
- const handleKeyboardUsers = (e) => {
- const { key, shiftKey } = e;
- if (key === 'Tab') {
- e.stopPropagation();
- e.preventDefault();
- // Keeping auto pause off for now
- // if (userAutoplay) setUserAutoplay(false);
- // slider.current.slickPause();
- let elementToFocus;
- if (shiftKey) {
- elementToFocus = document.getElementById('sliderPrevArrow');
- } else elementToFocus = document.getElementById('sliderNextArrow');
- elementToFocus.focus();
- }
- };
+ const appearances = config.blocks.blocksConfig.listing.variations.filter(
+ (v) => v.id === 'slider',
+ )[0]?.appearance;
+ const SlideItemAppearance = appearances[appearance] ?? appearances['default'];
return (
-
-
- {image ? (
-
{image}
- ) : (
-
- )}
- {show_image_title && (
-
-
- {full_width ? (
-
- {item.title}{' '}
-
-
- ) : (
- <>
- {item.title}{' '}
-
-
- )}
-
-
- )}
+
+
-
+
);
};
@@ -235,13 +78,28 @@ const SliderTemplate = ({
show_dots = true,
autoplay = false,
autoplay_speed = 2, //seconds
+ slide_appearance = 'default',
reactSlick,
+ block,
+ ...otherProps
}) => {
+ const block_id = block;
const intl = useIntl();
+
const [userAutoplay, setUserAutoplay] = useState(autoplay);
- const nSlidesToShow = parseInt(slidesToShow);
+ const nSlidesToShow =
+ items.length < parseInt(slidesToShow)
+ ? items.length
+ : parseInt(slidesToShow);
const Slider = reactSlick.default;
- const { slider, focusNext } = useSlider(userAutoplay);
+ const {
+ slider,
+ focusSlide,
+ SliderNextArrow,
+ SliderPrevArrow,
+ handleSlideKeydown,
+ } = useSlider(userAutoplay, setUserAutoplay, block_id);
+
const toggleAutoplay = () => {
if (!slider?.current) return;
if (userAutoplay) {
@@ -313,11 +171,11 @@ const SliderTemplate = ({
focusOnSelect: false,
draggable: true,
accessibility: true,
- nextArrow:
,
- prevArrow:
,
+ nextArrow:
,
+ prevArrow:
,
appendDots: renderCustomDots,
// Custom handling of focus for a11y
- afterChange: focusNext,
+ afterChange: focusSlide,
responsive: [
{
breakpoint: 980,
@@ -333,7 +191,9 @@ const SliderTemplate = ({
{title && (
@@ -349,30 +209,11 @@ const SliderTemplate = ({
'full-width': full_width,
})}
>
-
+
{items?.length > nSlidesToShow && (
-
-
-
+
+ {userAutoplay ? 'pause' : 'play'}
+
)}
@@ -383,6 +224,8 @@ const SliderTemplate = ({
sizes: `max-width(991px) 620px, ${1300 / nSlidesToShow}px`,
critical: true,
});
+ const nextIndex = index < items.length - 1 ? index + 1 : null;
+ const prevIndex = index > 0 ? index - 1 : null;
return (
);
})}
-
diff --git a/src/components/ItaliaTheme/Blocks/VideoGallery/Body.jsx b/src/components/ItaliaTheme/Blocks/VideoGallery/Body.jsx
index 253f8bd99..0e9e6e0b2 100644
--- a/src/components/ItaliaTheme/Blocks/VideoGallery/Body.jsx
+++ b/src/components/ItaliaTheme/Blocks/VideoGallery/Body.jsx
@@ -7,10 +7,14 @@ import React from 'react';
import PropTypes from 'prop-types';
import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import { useIntl, defineMessages } from 'react-intl';
-import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import { FontAwesomeIcon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import { Button, Container } from 'design-react-kit';
+
+import {
+ Icon,
+ CarouselWrapper,
+ NextArrow,
+ PrevArrow,
+} from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { Container } from 'design-react-kit';
import { UniversalLink } from '@plone/volto/components';
/**
@@ -19,49 +23,7 @@ import { UniversalLink } from '@plone/volto/components';
* @extends Component
*/
-const messages = defineMessages({
- videogallery_next_arrow: {
- id: 'videogallery_next_arrow',
- defaultMessage: 'Prossimo video',
- },
- videogallery_prev_arrow: {
- id: 'videogallery_prev_arrow',
- defaultMessage: 'Video precedente',
- },
-});
-
const Body = ({ data, children, nItems = 0, reactSlick }) => {
- const intl = useIntl();
-
- const NextArrow = (props) => {
- const { onClick, className } = props;
- return (
-
- );
- };
- const PrevArrow = (props) => {
- const { onClick, className } = props;
- return (
-
- );
- };
-
const Slider = reactSlick.default;
const settings = {
@@ -127,9 +89,9 @@ const Body = ({ data, children, nItems = 0, reactSlick }) => {
)}
+
-
+
))}
{this.state.subblocks.length === 0 && (
{this.props.intl.formatMessage(messages.noVideos)}
diff --git a/src/components/ItaliaTheme/Blocks/VideoGallery/View.jsx b/src/components/ItaliaTheme/Blocks/VideoGallery/View.jsx
index effd0cc4c..b427830a0 100644
--- a/src/components/ItaliaTheme/Blocks/VideoGallery/View.jsx
+++ b/src/components/ItaliaTheme/Blocks/VideoGallery/View.jsx
@@ -7,6 +7,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import Body from './Body';
import ViewBlock from './Block/ViewBlock';
+import { SingleSlideWrapper } from 'design-comuni-plone-theme/components/ItaliaTheme';
/**
* View icons blocks class.
@@ -18,9 +19,9 @@ const View = ({ data, block }) => {
{data.subblocks.map((subblock, subindex) => (
-
+
-
+
))}
+
+
+ );
+};
+
+export default ButtonPlayPause;
diff --git a/src/components/ItaliaTheme/Slider/CarouselWrapper.jsx b/src/components/ItaliaTheme/Slider/CarouselWrapper.jsx
new file mode 100644
index 000000000..3f4122d88
--- /dev/null
+++ b/src/components/ItaliaTheme/Slider/CarouselWrapper.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+const messages = defineMessages({
+ carousel: {
+ id: 'carousel',
+ defaultMessage: 'Carosello',
+ },
+});
+const CarouselWrapper = ({ className, children }) => {
+ const intl = useIntl();
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default CarouselWrapper;
diff --git a/src/components/ItaliaTheme/Slider/NextArrow.jsx b/src/components/ItaliaTheme/Slider/NextArrow.jsx
new file mode 100644
index 000000000..abd2e9a71
--- /dev/null
+++ b/src/components/ItaliaTheme/Slider/NextArrow.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+ successivo: {
+ id: 'successivo',
+ defaultMessage: 'Successivo',
+ },
+});
+
+export default function NextArrow(props) {
+ const intl = useIntl();
+ const { className, style, onClick, onKeyDown, title, id } = props;
+ const _title = title ?? intl.formatMessage(messages.successivo);
+ return (
+
+ );
+}
diff --git a/src/components/ItaliaTheme/Slider/PrevArrow.jsx b/src/components/ItaliaTheme/Slider/PrevArrow.jsx
new file mode 100644
index 000000000..185770d34
--- /dev/null
+++ b/src/components/ItaliaTheme/Slider/PrevArrow.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+ precedente: {
+ id: 'precedente',
+ defaultMessage: 'Precedente',
+ },
+});
+
+export default function PrevArrow(props) {
+ const intl = useIntl();
+ const { className, style, onClick, onKeyDown, title, id } = props;
+
+ const _title = title ?? intl.formatMessage(messages.precedente);
+
+ return (
+
+ );
+}
diff --git a/src/components/ItaliaTheme/Slider/SingleSlideWrapper.jsx b/src/components/ItaliaTheme/Slider/SingleSlideWrapper.jsx
new file mode 100644
index 000000000..fe7f48d40
--- /dev/null
+++ b/src/components/ItaliaTheme/Slider/SingleSlideWrapper.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+const messages = defineMessages({
+ carouselSlide: {
+ id: 'carouselSlide',
+ defaultMessage: 'Slide',
+ },
+});
+const SingleSlideWrapper = (props) => {
+ const { className, key, index, children, onKeyDown } = props;
+ const intl = useIntl();
+ const wrapperKey = key ?? 'slide-wrapper-' + index;
+
+ return (
+ {
+ e.preventDefault();
+ e.stopPropagation();
+ }}
+ tabIndex={0}
+ >
+ {children}
+
+ );
+};
+
+export default SingleSlideWrapper;
diff --git a/src/components/ItaliaTheme/Slider/slider.js b/src/components/ItaliaTheme/Slider/slider.js
new file mode 100644
index 000000000..7ccc1b64a
--- /dev/null
+++ b/src/components/ItaliaTheme/Slider/slider.js
@@ -0,0 +1,203 @@
+import { useRef, useEffect } from 'react';
+import {
+ NextArrow,
+ PrevArrow,
+} from 'design-comuni-plone-theme/components/ItaliaTheme';
+
+export const useSlider = (userAutoplay, setUserAutoplay, block_id) => {
+ const slider = useRef(null);
+ const sliderContainer = document.getElementById('outside-slider-' + block_id);
+ const sliderElementSelector = `#slider_${block_id}`;
+ const sliderElement = document.querySelector(sliderElementSelector);
+ const onIntersection = (entries, opt) => {
+ entries.forEach((entry) =>
+ entry.target.classList.toggle('visible', entry.isIntersecting),
+ );
+ };
+ const observer = new IntersectionObserver(onIntersection, {
+ root: null,
+ threshold: 0.5,
+ });
+
+ const setAutoplay = (a) => {
+ setUserAutoplay(a);
+ slider.current.slickPause(a);
+ };
+
+ if (sliderContainer) observer.observe(sliderContainer);
+ useEffect(() => {
+ return () => observer.disconnect();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ const focusSlide = (slideIndex) => {
+ if (!sliderElement) return;
+ const sliderIsVisible = sliderContainer?.classList?.contains('visible');
+
+ if (!sliderIsVisible) {
+ setAutoplay(false);
+ return;
+ }
+
+ const slide = document.querySelector(
+ `${sliderElementSelector} .slick-slide[data-index="${slideIndex}"] .it-single-slide-wrapper`,
+ );
+
+ if (userAutoplay && !slide) return;
+
+ if (!slide || document.activeElement === slide) {
+ return;
+ }
+
+ //se c'è l'autoplay e non ho il focus sullo, non faccio il focus sulle slide per non perdere il focus sull'elemento della pagina su cui sono e che sta fuori dallo slider.
+ const focusedSliderElement = Array.from(
+ document.querySelectorAll(sliderElementSelector),
+ ).some((node) => node.contains(document.activeElement));
+
+ if (focusedSliderElement) {
+ slide.focus();
+ }
+ };
+
+ const visibleSlide = (selector) => {
+ // Needed to deal with react-slick duplicating a lot of slides
+ // when used in infinite mode. It's an useless and counterproductive
+ // thing to do on their part, there are multiple issues opened.
+ // The lib is not actually mantained so...
+
+ return Array.from(document.querySelectorAll(selector)).find((e) => {
+ const slick_slide = e.closest('.slick-slide');
+ return !slick_slide.classList.contains('slick-cloned');
+ });
+ };
+
+ const SliderNextArrow = (props) => {
+ // Custom handling of focus for a11y
+ const { className, style, onClick, currentSlide } = props;
+ const handleClick = (options) => {
+ onClick(options, false);
+ };
+ const handleKeyboardUsers = (e) => {
+ if (e.key === 'Tab' && e.shiftKey) {
+ e.stopPropagation();
+ e.preventDefault();
+ setAutoplay(false);
+ const slide = visibleSlide(
+ `${sliderElementSelector} .slick-slide[data-index="${currentSlide}"]`,
+ );
+ slide && slide.focus();
+ }
+ };
+
+ return (
+
+ );
+ };
+
+ const SliderPrevArrow = (props) => {
+ // Custom handling of focus for a11y
+ const { className, style, onClick, currentSlide, slideCount } = props;
+ const handleClick = (options) => {
+ onClick(options, false);
+ };
+ const handleKeyboardUsers = (e) => {
+ if (e.key === 'Tab' && !e.shiftKey) {
+ e.stopPropagation();
+ e.preventDefault();
+
+ setAutoplay(false);
+
+ if (currentSlide < slideCount) {
+ const slide = visibleSlide(
+ `${sliderElementSelector} .slick-slide[data-index="${currentSlide}"]`,
+ );
+
+ slide && slide.focus();
+ }
+ }
+ };
+ return (
+
+ );
+ };
+
+ const handleSlideKeydown = (index, prevIndex, nextIndex) => (e) => {
+ const { key, shiftKey } = e;
+
+ setAutoplay(false);
+
+ if (key === 'Tab') {
+ const slide_selector = `#slider_${block_id} .slick-slide[data-index="${index}"]`;
+
+ const focusableSlideElements = document.querySelectorAll(
+ `${slide_selector} a, ${slide_selector} button, ${slide_selector} [tabindex="0"]`,
+ );
+ const isFirstSlideFocusableElement =
+ e.target === focusableSlideElements[0];
+ const isLastSlideFocusableElement =
+ e.target === focusableSlideElements[focusableSlideElements.length - 1];
+
+ if (
+ (isFirstSlideFocusableElement && shiftKey) ||
+ (isLastSlideFocusableElement && !shiftKey)
+ ) {
+ e.preventDefault();
+ e.stopPropagation();
+ //shift+tab ed è il primo elemento focusabile nella slide, oppure tab ed è l'ultimo elemento focusabile nella slide
+ //go to next/prev slide or to next/prev button.
+ } else {
+ return; //continue doing default bhv of Tab key, to focus next focusable element inside slide.
+ }
+
+ if (shiftKey) {
+ if (prevIndex != null) {
+ slider.current.slickGoTo(prevIndex);
+ } else {
+ document.getElementById('sliderPrevArrow_' + block_id).focus();
+ }
+ } else {
+ if (nextIndex != null) {
+ slider.current.slickGoTo(nextIndex);
+ } else {
+ document.getElementById('sliderNextArrow_' + block_id).focus();
+ }
+ }
+ }
+
+ if (key === 'ArrowRight') {
+ if (nextIndex != null) {
+ e.preventDefault();
+ e.stopPropagation();
+ slider.current.slickGoTo(nextIndex);
+ }
+ }
+ if (key === 'ArrowLeft') {
+ if (prevIndex != null) {
+ e.preventDefault();
+ e.stopPropagation();
+ slider.current.slickGoTo(prevIndex);
+ }
+ }
+ };
+
+ return {
+ slider,
+ focusSlide,
+ visibleSlide,
+ SliderNextArrow,
+ SliderPrevArrow,
+ handleSlideKeydown,
+ };
+};
diff --git a/src/components/ItaliaTheme/View/Commons/Gallery.jsx b/src/components/ItaliaTheme/View/Commons/Gallery.jsx
index fbc12a5ef..788ea3b83 100644
--- a/src/components/ItaliaTheme/View/Commons/Gallery.jsx
+++ b/src/components/ItaliaTheme/View/Commons/Gallery.jsx
@@ -8,7 +8,11 @@ import { resetSearchContent, searchContent } from '@plone/volto/actions';
import { useDispatch, useSelector } from 'react-redux';
import EmbeddedVideo from './EmbeddedVideo';
-import { GalleryPreview } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import {
+ GalleryPreview,
+ SingleSlideWrapper,
+ CarouselWrapper,
+} from 'design-comuni-plone-theme/components/ItaliaTheme';
import PropTypes from 'prop-types';
import { contentFolderHasItems } from 'design-comuni-plone-theme/helpers';
import { UniversalLink } from '@plone/volto/components';
@@ -146,10 +150,10 @@ const Gallery = ({
{title_type === 'h5' && {gallery_title}
}
+
{images.map((item, i) => (
-
+
-
+
))}
@@ -191,7 +195,7 @@ const Gallery = ({
setViewIndex={setViewImageIndex}
items={images}
/>
-
+
{videos.map((item, i) => (
-
+
-
+
))}
- {children}
+ ) : (
+ <>{children}
+ );
+};
/**
* RenderBlocks view component class.
* @function RenderBlocks
@@ -57,15 +64,21 @@ const RenderBlocks = ({
{map(items, (block) => {
const blockType = blockContent[blocksFieldname]?.[block]?.['@type'];
const Block = config.blocks.blocksConfig[blockType]?.['view'] || null;
+
if (Block != null) {
return (
-
+
+
+
);
} else {
return (
diff --git a/src/components/ItaliaTheme/index.js b/src/components/ItaliaTheme/index.js
index 71199cc45..afd0384b3 100644
--- a/src/components/ItaliaTheme/index.js
+++ b/src/components/ItaliaTheme/index.js
@@ -83,11 +83,16 @@ export CardCalendar from 'design-comuni-plone-theme/components/ItaliaTheme/Block
export ListingCategory from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/ListingCategory';
export ListingText from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/ListingText';
export ListingLinkMore from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/ListingLinkMore';
-export NextArrow from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/NextArrow';
-export PrevArrow from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/PrevArrow';
+
export ListingImage, {
getListingImageBackground,
} from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/ListingImage';
+/*Slider*/
+export SingleSlideWrapper from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/SingleSlideWrapper';
+export CarouselWrapper from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/CarouselWrapper';
+export ButtonPlayPause from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/ButtonPlayPause';
+export NextArrow from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/NextArrow';
+export PrevArrow from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/PrevArrow';
/********* ERROR PAGES ********* */
export Unauthorized from 'design-comuni-plone-theme/components/ItaliaTheme/Unauthorized/Unauthorized';
diff --git a/src/config/Blocks/ListingOptions/cardWithImageTemplate.js b/src/config/Blocks/ListingOptions/cardWithImageTemplate.js
index 344c4c35e..76f4d0607 100644
--- a/src/config/Blocks/ListingOptions/cardWithImageTemplate.js
+++ b/src/config/Blocks/ListingOptions/cardWithImageTemplate.js
@@ -38,6 +38,23 @@ export const addCardWithImageTemplateOptions = (
pos = addDefaultOptions(schema, formData, intl, pos);
+ pos = imageCardTemplateOptions(schema, formData, intl, pos);
+
+ return pos;
+};
+
+/*questa funzione è riutilizzabile.
+Serve per fare in modo che le opzioni relative alla visualizzazione di ogni singola card,
+si possano riutilizzare in altre variations del blocco listing, dove appunto viene riutilizzato il componente di visualizzazione dell'elemento.
+Ad esempio, è stato usato anche nella variazione 'slider' per poter mostrare gli elementi con aspetto 'Card con immagine'.*/
+export const imageCardTemplateOptions = (
+ schema,
+ formData,
+ intl,
+ position,
+ hide_fields = [], //array of string
+) => {
+ let pos = position;
pos = templatesOptions(
schema,
formData,
@@ -52,7 +69,7 @@ export const addCardWithImageTemplateOptions = (
'hide_dates',
'show_description',
'show_topics',
- ],
+ ].filter((f) => hide_fields.indexOf(f) < 0),
{
always_show_image: {
default: false,
@@ -72,6 +89,5 @@ export const addCardWithImageTemplateOptions = (
},
pos,
);
-
return pos;
};
diff --git a/src/config/Blocks/ListingOptions/simpleCardTemplate.js b/src/config/Blocks/ListingOptions/simpleCardTemplate.js
index ae82f9320..3d3717ec6 100644
--- a/src/config/Blocks/ListingOptions/simpleCardTemplate.js
+++ b/src/config/Blocks/ListingOptions/simpleCardTemplate.js
@@ -79,28 +79,45 @@ export const addSimpleCardTemplateOptions = (
pos,
);
} else {
- pos = templatesOptions(
+ pos = simpleCardTemplateOptions_appearance_default(
schema,
formData,
intl,
- [
- 'show_icon',
- 'hide_dates',
- 'show_section',
- 'show_type',
- 'show_description',
- 'show_detail_link',
- 'show_path_filters',
- ],
- {
- hide_dates: { default: false },
- show_icon: { default: true },
- show_type: { default: false },
- show_detail_link: { default: false },
- show_path_filters: { default: false },
- },
pos,
);
}
return pos;
};
+
+export const simpleCardTemplateOptions_appearance_default = (
+ schema,
+ formData,
+ intl,
+ position,
+ hide_fields = [], //array of string
+) => {
+ let pos = position;
+ pos = templatesOptions(
+ schema,
+ formData,
+ intl,
+ [
+ 'show_icon',
+ 'hide_dates',
+ 'show_section',
+ 'show_type',
+ 'show_description',
+ 'show_detail_link',
+ 'show_path_filters',
+ ].filter((f) => hide_fields.indexOf(f) < 0),
+ {
+ hide_dates: { default: false },
+ show_icon: { default: true },
+ show_type: { default: false },
+ show_detail_link: { default: false },
+ show_path_filters: { default: false },
+ },
+ pos,
+ );
+ return pos;
+};
diff --git a/src/config/Blocks/ListingOptions/sliderTemplate.js b/src/config/Blocks/ListingOptions/sliderTemplate.js
index f5a09b5ad..5eb3c16a8 100644
--- a/src/config/Blocks/ListingOptions/sliderTemplate.js
+++ b/src/config/Blocks/ListingOptions/sliderTemplate.js
@@ -1,6 +1,8 @@
import { defineMessages } from 'react-intl';
import { addSchemaField } from 'design-comuni-plone-theme/config/Blocks/ListingOptions';
+import { simpleCardTemplateOptions_appearance_default } from 'design-comuni-plone-theme/config/Blocks/ListingOptions/simpleCardTemplate';
+import { imageCardTemplateOptions } from 'design-comuni-plone-theme/config/Blocks/ListingOptions/cardWithImageTemplate';
const messages = defineMessages({
show_full_width: {
@@ -31,8 +33,28 @@ const messages = defineMessages({
id: 'autoplay_speed_description',
defaultMessage: 'La velocità di autoplay deve essere espressa in secondi.',
},
+ appearance: {
+ id: 'Aspetto',
+ defaultMessage: 'Aspetto',
+ },
+ slider_listing_appearance_description: {
+ id: 'slider_listing_appearance_description',
+ defaultMessage:
+ "Qui puoi selezionare, per il template 'Slider', un aspetto diverso da quello di default per gli elementi mostrati nello slider.",
+ },
+ slider_listing_appearance_simplecard: {
+ id: 'slider_listing_appearance_simplecard',
+ defaultMessage: 'Card semplice',
+ },
+ slider_listing_appearance_imagecard: {
+ id: 'slider_listing_appearance_imagecard',
+ defaultMessage: 'Card con immagine',
+ },
});
+export const SliderTemplateAppearance_SIMPLECARD = 'simple_card';
+export const SliderTemplateAppearance_IMAGECARD = 'image_card';
+
export const addSliderTemplateOptions = (
schema,
formData,
@@ -51,16 +73,6 @@ export const addSliderTemplateOptions = (
);
pos++;
- addSchemaField(
- schema,
- 'show_image_title',
- intl.formatMessage(messages.show_image_title),
- null,
- { type: 'boolean', default: true },
- pos,
- );
- pos++;
-
addSchemaField(
schema,
'show_dots',
@@ -91,7 +103,7 @@ export const addSliderTemplateOptions = (
);
pos++;
- pos = addSchemaField(
+ addSchemaField(
schema,
'slidesToShow',
intl.formatMessage(messages.slidesToShow),
@@ -99,5 +111,50 @@ export const addSliderTemplateOptions = (
{ type: 'number', default: 1 },
pos,
);
+ pos++;
+ //appearance options
+
+ let choices = [
+ [
+ SliderTemplateAppearance_SIMPLECARD,
+ intl.formatMessage(messages.slider_listing_appearance_simplecard),
+ ],
+ [
+ SliderTemplateAppearance_IMAGECARD,
+ intl.formatMessage(messages.slider_listing_appearance_imagecard),
+ ],
+ ];
+
+ addSchemaField(
+ schema,
+ 'slide_appearance',
+ intl.formatMessage(messages.appearance),
+ intl.formatMessage(messages.slider_listing_appearance_description),
+ {
+ choices,
+ },
+ pos,
+ );
+ pos++;
+
+ if (formData.slide_appearance === SliderTemplateAppearance_SIMPLECARD) {
+ simpleCardTemplateOptions_appearance_default(schema, formData, intl, pos, [
+ 'show_path_filters',
+ ]);
+ pos++;
+ } else if (formData.slide_appearance === SliderTemplateAppearance_IMAGECARD) {
+ imageCardTemplateOptions(schema, formData, intl, pos, ['set_four_columns']);
+ pos++;
+ } else {
+ addSchemaField(
+ schema,
+ 'show_image_title',
+ intl.formatMessage(messages.show_image_title),
+ null,
+ { type: 'boolean', default: true },
+ pos,
+ );
+ pos++;
+ }
return pos;
};
diff --git a/src/config/Blocks/listingVariations.js b/src/config/Blocks/listingVariations.js
index e91012edd..ba43d28b4 100644
--- a/src/config/Blocks/listingVariations.js
+++ b/src/config/Blocks/listingVariations.js
@@ -26,6 +26,9 @@ import PhotogalleryTemplateSkeleton from 'design-comuni-plone-theme/components/I
import SliderTemplate from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/SliderTemplate';
import SliderTemplateSkeleton from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/TemplatesSkeletons/SliderTemplateSkeleton';
+import SlideItemDefault from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault';
+import SlideItemSimpleCard from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault';
+import SlideItemImageCard from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault';
import GridGalleryTemplate from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/GridGalleryTemplate';
import GridGalleryTemplateSkeleton from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/TemplatesSkeletons/GridGalleryTemplateSkeleton';
@@ -229,6 +232,11 @@ const italiaListingVariations = [
return schema;
},
cloneData: cloneBlock,
+ appearance: {
+ default: SlideItemDefault,
+ simple_card: SlideItemSimpleCard,
+ image_card: SlideItemImageCard,
+ },
},
{
id: 'gridGalleryTemplate',
diff --git a/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx b/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx
index ea9dd328c..c6b86975d 100644
--- a/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx
+++ b/src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx
@@ -5,6 +5,7 @@ CUSTOMIZATIONS:
- 'background class' and 'block class'
- 'background class' and 'block class' logic for search block
- search block integration
+- pass 'block' prop to listing variation
*/
import React from 'react';
import { FormattedMessage, injectIntl } from 'react-intl';
@@ -37,7 +38,9 @@ const ListingBody = React.memo(
loadingQuery,
listingRef,
additionalFilters,
+ block,
} = props;
+
let ListingBodyTemplate;
let templateConfig;
// Legacy support if template is present
@@ -97,6 +100,7 @@ const ListingBody = React.memo(
// Also need to purge title from searchblock schema, it's the name of the listing template used
const listingBodyProps =
variation?.['@type'] !== 'search' ? data : { ...variation, title: '' };
+
return (
{loadingQuery && (
@@ -114,6 +118,7 @@ const ListingBody = React.memo(
{
const imgsrc = value?.download
? `${flattenToAppURL(value?.download)}?id=${Date.now()}`
: null || value?.data
- ? `data:${value['content-type']};${value.encoding},${value.data}`
- : null;
+ ? `data:${value['content-type']};${value.encoding},${value.data}`
+ : null;
/**
* Drop handler
diff --git a/src/theme/ItaliaTheme/Blocks/_cardWithImageAndInEvidence.scss b/src/theme/ItaliaTheme/Blocks/_cardWithImage.scss
similarity index 65%
rename from src/theme/ItaliaTheme/Blocks/_cardWithImageAndInEvidence.scss
rename to src/theme/ItaliaTheme/Blocks/_cardWithImage.scss
index cd85f48ba..6b2104b3c 100644
--- a/src/theme/ItaliaTheme/Blocks/_cardWithImageAndInEvidence.scss
+++ b/src/theme/ItaliaTheme/Blocks/_cardWithImage.scss
@@ -1,5 +1,4 @@
-.block.listing .card-with-image-template,
-.block.listing .in-evidence {
+.block.listing .card-with-image-template {
.col-item {
margin-bottom: 22px;
}
@@ -90,54 +89,80 @@
}
}
-.card-with-image-template {
- .listing-item.card {
- .card-body {
- .category-top {
- color: $caption-text;
- font-size: 0.875rem;
- line-height: 1.313rem;
-
- .text {
- font-weight: 600;
- letter-spacing: 1px;
- }
+.card-with-image-default-item.listing-item.card {
+ .card-body {
+ .category-top {
+ color: $caption-text;
+ font-size: 0.875rem;
+ line-height: 1.313rem;
- .data {
- font-weight: 400;
- letter-spacing: 1.1px;
- }
+ .text {
+ font-weight: 600;
+ letter-spacing: 1px;
+ }
- &.wrap-dates-four-columns {
- flex-wrap: wrap;
+ .data {
+ font-weight: 400;
+ letter-spacing: 1.1px;
+ }
+ }
- .data {
- margin-top: 0.5rem;
- }
+ .card-title {
+ a {
+ color: $link-color;
+ font-size: 1.3rem;
+ font-weight: 700;
+ line-height: 1.75rem;
+ }
+ }
- ::before {
- display: none;
- }
+ .card-text {
+ color: $gray-secondary;
+ font-family: $font-family-sans-serif;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ }
+ }
+
+ .icon {
+ width: 32px;
+ height: 32px;
+ }
+
+ .img-responsive-wrapper {
+ width: inherit;
+
+ .img-responsive {
+ .img-wrapper {
+ display: flex;
+ align-items: center;
+
+ picture {
+ display: flex;
+ width: 100%;
+ height: 100%;
}
- }
- .card-title {
- a {
- color: $link-color;
- font-size: 1.3rem;
- font-weight: 700;
- line-height: 1.75rem;
+ img {
+ margin-right: 0;
}
}
+ }
+
+ &.natural-image-size {
+ .img-responsive {
+ position: static;
+ height: auto;
+ padding: 0;
- .card-text {
- color: $gray-secondary;
- font-family: $font-family-sans-serif;
- font-size: 1rem;
- line-height: 1.5rem;
+ figure.img-wrapper {
+ position: static;
+ margin: 0;
+ }
}
}
}
+
@include media-breakpoint-only(lg) {
.listing-item.card {
.card-body {
diff --git a/src/theme/ItaliaTheme/Blocks/_iconBlocks.scss b/src/theme/ItaliaTheme/Blocks/_iconBlocks.scss
index ecb4c52d4..a086535c6 100644
--- a/src/theme/ItaliaTheme/Blocks/_iconBlocks.scss
+++ b/src/theme/ItaliaTheme/Blocks/_iconBlocks.scss
@@ -24,21 +24,22 @@
z-index: -1;
top: 0;
left: 0;
+ overflow: hidden;
width: 100%;
height: 100%;
- overflow: hidden;
img {
position: absolute;
- min-width: 100%;
- min-height: 100%;
- height: auto;
- width: auto;
top: 50%;
left: 50%;
- transform: translate(-50%, -50%);
+ width: auto;
+ min-width: 100%;
max-width: unset;
+ height: auto;
+ min-height: 100%;
+ transform: translate(-50%, -50%);
}
+
&:after {
position: absolute;
width: 100%;
diff --git a/src/theme/ItaliaTheme/Blocks/_inEvidenceTemplate.scss b/src/theme/ItaliaTheme/Blocks/_inEvidenceTemplate.scss
new file mode 100644
index 000000000..9aba74934
--- /dev/null
+++ b/src/theme/ItaliaTheme/Blocks/_inEvidenceTemplate.scss
@@ -0,0 +1,123 @@
+.block.listing .in-evidence {
+ .col-item {
+ margin-bottom: 22px;
+ }
+
+ .icon {
+ width: 32px;
+ height: 32px;
+ }
+
+ .listing-item {
+ a {
+ display: inline;
+ }
+
+ .img-responsive-wrapper {
+ width: inherit;
+
+ .img-responsive {
+ .img-wrapper {
+ display: flex;
+ align-items: center;
+
+ picture {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ }
+
+ img {
+ margin-right: 0;
+ }
+ }
+ }
+
+ &.natural-image-size {
+ .img-responsive {
+ position: static;
+ height: auto;
+ padding: 0;
+
+ figure.img-wrapper {
+ position: static;
+ margin: 0;
+ }
+ }
+ }
+ }
+
+ .img-link {
+ &:after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: transparentize($color: white, $amount: 1);
+ content: '';
+ transition: 0.2s background-color ease;
+ }
+
+ &:hover,
+ &:focus {
+ &:after {
+ background-color: transparentize($color: white, $amount: 0.9);
+ }
+ }
+ }
+
+ .card-title {
+ a {
+ display: inline;
+ width: initial;
+ color: $body-color;
+ text-decoration: none;
+ transition: 0.2s color ease;
+
+ &:hover,
+ &:focus {
+ color: $link-color;
+ text-decoration: underline;
+ }
+ }
+ }
+
+ .event-recurrences-more {
+ bottom: $v-gap * 3;
+ }
+ }
+
+ .in-evidence-cards-wrapper {
+ display: -ms-grid;
+ display: grid;
+ gap: 1.3rem;
+ -ms-grid-columns: 1fr 1.3rem 1fr 1.3rem 1fr;
+ grid-template-columns: 1fr 1fr 1fr;
+ }
+
+ .card-wrapper {
+ &:first-child {
+ grid-column: 1;
+ grid-row: 1 / 3;
+ }
+ }
+
+ // smartphone
+ @media (max-width: 585px) {
+ .in-evidence-cards-wrapper {
+ .card-wrapper {
+ width: 100%;
+ margin: 0px;
+ }
+ display: block;
+ height: 100%;
+ }
+ }
+ // tablet
+ @media (max-width: 1367px) and (min-width: 586px) {
+ .in-evidence-cards-wrapper {
+ grid-template-columns: auto auto;
+ }
+ }
+}
diff --git a/src/theme/ItaliaTheme/Blocks/_inevidencetemplate.scss b/src/theme/ItaliaTheme/Blocks/_inevidencetemplate.scss
deleted file mode 100644
index f8385a780..000000000
--- a/src/theme/ItaliaTheme/Blocks/_inevidencetemplate.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.in-evidence {
- .in-evidence-cards-wrapper {
- display: -ms-grid;
- display: grid;
- gap: 1.3rem;
- -ms-grid-columns: 1fr 1.3rem 1fr 1.3rem 1fr;
- grid-template-columns: 1fr 1fr 1fr;
- }
-
- .card-wrapper {
- &:first-child {
- grid-column: 1;
- grid-row: 1 / 3;
- }
- }
-
- // smartphone
- @media (max-width: 585px) {
- .in-evidence-cards-wrapper {
- .card-wrapper {
- width: 100%;
- margin: 0px;
- }
- display: block;
- height: 100%;
- }
- }
- // tablet
- @media (max-width: 1367px) and (min-width: 586px) {
- .in-evidence-cards-wrapper {
- grid-template-columns: auto auto;
- }
- }
-}
diff --git a/src/theme/ItaliaTheme/Blocks/_simpleCardTemplate.scss b/src/theme/ItaliaTheme/Blocks/_simpleCardTemplate.scss
index e31e9bb25..fb806c8dc 100644
--- a/src/theme/ItaliaTheme/Blocks/_simpleCardTemplate.scss
+++ b/src/theme/ItaliaTheme/Blocks/_simpleCardTemplate.scss
@@ -21,98 +21,96 @@
content: none;
}
- .card.card-teaser {
- &:after {
- content: none;
- }
+ .link-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 30px 0;
+ }
+}
+
+/*item is reusable in other components*/
- .categoryicon-top .icon {
- width: 32px;
- height: 32px;
- color: $gray-secondary;
- fill: $gray-secondary;
- font-weight: 600;
+.card.card-teaser.simple-card-default-item {
+ .categoryicon-top .icon {
+ width: 32px;
+ height: 32px;
+ color: $gray-secondary;
+ fill: $gray-secondary;
+ font-weight: 600;
+ }
+
+ .card-body {
+ a {
+ display: inline-block; //per avere il bordo tutto unito al focus di un link, ad esempio nelle card
+ &:link,
+ &:visited {
+ text-decoration: none;
+ }
+
+ &:hover,
+ &:active {
+ text-decoration: underline;
+ }
}
- .card-body {
+ .card-title {
+ margin-bottom: 10px;
+
a {
+ @include rem-size(font-size, 24);
+ @include rem-size(line-height, 26);
display: inline-block; //per avere il bordo tutto unito al focus di un link, ad esempio nelle card
- &:link,
- &:visited {
- text-decoration: none;
- }
+ font-weight: 700;
&:hover,
&:active {
text-decoration: underline;
}
}
+ }
- .card-title {
- margin-bottom: 10px;
-
- a {
- @include rem-size(font-size, 24);
- @include rem-size(line-height, 26);
- display: inline-block; //per avere il bordo tutto unito al focus di un link, ad esempio nelle card
- font-weight: 700;
-
- &:hover,
- &:active {
- text-decoration: underline;
- }
- }
- }
-
- .category-top {
- span.text {
- span.text.fw-bold {
- color: $link-color;
- font-size: 0.875rem;
- font-weight: 600 !important;
- letter-spacing: 1px;
- line-height: 1.313rem;
- }
+ .category-top {
+ span.text {
+ span.text.fw-bold {
+ color: $link-color;
+ font-size: 0.875rem;
+ font-weight: 600 !important;
+ letter-spacing: 1px;
+ line-height: 1.313rem;
}
}
+ }
- p.card-text {
- font-size: 1rem;
- line-height: 1.5rem;
+ p.card-text {
+ font-size: 1rem;
+ line-height: 1.5rem;
- div.document-date {
- @include rem-size(font-size, 14);
- }
+ div.document-date {
+ @include rem-size(font-size, 14);
}
}
+ }
- .it-card-footer {
- flex: 1 1 100%;
- align-self: flex-end;
-
- a {
- &:hover,
- &:active {
- text-decoration: underline;
- }
+ .it-card-footer {
+ flex: 1 1 100%;
+ align-self: flex-end;
- &:link,
- &:visited {
- text-decoration: none;
- }
+ a {
+ &:hover,
+ &:active {
+ text-decoration: underline;
}
- .icon {
- min-width: unset;
+ &:link,
+ &:visited {
+ text-decoration: none;
}
}
- }
- .link-button {
- display: flex;
- align-items: center;
- justify-content: center;
- margin: 30px 0;
+ .icon {
+ min-width: unset;
+ }
}
}
diff --git a/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss b/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss
index f1919538b..6cb5783ad 100644
--- a/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss
+++ b/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss
@@ -146,6 +146,87 @@
margin-bottom: 0;
}
+ &.appearance_simple_card,
+ &.appearance_image_card {
+ .slider-container {
+ .slick-track {
+ align-items: stretch;
+ padding-bottom: 1.5rem;
+
+ .slick-slide {
+ height: auto;
+
+ > div {
+ height: 100%;
+ }
+
+ .it-single-slide-wrapper {
+ height: 100%;
+
+ .slide-wrapper {
+ height: 100%;
+
+ > .card,
+ > .card-wrapper {
+ height: 100%;
+ }
+
+ > .card {
+ margin: 0.5rem 0;
+ }
+
+ .shadow,
+ .card-bg {
+ box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15) !important;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ &.appearance_image_card {
+ .slider-container {
+ .slick-track {
+ align-items: start;
+ }
+
+ .slick-slide {
+ .slide-wrapper {
+ .listing-item {
+ margin-top: 0.5rem;
+
+ .img-responsive-wrapper {
+ .img-wrapper {
+ position: absolute;
+ height: 100%;
+
+ img {
+ min-width: unset !important;
+ min-height: unset !important;
+ }
+ }
+
+ &.natural-image-size {
+ .img-responsive {
+ position: static;
+ height: auto;
+ padding: 0;
+
+ figure.img-wrapper {
+ position: static;
+ margin: 0;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
.slider-container.full-width {
.slick-arrow.slick-prev {
z-index: 1;
diff --git a/src/theme/ItaliaTheme/Components/_cardPersona.scss b/src/theme/ItaliaTheme/Components/_cardPersona.scss
index 9faaf81c7..694945072 100644
--- a/src/theme/ItaliaTheme/Components/_cardPersona.scss
+++ b/src/theme/ItaliaTheme/Components/_cardPersona.scss
@@ -1,9 +1,9 @@
.card-persona.card-flex {
.card-image-wrapper {
display: flex;
+ width: 100%;
flex: 1;
align-items: flex-start;
- width: 100%;
}
.card-body {
diff --git a/src/theme/ItaliaTheme/Components/_mobileMenu.scss b/src/theme/ItaliaTheme/Components/_mobileMenu.scss
index 3b7de2dcf..1cf91bcd2 100644
--- a/src/theme/ItaliaTheme/Components/_mobileMenu.scss
+++ b/src/theme/ItaliaTheme/Components/_mobileMenu.scss
@@ -106,9 +106,9 @@
margin-left: 0;
svg.icon {
- fill: currentColor;
width: 28px;
height: 28px;
+ fill: currentColor;
}
}
}
diff --git a/src/theme/ItaliaTheme/Print/_all_pages.scss b/src/theme/ItaliaTheme/Print/_all_pages.scss
index 83d66ecc0..d36757b40 100644
--- a/src/theme/ItaliaTheme/Print/_all_pages.scss
+++ b/src/theme/ItaliaTheme/Print/_all_pages.scss
@@ -174,6 +174,7 @@
display: none;
}
}
+
.leaflet-container {
break-inside: avoid;
}
diff --git a/src/theme/ItaliaTheme/Print/_uo.scss b/src/theme/ItaliaTheme/Print/_uo.scss
index 98d52c025..f832781a1 100644
--- a/src/theme/ItaliaTheme/Print/_uo.scss
+++ b/src/theme/ItaliaTheme/Print/_uo.scss
@@ -6,14 +6,17 @@
.card-wrapper {
padding-bottom: 0px;
+
&.card-teaser-wrapper {
margin: 0px;
+
&.row,
& {
--bs-gutter-y: 0px !important;
.card {
border: none !important;
+
&.card-big-io-comune .card-body {
padding: 0px !important;
@@ -22,13 +25,13 @@
}
.card-title a {
- font-size: 16px;
display: flex;
+ font-size: 16px;
&::before {
- content: '•';
display: block;
margin-right: 5px;
+ content: '•';
}
}
}
@@ -64,6 +67,7 @@
.card-title {
margin-bottom: 0px !important;
}
+
.card-text {
padding-top: 0px;
}
@@ -76,6 +80,7 @@
}
}
}
+
.mb-3 {
margin-bottom: 6px !important;
}
diff --git a/src/theme/ItaliaTheme/Views/_common.scss b/src/theme/ItaliaTheme/Views/_common.scss
index 229e8dfbe..38a0e67b4 100644
--- a/src/theme/ItaliaTheme/Views/_common.scss
+++ b/src/theme/ItaliaTheme/Views/_common.scss
@@ -77,11 +77,13 @@ picture.volto-image.responsive img.full-width,
left: calc(50% + calc($toolbar-width / 2));
width: calc(100vw - $toolbar-width) !important;
}
+
.has-toolbar.has-sidebar & {
$toolbars-width: calc($toolbar-width + $sidebar-width);
left: calc(50% + calc($toolbars-width / 2));
width: calc(100vw - $toolbars-width) !important;
}
+
.has-toolbar.has-sidebar-collapsed & {
$toolbars-width: calc($toolbar-width + $sidebar-collapsed-width);
left: calc(50% + calc($toolbars-width / 2));
@@ -92,11 +94,13 @@ picture.volto-image.responsive img.full-width,
left: calc(50% + calc($toolbar-collapsed-width / 2));
width: calc(100vw - $toolbar-collapsed-width) !important;
}
+
.has-toolbar-collapsed.has-sidebar & {
$toolbars-width: calc($toolbar-collapsed-width + $sidebar-width);
left: calc(50% + calc($toolbars-width / 2));
width: calc(100vw - $toolbars-width) !important;
}
+
.has-toolbar-collapsed.has-sidebar-collapsed & {
$toolbars-width: calc($toolbar-collapsed-width + $sidebar-collapsed-width);
left: calc(50% + calc($toolbars-width / 2));
diff --git a/src/theme/site.scss b/src/theme/site.scss
index 0334d6208..717ec7c56 100644
--- a/src/theme/site.scss
+++ b/src/theme/site.scss
@@ -54,7 +54,7 @@
@import 'ItaliaTheme/Blocks/iconBlocks';
@import 'ItaliaTheme/Blocks/imageBlock';
@import 'ItaliaTheme/Blocks/searchSections';
-@import 'ItaliaTheme/Blocks/cardWithImageAndInEvidence';
+@import 'ItaliaTheme/Blocks/cardWithImage';
@import 'ItaliaTheme/Blocks/cardWithImageTextBlock';
@import 'ItaliaTheme/Blocks/cardWithSlideUpTextTemplate';
@import 'ItaliaTheme/Blocks/smallblockLinkstemplate';
@@ -62,7 +62,7 @@
@import 'ItaliaTheme/Blocks/squaresImageTemplate';
@import 'ItaliaTheme/Blocks/photogallerytemplate';
@import 'ItaliaTheme/Blocks/sliderTemplate';
-@import 'ItaliaTheme/Blocks/inevidencetemplate';
+@import 'ItaliaTheme/Blocks/inEvidenceTemplate';
@import 'ItaliaTheme/Blocks/contentInEvidenceTemplate';
@import 'ItaliaTheme/Blocks/mapTemplate';
@import 'ItaliaTheme/Blocks/bandiInEvidenceTemplate';