SSH-3160: Update carousel controls placement (#1438)

* fix(shh-3160): fix carousel controls placement * fix(shh-3160): fix carousel controls placement * fix(shs-3160): fixes in carousel js logic * fix(shh-3160): fix carousel controls placement in traditional and colorful * feat(shh-3160): add comment * feat(shh-3160): more aligments fixes * feat(shh-3160): more aligments fixes --------- Co-authored-by: Mari Núñez <[email protected]>
SU-HSDO · Jan 26, 2024 · c5fd97d · c5fd97d
1 parent ea84a59
commit c5fd97d
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 26 deletions.
diff --git a/docroot/themes/humsci/humsci_airy/css/humsci_airy.css b/docroot/themes/humsci/humsci_airy/css/humsci_airy.css
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js b/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js
@@ -2,6 +2,7 @@
 // the Hero Gradient Slider paragraph component slides.
 // and the Spotlight Slider.
 const slides = document.querySelectorAll('.paragraph--type--hs-carousel, .paragraph--type--hs-gradient-hero-slider, .paragraph--type--hs-sptlght-slder');
+// Find slick arrow from hsCarousel.
 const slidesTextboxClasses = '.hb-hero-overlay__text, .hb-gradient-hero__text, .hb-spotlight__text';
 let timeOutFunctionId; // a numeric ID which is used by clearTimeOut to reset the timer
 
@@ -12,8 +13,8 @@ const setMinHeight = (textBox, maxBoxHeight) => textBox.setAttribute('style', `m
 // Set the height of all text boxes within a slider to that
 // of the tallest text box
 const restrictHeight = () => {
-  let boxHeightArray; let
-    maxBoxHeight;
+  let boxHeightArray;
+  let maxBoxHeight;
 
   slides.forEach((slide) => {
     // array must have a default entry of 0 for the banner components
@@ -44,6 +45,12 @@ const restrictHeight = () => {
     // Give all textBoxes the same height
     textBoxes.forEach((textBox) => setMinHeight(textBox, maxBoxHeight));
 
+    // Give sickArrowWrapper a top that changes according to the height when resizing the window.
+    const slickArrowWrapper = slide.querySelector('.slick__arrow');
+    if (slide.classList.contains('paragraph--type--hs-carousel') && slickArrowWrapper) {
+      setMinHeight(slickArrowWrapper, maxBoxHeight);
+    }
+
     // If the textBoxes are spotlight textBoxes, then give them the same height on all screen sizes
     textBoxes.forEach(
       (textBox) => isSpotlightTextBox(textBox) && setMinHeight(textBox, maxBoxHeight),
@@ -56,7 +63,7 @@ const clearTimeoutOnResize = () => {
   // function to reset the height of the text boxes
   window.addEventListener('resize', () => {
     clearTimeout(timeOutFunctionId);
-    timeOutFunctionId = setTimeout(restrictHeight, 250);
+    timeOutFunctionId = setTimeout(restrictHeight, 100);
   });
 };
 

diff --git a/docroot/themes/humsci/humsci_basic/src/scss/components/_pattern.carousel.scss b/docroot/themes/humsci/humsci_basic/src/scss/components/_pattern.carousel.scss
@@ -354,16 +354,6 @@
     .slick-dots {
       @include visually-hidden;
 
-      @include grid-media-min('md') {
-        display: inline-block;
-        clip: inherit;
-        height: auto;
-        width: auto;
-        overflow: visible;
-        list-style-type: none;
-        position: absolute;
-      }
-
       @include hb-themes(('airy', 'colorful')) {
         @include grid-media-min('md') {
           bottom: hb-spacing-width();
@@ -376,6 +366,17 @@
           }
         }
 
+        // slick dots do not display until this breakpoint
+        @media (min-width: 890px) {
+          display: inline-block;
+          clip: inherit;
+          height: auto;
+          width: auto;
+          list-style-type: none;
+          position: absolute;
+          overflow: visible;
+        }
+
         @include grid-media-min('lg') {
           .hb-three-column--two-sidebar & {
             @include visually-hidden;
@@ -394,6 +395,14 @@
         // even though the sidebars do not display until the next breakpoint,
         // the classes exist for styling
         @include grid-media-min('md') {
+          display: inline-block;
+          clip: inherit;
+          height: auto;
+          width: auto;
+          list-style-type: none;
+          position: absolute;
+          overflow: visible;
+
           right: calc(50% + #{hb-calculate-rems(77px)}); // move it past the slick-next arrow
           bottom: hb-calculate-rems(53px);
 
@@ -504,17 +513,55 @@
       }
     }
 
+    // There was some css being added by a js library that was also causing the issue of the arrows position.
+    .slick-list {
+      height: 100% !important;
+    }
+
     &__arrow {
       margin: 0;
       padding: 0;
+      position: absolute;
+      right: 0;
+      bottom: 0%;
       font-size: 0;
 
+      @include hb-colorful {
+        @include grid-media-min('md') {
+          right: 40%;
+        }
+
+        @include grid-media-min('xl') {
+          right: 50%;
+        }
+      }
+
+      @include hb-traditional {
+        @include grid-media-min('md') {
+          right: 46%;
+        }
+
+        // the sidebar(s) appear at this breakpoint
+        @include grid-media-min('lg') {
+          right: 55%;
+        }
+
+        @include grid-media-min('xl') {
+          right: 50%;
+        }
+
+        @include grid-media-min('2xl') {
+          right: 100%;
+        }
+      }
+
+
       .slick-prev,
       .slick-next {
         @include hb-unbuttonize;
         position: absolute;
 
-        @include hb-themes(('airy', 'colorful')) {
+        @include hb-themes(('airy')) {
           bottom: calc(#{hb-spacing-width()} * 2);
 
           .hb-three-column--one-sidebar &,
@@ -534,9 +581,38 @@
           }
         }
 
+        @include hb-colorful {
+          bottom: 6rem;
+
+          .hb-three-column--one-sidebar &,
+          .hb-three-column--two-sidebar & {
+            bottom: hb-calculate-rems(48px);
+          }
+
+          @include grid-media-min('md') {
+            bottom: hb-calculate-rems(47px);
+
+            /* stylelint-disable max-nesting-depth */
+            .hb-three-column--one-sidebar &,
+            .hb-three-column--two-sidebar & {
+              bottom: 0;
+            }
+            /* stylelint-enable max-nesting-depth */
+          }
+        }
+
         @include hb-traditional {
           bottom: hb-calculate-rems(30px);
 
+          @include grid-media-min('md') {
+            margin: hb-calculate-rems(18px) 0;
+            bottom: hb-calculate-rems(54px);
+          }
+
+          @include grid-media-min('xl') {
+            bottom: hb-calculate-rems(78px);
+          }
+
           .hs-full-width & {
             bottom: hb-calculate-rems(60px);
           }
@@ -576,11 +652,10 @@
         }
 
         @include hb-traditional {
-          margin-bottom: hb-calculate-rems(12.5px);
           right: calc(#{hb-calculate-rems(50px)} + #{hb-calculate-rems(40px)}); // move it past the slick-next arrow
 
           @include grid-media-min('md') {
-            right: inherit;
+            right: auto;
             left: calc(53% - #{hb-calculate-rems(85px)}); // move it past the slick-next arrow
           }
 
@@ -597,7 +672,6 @@
 
           @include grid-media-min('xl') {
             left: calc(50% - #{hb-calculate-rems(85px)}); // move it past the slick arrows
-            margin-bottom: hb-calculate-rems(40px);
           }
 
           @include grid-media-min('2xl') {
@@ -626,11 +700,10 @@
         }
 
         @include hb-traditional {
-          margin-bottom: hb-calculate-rems(12.5px);
-          right: hb-calculate-rems(50px);
+          right: hb-calculate-rems(40px);
 
           @include grid-media-min('md') {
-            right: inherit;
+            right: auto;
             left: calc(53% - #{hb-calculate-rems(40px)});
           }
 
@@ -647,7 +720,6 @@
 
           @include grid-media-min('xl') {
             left: calc(50% - #{hb-calculate-rems(40px)}); // move it past the slick arrows
-            margin-bottom: hb-calculate-rems(40px);
           }
 
           @include grid-media-min('2xl') {

diff --git a/docroot/themes/humsci/humsci_colorful/css/humsci_colorful.css b/docroot/themes/humsci/humsci_colorful/css/humsci_colorful.css