From fea2bf63fbce519e063adacb99778d27c65624dc Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Wed, 10 Apr 2024 18:50:14 -0300 Subject: [PATCH 1/6] image gallery improvments --- .../ui-kit/ImageGallery/ImageGallery.tsx | 30 +++++-------------- .../ImageGalleryModal/ImageGalleryModal.scss | 4 +++ .../ImageGalleryModal/ImageGalleryModal.tsx | 12 ++++++-- 3 files changed, 21 insertions(+), 25 deletions(-) diff --git a/src/shared/ui-kit/ImageGallery/ImageGallery.tsx b/src/shared/ui-kit/ImageGallery/ImageGallery.tsx index 703bbfe8aa..186306aa26 100644 --- a/src/shared/ui-kit/ImageGallery/ImageGallery.tsx +++ b/src/shared/ui-kit/ImageGallery/ImageGallery.tsx @@ -3,14 +3,9 @@ import { useMeasure } from "react-use"; import classNames from "classnames"; import { ButtonLink, Image } from "@/shared/components"; import { useModal } from "@/shared/hooks"; -import { useIsTabletView } from "@/shared/hooks/viewport"; import { CommonLink } from "@/shared/models"; import { FilePrefix, ResizeType, getResizedFileUrl } from "@/shared/utils"; -import { - ImageGalleryModal, - ImageGalleryMobileModal, - GalleryMainContent, -} from "./components"; +import { ImageGalleryModal, GalleryMainContent } from "./components"; import styles from "./ImageGallery.module.scss"; interface ImageGalleryProps { @@ -21,7 +16,6 @@ interface ImageGalleryProps { const ImageGallery: FC = (props) => { const { gallery, videoSrc, useResizedFile = true } = props; - const isTabletView = useIsTabletView(); const [videoContainerRef, { width: videoContainerWidth }] = useMeasure(); const { isShowing, onOpen, onClose } = useModal(false); const images = (gallery || []).map(({ value }) => @@ -97,21 +91,13 @@ const ImageGallery: FC = (props) => { See all gallery )} - {isTabletView ? ( - - ) : ( - - )} + + ); }; diff --git a/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss b/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss index 9bfb767e1f..30f3e399cb 100644 --- a/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss +++ b/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss @@ -20,6 +20,10 @@ max-height: 35rem; } + & .swiper-pagination-bullet { + background-color: var(--primary-text); + } + & .swiper-pagination-bullet-active { background-color: $c-neutrals-300; } diff --git a/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.tsx b/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.tsx index a740213945..a7a7693f41 100644 --- a/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.tsx +++ b/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.tsx @@ -2,6 +2,7 @@ import React, { FC, ReactNode, useCallback, useState } from "react"; import { Swiper, SwiperSlide } from "swiper/react"; import SwiperClass from "swiper/types/swiper-class"; import { ButtonIcon, Image, Modal } from "@/shared/components"; +import { useIsTabletView } from "@/shared/hooks/viewport"; import LeftArrowIcon from "@/shared/icons/leftArrow.icon"; import RightArrowIcon from "@/shared/icons/rightArrow.icon"; import { VideoEmbed } from "@/shared/ui-kit/VideoEmbed"; @@ -21,6 +22,7 @@ interface ImageGalleryProps { const ImageGalleryModal: FC = (props) => { const { images, isShowing, onClose, videoSrc, initialSlide = 0 } = props; const [swiperRef, setSwiperRef] = useState(null); + const isTabletView = useIsTabletView(); const handleLeftClick = useCallback(() => { if (swiperRef) { @@ -43,14 +45,18 @@ const ImageGalleryModal: FC = (props) => { }, [swiperRef]); return ( - +
{videoSrc && ( @@ -76,7 +82,7 @@ const ImageGalleryModal: FC = (props) => { ))} - {images.length > 1 && ( + {!isTabletView && images.length > 1 && ( <> Date: Wed, 10 Apr 2024 19:10:00 -0300 Subject: [PATCH 2/6] . --- .../components/ImageGalleryModal/ImageGalleryModal.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss b/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss index 30f3e399cb..8eeec89ad6 100644 --- a/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss +++ b/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss @@ -8,6 +8,10 @@ height: 100%; margin-top: 1.625rem; + @include big-phone { + margin-top: unset; + } + & .swiper-container { padding-bottom: 2rem; max-height: 35rem; From c743052ec812bdaf1acef8bc3798e26edf619820 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Thu, 11 Apr 2024 19:04:23 -0300 Subject: [PATCH 3/6] updates --- src/shared/components/Modal/index.scss | 2 -- .../components/ImageGalleryModal/ImageGalleryModal.tsx | 3 ++- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/shared/components/Modal/index.scss b/src/shared/components/Modal/index.scss index c2f1b9c3ff..81538076b2 100644 --- a/src/shared/components/Modal/index.scss +++ b/src/shared/components/Modal/index.scss @@ -145,7 +145,6 @@ $modal-mobile-padding: 1.5rem; .modal__content { flex: 1; padding: 0 $modal-padding; - overflow-y: auto; @include big-phone { padding-left: $modal-mobile-padding; @@ -190,7 +189,6 @@ $modal-mobile-padding: 1.5rem; height: 100%; margin: unset; border-radius: unset; - overflow-y: scroll; } } .modal--mobile-pop-up { diff --git a/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.tsx b/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.tsx index a7a7693f41..0fdb93be56 100644 --- a/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.tsx +++ b/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.tsx @@ -74,8 +74,9 @@ const ImageGalleryModal: FC = (props) => { } > {`Common From 18dab7d585d050c5dd0f9baa62f1c7136e15802e Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Tue, 16 Apr 2024 15:51:00 -0300 Subject: [PATCH 4/6] remove modal padding in mobile --- .../components/ImageGalleryModal/ImageGalleryModal.scss | 8 ++++++++ .../components/ImageGalleryModal/ImageGalleryModal.tsx | 1 + 2 files changed, 9 insertions(+) diff --git a/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss b/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss index 8eeec89ad6..e5af2e943a 100644 --- a/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss +++ b/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss @@ -116,3 +116,11 @@ height: 100%; width: 100%; } + +.image-gallery-modal { + .modal__content { + padding: 0; + } + .modal__header--default-padding { + } +} diff --git a/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.tsx b/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.tsx index 0fdb93be56..ae79bd2605 100644 --- a/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.tsx +++ b/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.tsx @@ -49,6 +49,7 @@ const ImageGalleryModal: FC = (props) => { isShowing={isShowing} onClose={onClose} mobileFullScreen={isTabletView} + className="image-gallery-modal" >
Date: Tue, 16 Apr 2024 15:52:13 -0300 Subject: [PATCH 5/6] . --- .../components/ImageGalleryModal/ImageGalleryModal.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss b/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss index e5af2e943a..084fc5774d 100644 --- a/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss +++ b/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss @@ -121,6 +121,4 @@ .modal__content { padding: 0; } - .modal__header--default-padding { - } } From e6460eaffa7d62b12556ee2623707df2380f9294 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Tue, 16 Apr 2024 16:16:21 -0300 Subject: [PATCH 6/6] . --- .../ImageGalleryModal/ImageGalleryModal.scss | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss b/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss index 084fc5774d..32ebba9804 100644 --- a/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss +++ b/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss @@ -6,14 +6,13 @@ width: 100%; max-height: 43.125rem; height: 100%; - margin-top: 1.625rem; + margin: auto; @include big-phone { margin-top: unset; } & .swiper-container { - padding-bottom: 2rem; max-height: 35rem; height: 100%; max-width: 48.8125rem; @@ -22,6 +21,7 @@ & .swiper-wrapper { max-height: 35rem; + height: 90%; } & .swiper-pagination-bullet { @@ -120,5 +120,12 @@ .image-gallery-modal { .modal__content { padding: 0; + .modal__header-wrapper { + .modal__header--default-padding { + margin-right: 0.5rem; + margin-top: 0.5rem; + padding-top: 0; + } + } } }