справлены проблемы с предпросмотром изображений и изменены стили кнопки генерации

This commit is contained in:
kazachilo 2025-03-17 12:45:03 +03:00
parent 7c396eb0bd
commit f38864aea8
3 changed files with 19 additions and 10 deletions

View File

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

View File

@ -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}>
&times;
</button>
<img

View File

@ -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;
}