From c8042a865dc1932e67fa71c741be650873ad3662 Mon Sep 17 00:00:00 2001 From: kazachilo Date: Mon, 17 Mar 2025 13:06:16 +0300 Subject: [PATCH] =?UTF-8?q?=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D1=8F=20=D0=B8=D0=BD=D1=82=D0=B5=D1=80=D1=84=D0=B5=D0=B9=D1=81?= =?UTF-8?q?=D0=B0:=201)=20=D0=BF=D1=83=D1=89=D0=B5=D0=BD=20=D0=BA=D1=80?= =?UTF-8?q?=D0=B5=D1=81=D1=82=D0=B8=D0=BA=20=D0=B7=D0=B0=D0=BA=D1=80=D1=8B?= =?UTF-8?q?=D1=82=D0=B8=D1=8F=20=D0=BF=D1=80=D0=B5=D0=B4=D0=BF=D1=80=D0=BE?= =?UTF-8?q?=D1=81=D0=BC=D0=BE=D1=82=D1=80=D0=B0=20=D0=BD=D0=B8=D0=B6=D0=B5?= =?UTF-8?q?=20=D1=85=D0=B5=D0=B4=D0=B5=D1=80=D0=B0=20=D0=BD=D0=B0=20iPhone?= =?UTF-8?q?;=202)=20=D0=B2=D0=B5=D0=BB=D0=B8=D1=87=D0=B5=D0=BD=20=D0=BD?= =?UTF-8?q?=D0=B8=D0=B6=D0=BD=D0=B8=D0=B9=20=D0=BE=D1=82=D1=81=D1=82=D1=83?= =?UTF-8?q?=D0=BF=20=D0=B2=20=D0=B3=D0=B0=D0=BB=D0=B5=D1=80=D0=B5=D0=B5=20?= =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20=D0=BF=D1=80=D0=B5=D0=B4=D0=BE=D1=82=D0=B2?= =?UTF-8?q?=D1=80=D0=B0=D1=89=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=BF=D0=B5=D1=80?= =?UTF-8?q?=D0=B5=D0=BA=D1=80=D1=8B=D1=82=D0=B8=D1=8F=20=D0=B8=D0=B7=D0=BE?= =?UTF-8?q?=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D0=B9=20=D1=84=D1=83?= =?UTF-8?q?=D1=82=D0=B5=D1=80=D0=BE=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/Layout.module.css | 1 + src/components/shared/ImageViewer.module.css | 7 ++++++ src/contexts/ImageViewerContext.tsx | 26 ++++++++++++++++++++ src/screens/Gallery.module.css | 2 +- src/screens/Home.module.css | 2 +- src/screens/StickerPacks.module.css | 8 +++--- 6 files changed, 41 insertions(+), 5 deletions(-) create mode 100644 src/contexts/ImageViewerContext.tsx diff --git a/src/components/layout/Layout.module.css b/src/components/layout/Layout.module.css index ae120e3..113b85f 100644 --- a/src/components/layout/Layout.module.css +++ b/src/components/layout/Layout.module.css @@ -20,6 +20,7 @@ -webkit-overflow-scrolling: touch; /* Улучшаем инерционный скроллинг на iOS */ padding-top: 0px; /* Уменьшаем отступ до 20px */ overscroll-behavior: contain; /* Ограничивает эффект скролла только этим элементом */ + height: calc(100% - 4rem); /* Вычитаем высоту навигации */ } .container { diff --git a/src/components/shared/ImageViewer.module.css b/src/components/shared/ImageViewer.module.css index 1f3af71..02d13ee 100644 --- a/src/components/shared/ImageViewer.module.css +++ b/src/components/shared/ImageViewer.module.css @@ -51,3 +51,10 @@ max-height: 80vh; /* Немного уменьшаем высоту на мобильных */ } } + +/* Медиа-запрос для iOS устройств (iPhone) */ +@supports (-webkit-touch-callout: none) { + .closeButton { + top: calc(var(--safe-area-inset-top) + 60px); /* Учитываем безопасную область сверху и добавляем отступ */ + } +} diff --git a/src/contexts/ImageViewerContext.tsx b/src/contexts/ImageViewerContext.tsx new file mode 100644 index 0000000..14c5d50 --- /dev/null +++ b/src/contexts/ImageViewerContext.tsx @@ -0,0 +1,26 @@ +import React, { createContext, useContext, useState, ReactNode } from 'react'; + +interface ImageViewerContextType { + isImageViewerOpen: boolean; + setImageViewerOpen: (isOpen: boolean) => void; +} + +const ImageViewerContext = createContext(undefined); + +export const ImageViewerProvider: React.FC<{ children: ReactNode }> = ({ children }) => { + const [isImageViewerOpen, setImageViewerOpen] = useState(false); + + return ( + + {children} + + ); +}; + +export const useImageViewer = (): ImageViewerContextType => { + const context = useContext(ImageViewerContext); + if (context === undefined) { + throw new Error('useImageViewer must be used within an ImageViewerProvider'); + } + return context; +}; diff --git a/src/screens/Gallery.module.css b/src/screens/Gallery.module.css index 9c69216..406f9b1 100644 --- a/src/screens/Gallery.module.css +++ b/src/screens/Gallery.module.css @@ -12,7 +12,7 @@ display: flex; flex-direction: column; gap: var(--spacing-large); - padding: calc(3rem + var(--spacing-small)) var(--spacing-medium) var(--spacing-large); + padding: calc(3rem + var(--spacing-small)) var(--spacing-medium) calc(6rem + var(--safe-area-inset-bottom)); width: 100%; box-sizing: border-box; overflow-y: auto; diff --git a/src/screens/Home.module.css b/src/screens/Home.module.css index 1b28e0c..acc1073 100644 --- a/src/screens/Home.module.css +++ b/src/screens/Home.module.css @@ -70,7 +70,7 @@ .generateButtonContainer { position: fixed; - bottom: calc(5rem + var(--safe-area-inset-bottom)); /* Уменьшенный отступ от навигации */ + bottom: calc(4.5rem + var(--safe-area-inset-bottom)); /* Уменьшенный отступ от навигации */ left: var(--spacing-medium); right: var(--spacing-medium); width: auto; diff --git a/src/screens/StickerPacks.module.css b/src/screens/StickerPacks.module.css index eab5c2e..63687aa 100644 --- a/src/screens/StickerPacks.module.css +++ b/src/screens/StickerPacks.module.css @@ -2,9 +2,11 @@ display: flex; flex-direction: column; gap: var(--spacing-large); - padding: calc(3rem + var(--spacing-small)) var(--spacing-medium) var(--spacing-large); + padding: calc(3rem + var(--spacing-small)) var(--spacing-medium) calc(var(--spacing-large) + 80px); width: 100%; box-sizing: border-box; + overflow-y: auto; /* Разрешаем скроллинг */ + height: 100%; /* Устанавливаем высоту */ } .header { @@ -82,14 +84,14 @@ /* Фиксируем кнопку внизу экрана */ position: fixed; - bottom: calc(78px + var(--spacing-large)); /* Увеличенный отступ от навигации */ + bottom: calc(5.5rem + var(--safe-area-inset-bottom)); /* Увеличенный отступ от навигации */ left: var(--spacing-medium); right: var(--spacing-medium); width: auto; /* Вместо width: 100% */ max-width: calc(28rem - 2 * var(--spacing-medium)); /* Соответствует ширине контейнера */ margin: 0 auto; /* Центрирование */ transform: none; /* Убираем transform: translateX(-50%) */ - z-index: 90; + z-index: 100; /* Увеличиваем z-index */ /* Остальные стили */ background-color: var(--color-primary);