Фронт правки
1. Улучшено отображение на iphone и android в PWA
This commit is contained in:
@@ -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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -109,8 +109,6 @@ const handleTouchStart = (e) => {
|
||||
|
||||
longPressTimer = setTimeout(() => {
|
||||
isLongPressing.value = true
|
||||
// Предотвращаем стандартное поведение (выделение текста, контекстное меню)
|
||||
e.preventDefault()
|
||||
// Вибрация если поддерживается
|
||||
if (navigator.vibrate) {
|
||||
navigator.vibrate(30)
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, onUpdated } from 'vue'
|
||||
import { ref, computed, watch, onMounted, onUpdated, onUnmounted } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
@@ -106,6 +106,13 @@ watch(open, (val) => {
|
||||
}
|
||||
})
|
||||
|
||||
// Cleanup при unmount — гарантируем сброс overflow
|
||||
onUnmounted(() => {
|
||||
if (open.value) {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(refreshIcons)
|
||||
onUpdated(refreshIcons)
|
||||
</script>
|
||||
@@ -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 {
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { watch, onMounted, onUpdated } from 'vue'
|
||||
import { watch, onMounted, onUpdated, onUnmounted } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
open: {
|
||||
@@ -99,6 +99,13 @@ watch(() => props.open, (val) => {
|
||||
}
|
||||
})
|
||||
|
||||
// Cleanup при unmount — гарантируем сброс overflow
|
||||
onUnmounted(() => {
|
||||
if (props.open) {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(refreshIcons)
|
||||
onUpdated(refreshIcons)
|
||||
</script>
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user