From a37e98590cd31b2c6be20865af614cef1e99bc24 Mon Sep 17 00:00:00 2001 From: Giulia Ghisini <51911425+giuliaghisini@users.noreply.github.com> Date: Mon, 8 Apr 2024 12:14:49 +0200 Subject: [PATCH] feat: added appearance SimpleCard and ImageCard to listing slider template (#512) * feat: added appearance Card to slider template * feat: added appearance SimpleCard and ImageCard to listing slider template * fix: infos * fix: styles * chore: splitted cardWithImageAndInEvidence.scss file * chore: Rename _inevidencetemplate.scss to _inEvidenceTemplate.scss * fix: avoid items repeat if nSlides is lower than results lenght * fix: a11y * fix: slider a11y * fix: slider tab * fix: slider a11y * chore: moved handleSlideKeydown inside slider utils2 * chore: moved useSlider in dedicated file * fix: only carouse images * chore: removed console.log --- RELEASE.md | 4 + locales/de/LC_MESSAGES/volto.po | 77 ++--- locales/en/LC_MESSAGES/volto.po | 77 ++--- locales/es/LC_MESSAGES/volto.po | 77 ++--- locales/fr/LC_MESSAGES/volto.po | 77 ++--- locales/it/LC_MESSAGES/volto.po | 77 ++--- locales/volto.pot | 79 ++--- .../ItaliaTheme/Blocks/Calendar/Body.jsx | 82 ++---- .../CardWithImage/CardWithImageDefault.jsx | 182 ++++++++++++ .../Blocks/Listing/CardWithImageTemplate.jsx | 180 +----------- .../Blocks/Listing/Commons/NextArrow.jsx | 10 - .../Blocks/Listing/Commons/PrevArrow.jsx | 10 - .../Blocks/Listing/Commons/utils.js | 70 ----- .../Blocks/Listing/PhotogalleryTemplate.jsx | 60 ++-- .../SimpleCard/Card/SimpleCardDefault.jsx | 177 +++++++++++ .../SimpleCard/SimpleCardTemplateDefault.jsx | 178 +----------- .../Listing/Slider/SlideItemDefault.jsx | 65 +++++ .../Blocks/Listing/SliderTemplate.jsx | 274 ++++-------------- .../ItaliaTheme/Blocks/VideoGallery/Body.jsx | 58 +--- .../ItaliaTheme/Blocks/VideoGallery/Edit.jsx | 5 +- .../ItaliaTheme/Blocks/VideoGallery/View.jsx | 5 +- .../ItaliaTheme/Icons/FontAwesomeIcon.jsx | 4 +- .../ItaliaTheme/Slider/ButtonPlayPause.jsx | 48 +++ .../ItaliaTheme/Slider/CarouselWrapper.jsx | 23 ++ .../ItaliaTheme/Slider/NextArrow.jsx | 31 ++ .../ItaliaTheme/Slider/PrevArrow.jsx | 33 +++ .../ItaliaTheme/Slider/SingleSlideWrapper.jsx | 39 +++ src/components/ItaliaTheme/Slider/slider.js | 203 +++++++++++++ .../ItaliaTheme/View/Commons/Gallery.jsx | 22 +- .../ItaliaTheme/View/Commons/RenderBlocks.jsx | 27 +- src/components/ItaliaTheme/index.js | 9 +- .../ListingOptions/cardWithImageTemplate.js | 20 +- .../ListingOptions/simpleCardTemplate.js | 51 ++-- .../Blocks/ListingOptions/sliderTemplate.js | 79 ++++- src/config/Blocks/listingVariations.js | 8 + .../manage/Blocks/Listing/ListingBody.jsx | 5 + .../components/manage/Widgets/FileWidget.jsx | 4 +- ...AndInEvidence.scss => _cardWithImage.scss} | 101 ++++--- src/theme/ItaliaTheme/Blocks/_iconBlocks.scss | 13 +- .../Blocks/_inEvidenceTemplate.scss | 123 ++++++++ .../Blocks/_inevidencetemplate.scss | 34 --- .../Blocks/_simpleCardTemplate.scss | 132 +++++---- .../ItaliaTheme/Blocks/_sliderTemplate.scss | 81 ++++++ .../ItaliaTheme/Components/_cardPersona.scss | 2 +- .../ItaliaTheme/Components/_mobileMenu.scss | 2 +- src/theme/ItaliaTheme/Print/_all_pages.scss | 1 + src/theme/ItaliaTheme/Print/_uo.scss | 9 +- src/theme/ItaliaTheme/Views/_common.scss | 4 + src/theme/site.scss | 4 +- 49 files changed, 1724 insertions(+), 1212 deletions(-) create mode 100644 src/components/ItaliaTheme/Blocks/Listing/CardWithImage/CardWithImageDefault.jsx delete mode 100644 src/components/ItaliaTheme/Blocks/Listing/Commons/NextArrow.jsx delete mode 100644 src/components/ItaliaTheme/Blocks/Listing/Commons/PrevArrow.jsx create mode 100644 src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx create mode 100644 src/components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault.jsx create mode 100644 src/components/ItaliaTheme/Slider/ButtonPlayPause.jsx create mode 100644 src/components/ItaliaTheme/Slider/CarouselWrapper.jsx create mode 100644 src/components/ItaliaTheme/Slider/NextArrow.jsx create mode 100644 src/components/ItaliaTheme/Slider/PrevArrow.jsx create mode 100644 src/components/ItaliaTheme/Slider/SingleSlideWrapper.jsx create mode 100644 src/components/ItaliaTheme/Slider/slider.js rename src/theme/ItaliaTheme/Blocks/{_cardWithImageAndInEvidence.scss => _cardWithImage.scss} (65%) create mode 100644 src/theme/ItaliaTheme/Blocks/_inEvidenceTemplate.scss delete mode 100644 src/theme/ItaliaTheme/Blocks/_inevidencetemplate.scss 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' && ( + + )} +
+
+ )} + + {(icon || category || date) && ( + + + + )} + + + {item.title || item.id} + + + {listingText && ( + 0, + })} + > + {listingText} + + )} + + {topics?.length > 0 && ( +
+ {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' && ( - - )} -
-
- )} - - {(icon || category || date) && ( - - - - )} - - - {item.title || item.id} - - - {listingText && ( - 0, - })} - > - {listingText} - - )} - - {topics?.length > 0 && ( -
- {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) => (
-
- -
+ +
    {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} -
+
{ + const intl = useIntl(); + + moment.locale(intl.locale); + + const { + item, + isEditMode, + show_icon = true, + show_section = true, + show_type, + show_description = true, + show_detail_link, + detail_link_label, + hide_dates, + id_lighthouse, + rrule, + index, + } = props; + + const getItemClass = (item) => { + let className = null; + switch (item['@type']) { + case 'News Item': + className = + item.tipologia_notizia + ?.map?.((tipologia) => + tipologia.token.toLowerCase().replace(' ', '_'), + ) + .join(' ') ?? ''; + break; + default: + className = null; + break; + } + return className; + }; + + const icon = show_icon ? getItemIcon(item) : null; + const itemTitle = item.title || item.id; + const date = hide_dates ? null : getCalendarDate(item, rrule.rrulestr); + const eventRecurrenceMore = hide_dates + ? null + : getEventRecurrenceMore(item, isEditMode); + const listingText = show_description ? : null; + const category = getCategory(item, show_type, show_section, props); + const type = item['@type']; + + const BlockExtraTags = getComponentWithFallback({ + name: 'BlockExtraTags', + dependencies: ['SimpleCardDefault', type], + }).component; + + return ( + + + {(icon || category || date) && ( + + {category && ( + + + + )} + + )} + + + {itemTitle} + + + {listingText && ( + + {listingText} + {(type === 'Modulo' || type === 'Documento') && !hide_dates && ( +
+ {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')} +

+ )} +
+ )} + + )} + + {eventRecurrenceMore} + {show_detail_link && ( + + + ); +}; + +SimpleCardDefault.propTypes = { + item: PropTypes.any.isRequired, + isEditMode: PropTypes.bool, +}; + +export default injectLazyLibs(['rrule'])(SimpleCardDefault); diff --git a/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault.jsx index 6ca1ee7d5..fb713a0e6 100644 --- a/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault.jsx +++ b/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault.jsx @@ -1,76 +1,25 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import { defineMessages, useIntl } from 'react-intl'; -import moment from 'moment'; -import { v4 as uuid } from 'uuid'; import cx from 'classnames'; -import { - Card, - CardBody, - CardTitle, - CardText, - CardReadMore, - Button, - Row, - Col, -} from 'design-react-kit'; -import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable'; -import { UniversalLink } from '@plone/volto/components'; - -import { CardCategory } from 'design-comuni-plone-theme/components/ItaliaTheme'; -import { getCategory } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils'; -import { - getItemIcon, - ListingCategory, - ListingText, - ListingLinkMore, -} from 'design-comuni-plone-theme/components/ItaliaTheme'; -import { - getCalendarDate, - getEventRecurrenceMore, - getComponentWithFallback, -} from 'design-comuni-plone-theme/helpers'; - -const messages = defineMessages({ - card_detail_label: { id: 'Card detail label', defaultMessage: 'Vedi' }, - publication_date: { - id: 'publication_date', - defaultMessage: 'Data di pubblicazione', - }, - update_date: { - id: 'update_date', - defaultMessage: 'Data di aggiornamento', - }, -}); +import { Button, Row, Col } from 'design-react-kit'; +import { v4 as uuid } from 'uuid'; +import SimpleCardDefault from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault'; +import { ListingLinkMore } from 'design-comuni-plone-theme/components/ItaliaTheme'; const SimpleCardTemplateDefault = (props) => { - const intl = useIntl(); - - moment.locale(intl.locale); - const { items, - isEditMode, linkTitle, linkHref, linkAlign, titleLine, - show_icon = true, - show_section = true, - show_type, - show_description = true, - show_detail_link, - detail_link_label, title, show_block_bg, - hide_dates, path_filters, show_path_filters, addFilters, additionalFilters = [], - id_lighthouse, linkmore_id_lighthouse, - rrule, } = props; const resultsUID = uuid(); @@ -85,24 +34,6 @@ const SimpleCardTemplateDefault = (props) => { const [pathFilter, setPathFilter] = useState(currentPathFilter?.[0] || null); - const getItemClass = (item) => { - let className = null; - switch (item['@type']) { - case 'News Item': - className = - item.tipologia_notizia - ?.map?.((tipologia) => - tipologia.token.toLowerCase().replace(' ', '_'), - ) - .join(' ') ?? ''; - break; - default: - className = null; - break; - } - return className; - }; - const path_filters_buttons = show_path_filters && path_filters ? Object.keys(path_filters) @@ -185,101 +116,9 @@ const SimpleCardTemplateDefault = (props) => { className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal card-teaser-block-3 mb-3" id={resultsUID + '_results'} > - {items.map((item, index) => { - const icon = show_icon ? getItemIcon(item) : null; - const itemTitle = item.title || item.id; - const date = hide_dates - ? null - : getCalendarDate(item, rrule.rrulestr); - const eventRecurrenceMore = hide_dates - ? null - : getEventRecurrenceMore(item, isEditMode); - const listingText = show_description ? ( - - ) : null; - const category = getCategory(item, show_type, show_section, props); - const type = item['@type']; - - const BlockExtraTags = getComponentWithFallback({ - name: 'BlockExtraTags', - dependencies: ['SimpleCardTemplateDefault', type], - }).component; - - return ( - - - {(icon || category || date) && ( - - {category && ( - - - - )} - - )} - - - {itemTitle} - - - {listingText && ( - - {listingText} - {(type === 'Modulo' || type === 'Documento') && - !hide_dates && ( -
- {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')} -

- )} -
- )} - - )} - - {eventRecurrenceMore} - {show_detail_link && ( - - - ); - })} + {items.map((item, index) => ( + + ))}
{ SimpleCardTemplateDefault.propTypes = { items: PropTypes.arrayOf(PropTypes.any).isRequired, - isEditMode: PropTypes.bool, linkTitle: PropTypes.any, linkHref: PropTypes.any, }; -export default injectLazyLibs(['rrule'])(SimpleCardTemplateDefault); +export default SimpleCardTemplateDefault; diff --git a/src/components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault.jsx new file mode 100644 index 000000000..bcd86ac4e --- /dev/null +++ b/src/components/ItaliaTheme/Blocks/Listing/Slider/SlideItemDefault.jsx @@ -0,0 +1,65 @@ +import React from 'react'; +import { defineMessages } from 'react-intl'; +import { UniversalLink } from '@plone/volto/components'; +import { Container } from 'design-react-kit'; +import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme'; + +const messages = defineMessages({ + openLink: { + id: 'openLink', + defaultMessage: 'Apri il link', + }, +}); +const SlideItemDefault = ({ + item, + index, + image, + show_image_title, + full_width, + intl, + setUserAutoplay, + userAutoplay, + slider, +}) => { + return ( + + {image ? ( +
{image}
+ ) : ( +
+ )} + {show_image_title && ( +
+ + {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 }) => { )}
-
+ {children} -
+
diff --git a/src/components/ItaliaTheme/Blocks/VideoGallery/Edit.jsx b/src/components/ItaliaTheme/Blocks/VideoGallery/Edit.jsx index d9f38912f..ec5b8aebd 100644 --- a/src/components/ItaliaTheme/Blocks/VideoGallery/Edit.jsx +++ b/src/components/ItaliaTheme/Blocks/VideoGallery/Edit.jsx @@ -14,6 +14,7 @@ import { import Sidebar from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/VideoGallery/Sidebar'; import Body from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/VideoGallery/Body'; import EditBlock from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/VideoGallery/Block/EditBlock'; +import { SingleSlideWrapper } from 'design-comuni-plone-theme/components/ItaliaTheme'; const messages = defineMessages({ addItem: { @@ -51,14 +52,14 @@ class Edit extends SubblocksEdit { {this.state.subblocks.map((subblock, subindex) => ( -
+ -
+ ))} {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) => ( -
+ -
+ ))}
diff --git a/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx b/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx index 6fd082386..203850db3 100644 --- a/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx +++ b/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx @@ -36,8 +36,8 @@ const FontAwesomeIcon = (props) => { prefixKey === 'fab' ? 'brands' : prefixKey === 'far' - ? 'regular' - : 'solid', + ? 'regular' + : 'solid', iconName, ]; }; diff --git a/src/components/ItaliaTheme/Slider/ButtonPlayPause.jsx b/src/components/ItaliaTheme/Slider/ButtonPlayPause.jsx new file mode 100644 index 000000000..89aaaba43 --- /dev/null +++ b/src/components/ItaliaTheme/Slider/ButtonPlayPause.jsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { defineMessages, useIntl } from 'react-intl'; +import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme'; +const messages = defineMessages({ + play: { + id: 'Play slider', + defaultMessage: 'Seleziona per riprodurre lo slider', + }, + pause: { + id: 'Pause slider', + defaultMessage: 'Seleziona per mettere in pausa lo slider', + }, +}); +const ButtonPlayPause = ({ onClick, autoplay, showLabel = true, children }) => { + const intl = useIntl(); + + return ( +
+ +
+ ); +}; + +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} /> -
+ ) : null} @@ -219,20 +223,20 @@ const Gallery = ({ )} -
+ {videos.map((item, i) => ( -
+ -
+ ))} -
+ ) : null} diff --git a/src/components/ItaliaTheme/View/Commons/RenderBlocks.jsx b/src/components/ItaliaTheme/View/Commons/RenderBlocks.jsx index 50ef0cbdc..19647d920 100644 --- a/src/components/ItaliaTheme/View/Commons/RenderBlocks.jsx +++ b/src/components/ItaliaTheme/View/Commons/RenderBlocks.jsx @@ -16,6 +16,13 @@ const messages = defineMessages({ defaultMessage: 'Blocco sconosciuto', }, }); +const Wrapper = ({ block, id, children }) => { + return block['@type'] === 'listing' && block.variation === 'slider' ? ( +
{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';