From 081b326e35f76fe7f2cab1131a567a26828df360 Mon Sep 17 00:00:00 2001 From: Artem B Date: Tue, 23 Jun 2026 13:37:10 +0300 Subject: [PATCH 1/4] fix: wrap Swiper in responsive container to improve layout handling for mobile --- .../src/components/image-viewer/component.tsx | 75 ++++++++++--------- .../components/image-viewer/index.module.css | 15 ++-- 2 files changed, 51 insertions(+), 39 deletions(-) diff --git a/packages/gallery/src/components/image-viewer/component.tsx b/packages/gallery/src/components/image-viewer/component.tsx index d684c66dd1..a0a3914217 100644 --- a/packages/gallery/src/components/image-viewer/component.tsx +++ b/packages/gallery/src/components/image-viewer/component.tsx @@ -136,41 +136,48 @@ export const ImageViewer: FC = () => { /> )} - - {images.map((image, index) => { - const meta = imagesMeta[index]; - - const imageWidth = meta?.width || 1; - const imageHeight = meta?.height || 1; - - const imageAspectRatio = imageWidth / imageHeight; - - const slideVisible = index === currentSlideIndex; - - return ( - - {({ isActive }) => ( - - )} - - ); +
+ > + + {images.map((image, index) => { + const meta = imagesMeta[index]; + + const imageWidth = meta?.width || 1; + const imageHeight = meta?.height || 1; + + const imageAspectRatio = imageWidth / imageHeight; + + const slideVisible = index === currentSlideIndex; + + return ( + + {({ isActive }) => ( + + )} + + ); + })} + +
{showControls && (
Date: Tue, 23 Jun 2026 13:56:05 +0300 Subject: [PATCH 2/4] refactor: enhance full-screen image and video rendering, update styles for improved responsiveness --- packages/gallery/src/Component.tsx | 15 ++--- .../src/components/image-viewer/component.tsx | 28 ++++++--- .../components/image-viewer/index.module.css | 60 +++++++++++++++---- .../src/components/image-viewer/single.tsx | 20 +++++-- .../src/components/image-viewer/slide.tsx | 29 +++++++-- .../image-viewer/video/index.module.css | 6 +- packages/gallery/src/index.module.css | 2 + 7 files changed, 124 insertions(+), 36 deletions(-) diff --git a/packages/gallery/src/Component.tsx b/packages/gallery/src/Component.tsx index e17fc77761..c99b65ef7c 100644 --- a/packages/gallery/src/Component.tsx +++ b/packages/gallery/src/Component.tsx @@ -133,14 +133,15 @@ export const Gallery: FC = ({ slideTo(nextIndex); }, [images.length, loop, currentSlideIndex, slideTo]); - const setImageMeta = useCallback( - (meta: ImageMeta, index: number) => { - imagesMeta[index] = meta; + const setImageMeta = useCallback((meta: ImageMeta, index: number) => { + setImagesMeta((prevImagesMeta) => { + const nextImagesMeta = prevImagesMeta.slice(); - setImagesMeta(imagesMeta.slice()); - }, - [imagesMeta], - ); + nextImagesMeta[index] = meta; + + return nextImagesMeta; + }); + }, []); const handleBottomButtonClick = useCallback( (e: MouseEvent) => { diff --git a/packages/gallery/src/components/image-viewer/component.tsx b/packages/gallery/src/components/image-viewer/component.tsx index a0a3914217..f7a5ec54a0 100644 --- a/packages/gallery/src/components/image-viewer/component.tsx +++ b/packages/gallery/src/components/image-viewer/component.tsx @@ -8,7 +8,7 @@ import { ChevronBackHeavyMIcon } from '@alfalab/icons-glyph/ChevronBackHeavyMIco import { ChevronForwardHeavyMIcon } from '@alfalab/icons-glyph/ChevronForwardHeavyMIcon'; import { GalleryContext } from '../../context'; -import { getImageAlt, getImageKey, isVideo, TestIds } from '../../utils'; +import { getImageKey, isVideo, TestIds } from '../../utils'; import { useHandleImageViewer } from './hooks'; import { Slide } from './slide'; @@ -128,18 +128,31 @@ export const ImageViewer: FC = () => {
)} - {fullScreen && !isVideo(currentImage?.src) && ( - {currentImage + {fullScreen && currentImage && !isVideo(currentImage.src) && ( +
+ +
)}
@@ -171,6 +184,7 @@ export const ImageViewer: FC = () => { index={index} imageAspectRatio={imageAspectRatio} slideVisible={slideVisible} + fullScreen={fullScreen && isVideo(image.src)} /> )} diff --git a/packages/gallery/src/components/image-viewer/index.module.css b/packages/gallery/src/components/image-viewer/index.module.css index 98df028593..683022df81 100644 --- a/packages/gallery/src/components/image-viewer/index.module.css +++ b/packages/gallery/src/components/image-viewer/index.module.css @@ -4,6 +4,7 @@ display: flex; flex-grow: 1; justify-content: center; + min-height: 0; background-color: var(--color-static-neutral-0-inverted); /* swiper/swiper.css; */ @@ -73,21 +74,46 @@ display: flex; width: 100%; height: 100%; + min-height: 0; /* 168px - высота хэдера и футера */ max-height: calc(100vh - 168px); + max-height: calc(100dvh - 168px); padding: var(--gap-32) var(--gap-16); box-sizing: border-box; &.mobile { max-height: calc(100vh - 210px); + max-height: calc(100dvh - 210px); } &.mobileVideo { max-height: 100vh; + max-height: 100dvh; } } + .fullScreenFrame { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + max-height: none; + min-height: 0; + padding: var(--gap-0); + box-sizing: border-box; + overflow: hidden; + } + + .hiddenFrame { + flex: 0 0 0; + width: 0; + height: 0; + padding: var(--gap-0); + overflow: hidden; + } + .swiper { width: 100%; height: 100%; @@ -101,18 +127,22 @@ display: flex; width: 100%; height: 100%; + min-height: 0; max-height: calc(100vh - 80px); + max-height: calc(100dvh - 80px); padding: var(--gap-32); box-sizing: border-box; &.mobile { max-height: calc(100vh - 174px); + max-height: calc(100dvh - 174px); padding: 0; } &.mobileVideo { max-height: 100vh; + max-height: 100dvh; } } @@ -136,8 +166,11 @@ } .image { - width: 0; - height: 0; + width: auto; + height: auto; + max-width: 100%; + max-height: 100%; + object-fit: contain; user-select: none; border-radius: var(--border-radius-8); @@ -150,6 +183,9 @@ position: relative; width: auto; height: auto; + max-width: 100%; + max-height: 100%; + object-fit: contain; user-select: none; } @@ -163,6 +199,15 @@ height: auto; } + .fullScreenMedia { + width: 100%; + height: 100%; + max-width: 100%; + max-height: 100%; + object-fit: contain; + border-radius: var(--border-radius-0); + } + .arrow { display: flex; flex-direction: column; @@ -214,14 +259,9 @@ margin-bottom: var(--gap-4); } - .fullScreenImage { - width: 100%; - height: auto; - background-color: var(--color-light-base-bg-primary); - } - .fullScreenVideo { - width: calc(100% - 192px); - max-height: calc(100vh - 82px); + width: 100%; + height: 100%; + max-height: none; } } diff --git a/packages/gallery/src/components/image-viewer/single.tsx b/packages/gallery/src/components/image-viewer/single.tsx index b96f14baa6..5480b6eefd 100644 --- a/packages/gallery/src/components/image-viewer/single.tsx +++ b/packages/gallery/src/components/image-viewer/single.tsx @@ -2,7 +2,7 @@ import React, { type FC, useContext, useRef } from 'react'; import cn from 'classnames'; import { GalleryContext } from '../../context'; -import { getImageAlt, isVideo } from '../../utils'; +import { isVideo } from '../../utils'; import { useHandleImageViewer } from './hooks'; import { Slide } from './slide'; @@ -35,11 +35,19 @@ export const Single: FC = () => { /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
{fullScreen && !isVideo(currentImage?.src) ? ( - {currentImage +
+ +
) : (
= ({ @@ -80,6 +81,7 @@ export const Slide: FC = ({ index, containerHeight, slideVisible, + fullScreen, }) => { const { view } = useContext(GalleryContext); const { handleLoad, handleLoadError } = useHandleImageViewer(); @@ -89,10 +91,27 @@ export const Slide: FC = ({ const verticalImageFit = !small && containerAspectRatio > imageAspectRatio; const horizontalImageFit = !small && containerAspectRatio <= imageAspectRatio; + const handleImageRef = useCallback( + (node: HTMLImageElement | null) => { + if (node?.complete && node.naturalWidth > 0 && !meta) { + handleLoad( + { currentTarget: node } as React.SyntheticEvent, + index, + ); + } + }, + [handleLoad, index, meta], + ); + if (isVideo(image.src)) { return ( - ); } @@ -100,20 +119,20 @@ export const Slide: FC = ({ return ( {getImageAlt(image, handleLoad(event, index)} onError={() => handleLoadError(index)} - style={{ - maxHeight: `${containerHeight}px`, - }} + style={fullScreen ? undefined : { maxHeight: `${containerHeight}px` }} data-test-id={slideVisible ? TestIds.ACTIVE_IMAGE : undefined} /> diff --git a/packages/gallery/src/components/image-viewer/video/index.module.css b/packages/gallery/src/components/image-viewer/video/index.module.css index 52872ab664..768110ab2f 100644 --- a/packages/gallery/src/components/image-viewer/video/index.module.css +++ b/packages/gallery/src/components/image-viewer/video/index.module.css @@ -2,15 +2,19 @@ .videoWrapper { display: flex; + align-items: center; justify-content: center; height: 100%; - width: auto; + width: 100%; + min-width: 0; + min-height: 0; position: relative; } .video { max-width: 100%; max-height: 100%; + object-fit: contain; border-radius: var(--border-radius-24); } diff --git a/packages/gallery/src/index.module.css b/packages/gallery/src/index.module.css index 0678f4fab8..51286b0af6 100644 --- a/packages/gallery/src/index.module.css +++ b/packages/gallery/src/index.module.css @@ -9,6 +9,7 @@ flex-direction: column; justify-content: space-between; height: 100%; + height: 100dvh; width: 100%; background-color: var(--color-static-neutral-0-inverted); padding-top: var(--sat); @@ -23,6 +24,7 @@ flex-grow: 1; width: 100vw; height: 100vh; + height: 100dvh; background: transparent; } From 41fe79b5be90c9ab763632e9a3d02c229e0a7006 Mon Sep 17 00:00:00 2001 From: Artem B Date: Tue, 23 Jun 2026 14:00:36 +0300 Subject: [PATCH 3/4] chore: changeset added --- .changeset/gentle-clocks-rest.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/gentle-clocks-rest.md diff --git a/.changeset/gentle-clocks-rest.md b/.changeset/gentle-clocks-rest.md new file mode 100644 index 0000000000..7e8b68302d --- /dev/null +++ b/.changeset/gentle-clocks-rest.md @@ -0,0 +1,5 @@ +--- +'@alfalab/core-components-gallery': minor +--- + +Исправлены паддинги у swiper. Переработано отображение в full screen режиме From 40ce908f762f84204249bd1baf8742f890f175d0 Mon Sep 17 00:00:00 2001 From: Artem <38911256+temss-front@users.noreply.github.com> Date: Tue, 23 Jun 2026 15:35:48 +0300 Subject: [PATCH 4/4] Update .changeset/gentle-clocks-rest.md Co-authored-by: fulcanellee <45999900+fulcanellee@users.noreply.github.com> --- .changeset/gentle-clocks-rest.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.changeset/gentle-clocks-rest.md b/.changeset/gentle-clocks-rest.md index 7e8b68302d..40e5af702d 100644 --- a/.changeset/gentle-clocks-rest.md +++ b/.changeset/gentle-clocks-rest.md @@ -2,4 +2,5 @@ '@alfalab/core-components-gallery': minor --- -Исправлены паддинги у swiper. Переработано отображение в full screen режиме +- Исправлены паддинги у swiper +- Переработано отображение в full screen режиме