From c5a7b3a5b8856f7682f8412164c143cb13519e92 Mon Sep 17 00:00:00 2001 From: Ferran Buireu Date: Tue, 19 Dec 2023 23:03:43 +0100 Subject: [PATCH] feat: add new chevrons + improved swiper modules --- .../components/molecules/testimonial/testimonial.css | 4 ++-- .../testimonialsSlider/TestimonialsSlider.tsx | 8 ++++---- .../testimonialsNavigation/TestimonialsNavigation.tsx | 10 +++++----- .../testimonialsNavigation/testimonialsNavigation.css | 5 +---- .../organisms/header/utils/toggleMenu/toggleMenu.ts | 4 ++-- src/ui/styles/vendor/swiper.css | 2 +- 6 files changed, 15 insertions(+), 18 deletions(-) diff --git a/src/ui/components/molecules/testimonial/testimonial.css b/src/ui/components/molecules/testimonial/testimonial.css index f3c1f433..2f2c718e 100644 --- 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 index fb23a809..469fc9e8 100644 --- 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/src/ui/components/molecules/testimonialsSlider/components/testimonialsNavigation/TestimonialsNavigation.tsx b/src/ui/components/molecules/testimonialsSlider/components/testimonialsNavigation/TestimonialsNavigation.tsx index fd5affe9..1badcb8f 100644 --- a/src/ui/components/molecules/testimonialsSlider/components/testimonialsNavigation/TestimonialsNavigation.tsx +++ b/src/ui/components/molecules/testimonialsSlider/components/testimonialsNavigation/TestimonialsNavigation.tsx @@ -1,5 +1,5 @@ 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'; @@ -7,13 +7,13 @@ export const TestimonialsNavigation = () => { const swiper = useSwiper(); console.log('swiper', swiper); return ( -
- +
+
); }; diff --git a/src/ui/components/molecules/testimonialsSlider/components/testimonialsNavigation/testimonialsNavigation.css b/src/ui/components/molecules/testimonialsSlider/components/testimonialsNavigation/testimonialsNavigation.css index 90d1568f..c141b396 100644 --- a/src/ui/components/molecules/testimonialsSlider/components/testimonialsNavigation/testimonialsNavigation.css +++ b/src/ui/components/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 index 4543a2ee..042c8bd3 100644 --- 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 index bf8f79b0..4cc54501 100644 --- 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 {