справлены проблемы с предпросмотром изображений и изменены стили кнопки генерации
This commit is contained in:
parent
7c396eb0bd
commit
f38864aea8
@ -2,7 +2,7 @@
|
||||
width: 100%;
|
||||
max-width: 28rem;
|
||||
margin: 24px auto;
|
||||
padding: 16px;
|
||||
padding: 12px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, #4CAF50, #45A049);
|
||||
|
||||
@ -17,7 +17,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({ imageUrl, onClose }) => {
|
||||
// Закрытие при клике на фон
|
||||
const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose();
|
||||
handleClose();
|
||||
}
|
||||
};
|
||||
|
||||
@ -46,7 +46,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({ imageUrl, onClose }) => {
|
||||
const isUpSwipe = distance > minSwipeDistance;
|
||||
|
||||
if (isUpSwipe) {
|
||||
onClose();
|
||||
handleClose();
|
||||
} else {
|
||||
// Если свайп не завершен, плавно возвращаем изображение на место
|
||||
setTranslateY(0);
|
||||
@ -57,11 +57,16 @@ const ImageViewer: React.FC<ImageViewerProps> = ({ imageUrl, onClose }) => {
|
||||
setTouchEnd(null);
|
||||
};
|
||||
|
||||
// Функция для закрытия просмотрщика
|
||||
const handleClose = () => {
|
||||
onClose();
|
||||
};
|
||||
|
||||
// Закрытие при нажатии Escape
|
||||
useEffect(() => {
|
||||
const handleEscKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
onClose();
|
||||
handleClose();
|
||||
}
|
||||
};
|
||||
|
||||
@ -86,7 +91,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({ imageUrl, onClose }) => {
|
||||
onTouchEnd={handleTouchEnd}
|
||||
>
|
||||
<div className={styles.content}>
|
||||
<button className={styles.closeButton} onClick={onClose}>
|
||||
<button className={styles.closeButton} onClick={handleClose}>
|
||||
×
|
||||
</button>
|
||||
<img
|
||||
|
||||
@ -65,12 +65,16 @@
|
||||
.content {
|
||||
position: relative;
|
||||
min-height: 100vh; /* Ensure content takes at least the full viewport height */
|
||||
padding-bottom: 4rem; /* Отступ для навигации */
|
||||
padding-bottom: calc(4rem + 80px + var(--safe-area-inset-bottom)); /* Дополнительный отступ для кнопки */
|
||||
}
|
||||
|
||||
.generateButtonContainer {
|
||||
width: 100%;
|
||||
max-width: 28rem;
|
||||
margin: var(--spacing-medium) auto;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
bottom: calc(5rem + var(--safe-area-inset-bottom)); /* Уменьшенный отступ от навигации */
|
||||
left: var(--spacing-medium);
|
||||
right: var(--spacing-medium);
|
||||
width: auto;
|
||||
max-width: calc(28rem - 2 * var(--spacing-medium));
|
||||
margin: 0 auto;
|
||||
z-index: 90;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user