From aca5eb84fda8b31dd8c95b568132a93d5490dba3 Mon Sep 17 00:00:00 2001 From: Falknat Date: Sat, 17 Jan 2026 09:25:10 +0700 Subject: [PATCH] =?UTF-8?q?=D0=A4=D1=80=D0=BE=D0=BD=D1=82=20=D0=BF=D1=80?= =?UTF-8?q?=D0=B0=D0=B2=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. Улучшено отображение на iphone и android в PWA --- front_vue/src/App.vue | 21 ++++++++++--------- front_vue/src/components/Board.vue | 5 +++-- front_vue/src/components/Card.vue | 2 -- front_vue/src/components/DatePicker.vue | 6 ++++-- front_vue/src/components/ui/MobileSelect.vue | 11 +++++++++- front_vue/src/components/ui/MoveCardPanel.vue | 9 +++++++- front_vue/src/components/ui/SlidePanel.vue | 8 +++---- 7 files changed, 40 insertions(+), 22 deletions(-) diff --git a/front_vue/src/App.vue b/front_vue/src/App.vue index d55727a..e6114ed 100644 --- a/front_vue/src/App.vue +++ b/front_vue/src/App.vue @@ -68,12 +68,15 @@ body { /* Мобильный режим */ body.is-mobile { overflow: hidden; - touch-action: none; + /* Блокируем overscroll (pull-to-refresh), но разрешаем touch внутри приложения */ + overscroll-behavior: none; } body.is-mobile #app { height: 100dvh; overflow: hidden; + /* Убираем градиент на мобильных - сплошной цвет */ + background: var(--bg-body); } /* Safe area для iPhone (notch и home indicator) */ @@ -102,12 +105,11 @@ body.is-mobile .pwa-safe-wrapper { /* transform создаёт containing block - fixed элементы внутри теперь позиционируются относительно wrapper, а не viewport */ transform: translateZ(0); - /* Смещаем градиент вверх чтобы он продолжал ::before без шва */ - background-size: 100vw 100vh; - background-position: 0 calc(-1 * var(--safe-area-top)); + /* Убираем градиент на мобильных - сплошной цвет */ + background: var(--bg-body); } -/* Полоска с градиентом под статус-баром iPhone */ +/* Полоска под статус-баром iPhone */ @supports (padding-top: env(safe-area-inset-top)) { body.is-mobile::before { content: ''; @@ -116,10 +118,8 @@ body.is-mobile .pwa-safe-wrapper { left: 0; right: 0; height: var(--safe-area-top); - /* Тот же градиент что и на странице, но растянутый на весь viewport */ - background: var(--bg-gradient); - background-size: 100vw 100vh; - background-position: top center; + /* Сплошной цвет вместо градиента */ + background: var(--bg-body); z-index: 99999; pointer-events: none; } @@ -129,6 +129,7 @@ body.is-mobile .pwa-safe-wrapper { /* Убрали position: fixed - он конфликтует с pwa-safe-wrapper */ body.panel-open { overflow: hidden !important; - touch-action: none !important; + /* Используем overscroll-behavior вместо touch-action: none для PWA совместимости */ + overscroll-behavior: none !important; } diff --git a/front_vue/src/components/Board.vue b/front_vue/src/components/Board.vue index ad53393..8099f9d 100644 --- a/front_vue/src/components/Board.vue +++ b/front_vue/src/components/Board.vue @@ -410,9 +410,10 @@ defineExpose({ saveTask, deleteTask, archiveTask }) -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; - /* Отключаем вертикальный скролл на уровне этого элемента */ + /* Предотвращаем системные жесты (pull-to-refresh) */ overscroll-behavior: contain; - touch-action: pan-x; + /* Разрешаем и горизонтальный и вертикальный pan - колонки внутри скроллятся вертикально */ + touch-action: pan-x pan-y; } .board.mobile .columns::-webkit-scrollbar { diff --git a/front_vue/src/components/Card.vue b/front_vue/src/components/Card.vue index 34abbe6..2a5ee0b 100644 --- a/front_vue/src/components/Card.vue +++ b/front_vue/src/components/Card.vue @@ -109,8 +109,6 @@ const handleTouchStart = (e) => { longPressTimer = setTimeout(() => { isLongPressing.value = true - // Предотвращаем стандартное поведение (выделение текста, контекстное меню) - e.preventDefault() // Вибрация если поддерживается if (navigator.vibrate) { navigator.vibrate(30) diff --git a/front_vue/src/components/DatePicker.vue b/front_vue/src/components/DatePicker.vue index bb7e533..a960a40 100644 --- a/front_vue/src/components/DatePicker.vue +++ b/front_vue/src/components/DatePicker.vue @@ -524,7 +524,7 @@ watch(isOpen, () => { .mobile-calendar-overlay { position: fixed; inset: 0; - background: #18181b; + background: var(--bg-body); z-index: 2000; display: flex; flex-direction: column; @@ -534,7 +534,7 @@ watch(isOpen, () => { .mobile-calendar-panel { width: 100%; height: 100%; - background: #18181b; + background: var(--bg-body); display: flex; flex-direction: column; overflow: hidden; @@ -543,6 +543,8 @@ watch(isOpen, () => { .mobile-calendar-body { flex: 1; padding: 20px 16px; + /* Safe area для iPhone notch */ + padding-top: calc(20px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; } diff --git a/front_vue/src/components/ui/MobileSelect.vue b/front_vue/src/components/ui/MobileSelect.vue index eb5542e..e9617f6 100644 --- a/front_vue/src/components/ui/MobileSelect.vue +++ b/front_vue/src/components/ui/MobileSelect.vue @@ -39,7 +39,7 @@ @@ -223,6 +230,8 @@ onUpdated(refreshIcons) display: flex; flex-direction: column; overflow: hidden; + /* Safe area для iPhone notch */ + padding-top: env(safe-area-inset-top, 0px); } .panel-header { diff --git a/front_vue/src/components/ui/MoveCardPanel.vue b/front_vue/src/components/ui/MoveCardPanel.vue index c6d2435..e3bc6f8 100644 --- a/front_vue/src/components/ui/MoveCardPanel.vue +++ b/front_vue/src/components/ui/MoveCardPanel.vue @@ -39,7 +39,7 @@ diff --git a/front_vue/src/components/ui/SlidePanel.vue b/front_vue/src/components/ui/SlidePanel.vue index 0f112b1..5e7f9ed 100644 --- a/front_vue/src/components/ui/SlidePanel.vue +++ b/front_vue/src/components/ui/SlidePanel.vue @@ -353,10 +353,8 @@ onUnmounted(() => { border-radius: 0; touch-action: pan-y pinch-zoom; overscroll-behavior: contain; - /* Градиент как на основной странице */ - background: var(--bg-gradient); - background-size: 100vw 100vh; - background-position: 0 calc(-1 * var(--safe-area-top)); + /* Сплошной цвет вместо градиента */ + background: var(--bg-body); } .panel.mobile .resize-handle { @@ -376,6 +374,8 @@ onUnmounted(() => { .panel.mobile .panel-footer { padding: 16px; + /* Safe area для iPhone home indicator */ + padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } .panel.mobile .header-content :deep(h2) {