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);