diff --git a/src/shared/components/Modal/index.scss b/src/shared/components/Modal/index.scss index c2f1b9c3f..81538076b 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/ImageGallery.tsx b/src/shared/ui-kit/ImageGallery/ImageGallery.tsx index 703bbfe8a..186306aa2 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 9bfb767e1..32ebba980 100644 --- a/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss +++ b/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.scss @@ -6,10 +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; @@ -18,6 +21,11 @@ & .swiper-wrapper { max-height: 35rem; + height: 90%; + } + + & .swiper-pagination-bullet { + background-color: var(--primary-text); } & .swiper-pagination-bullet-active { @@ -108,3 +116,16 @@ height: 100%; width: 100%; } + +.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; + } + } + } +} diff --git a/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.tsx b/src/shared/ui-kit/ImageGallery/components/ImageGalleryModal/ImageGalleryModal.tsx index a74021394..ae79bd260 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,19 @@ const ImageGalleryModal: FC = (props) => { }, [swiperRef]); return ( - +
{videoSrc && ( @@ -68,15 +75,16 @@ const ImageGalleryModal: FC = (props) => { } > {`Common ))} - {images.length > 1 && ( + {!isTabletView && images.length > 1 && ( <>