fix: slider styles + arrows in ct gallery (#764)

Co-authored-by: Piero Nicolli <[email protected]>
RedTurtle · Sep 12, 2024 · c1bbdb9 · c1bbdb9
1 parent 93e4926
commit c1bbdb9
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 31 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -45,15 +45,14 @@
 
 ### Migliorie
 
-- ...
+- Migliorato il layout della galleria immagini nei CT.
 
 ### Novità
 
-- Aggiunto campo per l'inserimento del titolo e della descrizione nel blocco accordion
+- Aggiunto campo per l'inserimento del titolo e della descrizione nel blocco Accordion.
 
 ### Fix
 
-- ...
 - Rimosso il campo "ID lighthouse" dal blocco elenco con variazione Card con Testo Animato perchè entra in contrasto con asseveratore. Pianificato evento per ripristinarlo.
 
 ## Versione 11.22.0 (05/09/2024)

diff --git a/src/components/ItaliaTheme/View/Commons/Gallery.jsx b/src/components/ItaliaTheme/View/Commons/Gallery.jsx
@@ -13,6 +13,7 @@ import {
   SingleSlideWrapper,
   CarouselWrapper,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { useSlider } from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/slider';
 import PropTypes from 'prop-types';
 import { contentFolderHasItems } from 'design-comuni-plone-theme/helpers';
 import { UniversalLink } from '@plone/volto/components';
@@ -50,6 +51,7 @@ const Gallery = ({
   reactSlick,
 }) => {
   const Slider = reactSlick.default;
+  const { SliderNextArrow, SliderPrevArrow } = useSlider();
   const Image = config.getComponent({ name: 'Image' }).component;
   const getSettings = (nItems, slideToScroll) => {
     return {
@@ -58,6 +60,8 @@ const Gallery = ({
       speed: 500,
       slidesToShow: nItems < 3 ? nItems : 3,
       slidesToScroll: slideToScroll ?? 3,
+      nextArrow: <SliderNextArrow intl={intl} />,
+      prevArrow: <SliderPrevArrow intl={intl} />,
       responsive: [
         {
           breakpoint: 1024,
@@ -154,37 +158,40 @@ const Gallery = ({
               <Slider {...getSettings(images.length)}>
                 {images.map((item, i) => (
                   <SingleSlideWrapper key={item['@id']} index={i}>
-                    <figure>
-                      <UniversalLink
-                        item={item}
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          setViewImageIndex(i);
-                        }}
-                        onKeyDown={(e) => {
-                          if (e.keyCode === 13) {
+                    <div className={'slide-wrapper'} role="presentation">
+                      <figure className="img-wrapper">
+                        <UniversalLink
+                          item={item}
+                          onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
                             setViewImageIndex(i);
-                          }
-                        }}
-                        aria-label={`${intl.formatMessage(
-                          messages.viewPreview,
-                        )} ${item.title}`}
-                      >
-                        <Image
-                          item={item}
-                          alt={item.title}
-                          className="img-fluid"
-                          loading="lazy"
-                          sizes={`(max-width:320px) 300px, (max-width:425px) 400px, ${default_width_image}`}
-                        />
-                      </UniversalLink>
-                      <figcaption className="figure-caption mt-2">
-                        {item.title}
-                      </figcaption>
-                    </figure>
+                          }}
+                          onKeyDown={(e) => {
+                            if (e.keyCode === 13) {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              setViewImageIndex(i);
+                            }
+                          }}
+                          aria-label={`${intl.formatMessage(
+                            messages.viewPreview,
+                          )} ${item.title}`}
+                          className="img-wrapper"
+                        >
+                          <Image
+                            item={item}
+                            alt={item.title}
+                            className="img-fluid"
+                            loading="lazy"
+                            sizes={`(max-width:320px) 300px, (max-width:425px) 400px, ${default_width_image}`}
+                          />
+                        </UniversalLink>
+                        <figcaption className="figure-caption mt-2">
+                          {item.title}
+                        </figcaption>
+                      </figure>
+                    </div>
                   </SingleSlideWrapper>
                 ))}
               </Slider>

diff --git a/src/theme/ItaliaTheme/Views/_common.scss b/src/theme/ItaliaTheme/Views/_common.scss
@@ -367,3 +367,30 @@ dl.trasparenza-fields {
   @include rem-size(font-size, 16px);
   @include rem-size(line-height, 24px);
 }
+
+// CT gallery slider
+.it-carousel-wrapper {
+  .slider-container {
+    .slick-list .slick-track {
+      .slick-slide {
+        position: relative;
+        margin: 0 auto;
+
+        a {
+          height: 150px;
+          &.img-wrapper {
+            position: relative;
+            overflow: hidden;
+            width: 100%;
+            margin: 0;
+
+            img {
+              min-height: 150px;
+              object-fit: cover;
+            }
+          }
+        }
+      }
+    }
+  }
+}