feat: add new chevrons + improved swiper modules

fbuireu · Dec 19, 2023 · c5a7b3a · c5a7b3a
1 parent 6623543
commit c5a7b3a
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 18 deletions.
diff --git a/src/ui/components/molecules/testimonial/testimonial.css b/src/ui/components/molecules/testimonial/testimonial.css
@@ -7,7 +7,7 @@
     grid:
       'Testimonial-Image Testimonial-Image . . ' 1rem
       'Testimonial-Image Testimonial-Image Testimonial-Quote Testimonial-Quote' min-content
-      'Testimonial-Image Testimonial-Image Testimonial-Quote Testimonial-Quote' min-content
+      'Testimonial-Image Testimonial-Image Testimonial-Quote Testimonial-Quote' calc(100% - 7rem)
       'Testimonial-Image Testimonial-Image Testimonial-Author Testimonial-Author' 1.5rem
       'Testimonial-Image Testimonial-Image Testimonial-Description Testimonial-Description' min-content
       / calc(100% / 4) calc(100% / 4) 1fr 1fr;
@@ -23,7 +23,7 @@
       grid:
         '. . Testimonial-Image Testimonial-Image ' 1rem
         'Testimonial-Quote Testimonial-Quote Testimonial-Image Testimonial-Image' min-content
-        'Testimonial-Quote Testimonial-Quote Testimonial-Image Testimonial-Image' min-content
+        'Testimonial-Quote Testimonial-Quote Testimonial-Image Testimonial-Image' calc(100% - 7rem)
         'Testimonial-Author Testimonial-Author Testimonial-Image Testimonial-Image' 1.5rem
         'Testimonial-Description Testimonial-Description Testimonial-Image Testimonial-Image' min-content
         / 1fr 1fr calc(100% / 4) calc(100% / 4);

diff --git a/src/ui/components/molecules/testimonialsSlider/TestimonialsSlider.tsx b/src/ui/components/molecules/testimonialsSlider/TestimonialsSlider.tsx
@@ -1,19 +1,19 @@
 import React from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { A11y, FreeMode, Keyboard, Navigation, Pagination, Virtual } from 'swiper/modules';
+import { A11y, Keyboard, Navigation, Pagination, Virtual } from 'swiper/modules';
 import { Testimonial } from '@components/molecules/testimonial';
 import { type SwiperOptions } from 'swiper/types';
 import { TestimonialsNavigation } from 'src/ui/components/molecules/testimonialsSlider/components/testimonialsNavigation';
 import './testimonialsSlider.css';
 
 const SLIDER_CONFIG: SwiperOptions = {
-  modules: [Navigation, Pagination, FreeMode, Keyboard, Virtual, A11y],
+  modules: [Navigation, Pagination, Keyboard, Virtual, A11y],
   loop: true,
   centeredSlides: true,
   slidesPerView: 3,
   autoplay: {
-    delay: 4000,
-    disableOnInteraction: true,
+    delay: 3000,
+    pauseOnMouseEnter: true,
   },
   pagination: {
     clickable: true,

diff --git a/...molecules/testimonialsSlider/components/testimonialsNavigation/TestimonialsNavigation.tsx b/...molecules/testimonialsSlider/components/testimonialsNavigation/TestimonialsNavigation.tsx
@@ -1,19 +1,19 @@
 import React from 'react';
-import 'src/ui/components/molecules/testimonialsSlider/components/testimonialsNavigation/testimonialsNavigation.css';
+import './testimonialsNavigation.css';
 import { useSwiper } from 'swiper/react';
 import horizontalArrow from '@assets/images/svg/left-arrow.svg';
 
 export const TestimonialsNavigation = () => {
   const swiper = useSwiper();
   console.log('swiper', swiper);
   return (
-    <div className="testimonials__navigation flex column-nowrap">
-      <button className="testimonials__navigation__button --right clickable" onClick={() => swiper.slideNext()}>
-        <img src={horizontalArrow.src} alt={'Next testimonial'} />
-      </button>
+    <div className="testimonials__navigation flex row-nowrap">
       <button className="testimonials__navigation__button --left clickable" onClick={() => swiper.slidePrev()}>
         <img src={horizontalArrow.src} alt={'Previous testimonial'} />
       </button>
+      <button className="testimonials__navigation__button --right clickable" onClick={() => swiper.slideNext()}>
+        <img src={horizontalArrow.src} alt={'Next testimonial'} />
+      </button>
     </div>
   );
 };
diff --git a/...molecules/testimonialsSlider/components/testimonialsNavigation/testimonialsNavigation.css b/...molecules/testimonialsSlider/components/testimonialsNavigation/testimonialsNavigation.css
@@ -1,5 +1,6 @@
 @layer testimonials.navigation {
   .testimonials__navigation {
+    gap: 0 1rem;
     position: absolute;
     right: 0;
     z-index: 10;
@@ -15,9 +16,5 @@
     &.--right {
       rotate: 180deg;
     }
-
-    &.--left {
-      translate: 0 -1rem;
-    }
   }
 }
diff --git a/src/ui/components/organisms/header/utils/toggleMenu/toggleMenu.ts b/src/ui/components/organisms/header/utils/toggleMenu/toggleMenu.ts
@@ -107,7 +107,7 @@ export function toggleMenu() {
           stagger: { amount: 0.5 },
           duration: 0.75,
         },
-        '-=1'
+        '<'
       )
       .reverse();
     timeline.to(
@@ -117,7 +117,7 @@ export function toggleMenu() {
         ease: POWER3_OUT,
         duration: 0.75,
       },
-      '-=1'
+      '<'
     );
   }
 

diff --git a/src/ui/styles/vendor/swiper.css b/src/ui/styles/vendor/swiper.css
@@ -29,7 +29,7 @@
   .swiper-pagination {
     --swiper-pagination-color: var(--primary-main);
 
-    bottom: 5rem !important;
+    bottom: 5.5rem !important;
   }
 
   .swiper-pagination-bullet {