fix: fix testimonials dots inconsistency with themes slider

ucsddesignco · Jun 2, 2024 · 07d9c66 · 07d9c66
1 parent ba9bb38
commit 07d9c66
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 9 deletions.
diff --git a/src/app/components/Sticker/Sticker.scss b/src/app/components/Sticker/Sticker.scss
@@ -1,7 +1,7 @@
 .sticker {
   $hide-breakpoint: 800px;
   position: absolute;
-  z-index: 2;
+  z-index: 3;
   scale: 0.65;
   width: fit-content;
   cursor: grab;

diff --git a/src/app/components/Testimonial/Testimonial.scss b/src/app/components/Testimonial/Testimonial.scss
@@ -16,6 +16,7 @@
   );
   $left-hide-slides-gradient: linear-gradient(
     90deg,
+    $primary-white 0%,
     rgba(252, 252, 252, 0) 33%,
     rgba(252, 252, 252, 0) 0%,
     $primary-white 100%
@@ -51,11 +52,16 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: 33%;
-    height: calc(100% - 2 * 1rem);
+    width: 100%;
+    height: 100%;
     background-color: $secondary-yellow;
     z-index: 1;
 
+    @media (min-width: $mobile-breakpoint) {
+      width: 33%;
+      height: calc(100% - 2 * 1rem);
+    }
+
     &.not-center {
       inset: auto;
       left: 1rem;
@@ -90,10 +96,13 @@
     position: relative;
     width: 100%;
     border: 1px solid $outline-gray;
-    padding: 1rem;
     overflow-y: hidden;
     height: 100%;
     overflow-y: hidden;
+    padding: 1rem;
+
+    @media (min-width: $mobile-breakpoint) {
+    }
 
     ul {
       padding-left: 0;
@@ -121,14 +130,20 @@
         }
       }
 
+      &.hide-both {
+        &::before {
+          display: none;
+        }
+      }
+
       &::before {
         content: '';
         display: none;
         width: 100%;
         height: 100%;
         background: $hide-slides-gradient;
         position: absolute;
-        z-index: 3;
+        z-index: 1;
 
         @media (min-width: $mobile-breakpoint) {
           display: block;
@@ -194,7 +209,6 @@
   .dots {
     position: relative;
     display: flex;
-    padding: 10px 0;
     align-items: center;
     justify-content: center;
 

diff --git a/src/app/components/Testimonial/hooks/useHandleSlideSize.tsx b/src/app/components/Testimonial/hooks/useHandleSlideSize.tsx
@@ -35,7 +35,10 @@ export const useHandleSlideSize = ({
       modalButton.style.opacity = '1';
       return;
     }
-    if (
+    if (window.innerWidth < 550) {
+      newPerView = 1;
+      sliderContainer.classList.add('hide-both');
+    } else if (
       (sliderRect.height < 180 && sliderRect.width < 1200) ||
       (sliderRect.width < 650 && sliderRect.width > 550)
     ) {
@@ -46,8 +49,7 @@ export const useHandleSlideSize = ({
     } else if (sliderRect.width < 550) {
       newPerView = 1;
       currentSliderBg.style.width = `calc(${(1 / newPerView) * 100}% - 2rem)`;
-      sliderContainer.classList.add('hide-left');
-      sliderContainer.classList.add('hide-right');
+      sliderContainer.classList.add('hide-both');
     } else if (sliderRect.height < 180 || sliderRect.width < 800) {
       newPerView = 2;
       currentSliderBg.classList.add('not-center');

diff --git a/src/app/pages/Landing/Landing.scss b/src/app/pages/Landing/Landing.scss
@@ -8,6 +8,10 @@
   h1 {
     font-size: clamp(28px, calc(24px + 0.5vw), 44px);
     margin-block-end: calc($p-size * 0.5);
+
+    @media (min-width: 400px) {
+      font-size: clamp(30px, calc(27px + 0.9vw), 44px);
+    }
   }
 
   h3 {