diff --git a/frontend/spa/src/App.vue b/frontend/spa/src/App.vue index 85a67e9..0181442 100644 --- a/frontend/spa/src/App.vue +++ b/frontend/spa/src/App.vue @@ -1,34 +1,31 @@ @@ -72,12 +58,11 @@ import {useRoute, useRouter} from "vue-router"; import {useSettingsStore} from "@/stores/SettingsStore.js"; import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js"; import {useKeyboardStore} from "@/stores/KeyboardStore.js"; -import CartButton from "@/components/CartButton.vue"; import Dock from "@/components/Dock.vue"; import AppDebugMessage from "@/components/AppDebugMessage.vue"; import PrivacyPolicy from "@/components/PrivacyPolicy.vue"; -import {useSwipeBack} from "@/composables/useSwipeBack.js"; import BrowserNotSupported from "@/BrowserNotSupported.vue"; +import {useSwipeBack} from "@/composables/useSwipeBack.js"; const tg = useMiniApp(); const platform = ref(); @@ -93,9 +78,6 @@ const filtersStore = useProductFiltersStore(); const keyboardStore = useKeyboardStore(); const backButton = window.Telegram.WebApp.BackButton; const haptic = window.Telegram.WebApp.HapticFeedback; -const drawerOpen = ref(false); - -// Инициализация жеста Swipe Back (без визуального индикатора) const swiperBack = useSwipeBack(); const routesToHideAppDock = [ @@ -127,10 +109,6 @@ function navigateBack() { router.back(); } -function toggleDrawer() { - drawerOpen.value = !drawerOpen.value; -} - watch( () => route.name, () => { @@ -151,6 +129,16 @@ function handleClickOutside(e) { } } +watch( + () => route.name, + (name) => { + let height = '72px'; // дефолт + if (name === 'product.show') height = '146px'; + document.documentElement.style.setProperty('--dock-height', height); + }, + { immediate: true } +); + onUnmounted(() => { document.removeEventListener('click', handleClickOutside); }); @@ -159,3 +147,19 @@ onMounted(() => { document.addEventListener('click', handleClickOutside); }); + + diff --git a/frontend/spa/src/components/Dock.vue b/frontend/spa/src/components/Dock.vue index 73ac8fa..180bbc3 100644 --- a/frontend/spa/src/components/Dock.vue +++ b/frontend/spa/src/components/Dock.vue @@ -77,3 +77,25 @@ function onDockItemClick() { haptic.selectionChanged(); } + + \ No newline at end of file diff --git a/frontend/spa/src/components/MainPage/Blocks/ProductsCarouselBlock.vue b/frontend/spa/src/components/MainPage/Blocks/ProductsCarouselBlock.vue index e8501e0..b0c36c4 100644 --- a/frontend/spa/src/components/MainPage/Blocks/ProductsCarouselBlock.vue +++ b/frontend/spa/src/components/MainPage/Blocks/ProductsCarouselBlock.vue @@ -17,9 +17,9 @@ -
+
- diff --git a/frontend/spa/src/components/SwipeToBack.vue b/frontend/spa/src/components/SwipeToBack.vue new file mode 100644 index 0000000..7fbe3d9 --- /dev/null +++ b/frontend/spa/src/components/SwipeToBack.vue @@ -0,0 +1,10 @@ + + + + diff --git a/frontend/spa/src/main.js b/frontend/spa/src/main.js index 9e0376d..169ff9f 100644 --- a/frontend/spa/src/main.js +++ b/frontend/spa/src/main.js @@ -1,4 +1,4 @@ -import {createApp} from 'vue'; +import {createApp, ref} from 'vue'; import App from './App.vue'; import './style.css'; import {VueTelegramPlugin} from 'vue-tg'; @@ -118,8 +118,16 @@ settings.load() app.mount('#app'); }) .then(() => window.Telegram.WebApp.ready()) + .then(() => { + const con = console; + window.Telegram.WebApp.onEvent('viewportChanged', (state) => { + + con.log('[Init]: viewportChanged', state.isStateStable, this.viewportHeight); + }); + }) .catch(error => { - const code = error.code ?? error.response._data.code; + console.error(error); + const code = error.code ?? error?.response?._data.code; let ErrorComponent; switch (code) { diff --git a/frontend/spa/src/router.js b/frontend/spa/src/router.js index 0dd1325..552d9cf 100644 --- a/frontend/spa/src/router.js +++ b/frontend/spa/src/router.js @@ -64,3 +64,4 @@ router.beforeEach((to, from, next) => { ym.prevPath = from.path; next(); }); + diff --git a/frontend/spa/src/style.css b/frontend/spa/src/style.css index 28978af..0906489 100644 --- a/frontend/spa/src/style.css +++ b/frontend/spa/src/style.css @@ -1,4 +1,5 @@ @import "tailwindcss"; + @custom-variant dark (&:where(.dark, .dark *)); @plugin "daisyui" { @@ -11,6 +12,7 @@ html, body, #app { overflow-x: hidden; + min-height: 100vh; } :root { @@ -20,24 +22,37 @@ html, body, #app { --swiper-pagination-bottom: 0px; --product_list_title_max_lines: 2; --tc-navbar-min-height: 3rem; -} - -#app { - position: relative; - /*padding-top: var(--tg-content-safe-area-inset-top);*/ - padding-bottom: var(--tg-content-safe-area-inset-bottom); - padding-left: var(--tg-content-safe-area-inset-left); - padding-right: var(--tg-content-safe-area-inset-right); + --dock-height: 72px; } .app-container { - /*padding-top: calc(var(--tg-content-safe-area-inset-top) + var(--tg-safe-area-inset-top));*/ - padding-bottom: calc( - var(--tg-safe-area-inset-bottom, 0px) - + 72px + min-height: 100vh; + display: flex; + flex-direction: column; + + padding-left: calc( + var(--tg-content-safe-area-inset-left, 0px) + + var(--tg-safe-area-inset-left, 0px) + ); + padding-right: calc( + var(--tg-content-safe-area-inset-right, 0px) + + var(--tg-safe-area-inset-right, 0px) + ); +} + +.app-content { + flex: 1 1 auto; + + padding-top: calc( + var(--tg-content-safe-area-inset-top, 0px) + + var(--tg-safe-area-inset-top, 0px) + ); + + padding-bottom: calc( + var(--dock-height) + + var(--tg-content-safe-area-inset-bottom, 0px) + + var(--tg-safe-area-inset-bottom, 0px) ); - padding-left: var(--tg-safe-area-inset-left, 0px); - padding-right: var(--tg-safe-area-inset-right, 0px); } .safe-top { @@ -57,19 +72,17 @@ html, body, #app { color: white; } -.telecart-main-section { - padding-top: calc( - var(--tg-content-safe-area-inset-top, 0rem) - + var(--tg-safe-area-inset-top, 0rem) - /*+ var(--tc-navbar-min-height)*/ - /*+ 1rem*/ - ); -} - html { background-color: var(--color-base-200); } .radius-box { border-radius: var(--radius-xl); -} \ No newline at end of file +} + +.bottom-fix { + bottom: calc( + var(--tg-content-safe-area-inset-bottom, 0px) + + var(--tg-safe-area-inset-bottom, 0px) + ); +} diff --git a/frontend/spa/src/views/Checkout.vue b/frontend/spa/src/views/Checkout.vue index a326f1a..3fa2f90 100644 --- a/frontend/spa/src/views/Checkout.vue +++ b/frontend/spa/src/views/Checkout.vue @@ -30,7 +30,7 @@
+ class="fixed bottom-fix px-4 pb-4 pt-4 bottom-0 left-0 w-full bg-base-200 z-50 flex flex-col justify-between items-center gap-2 border-t-1 border-t-base-300">
{{ checkout.errorMessage }}
diff --git a/frontend/spa/src/views/Product.vue b/frontend/spa/src/views/Product.vue index 3e6aa87..a6dba74 100644 --- a/frontend/spa/src/views/Product.vue +++ b/frontend/spa/src/views/Product.vue @@ -6,12 +6,14 @@
-
- - - - Нет изображений -
+
+ + + + Нет изображений +
@@ -119,8 +121,8 @@
+ class="fixed bottom-fix px-4 pb-4 pt-4 left-0 w-full bg-base-100/95 backdrop-blur-md z-50 flex flex-col gap-3 border-t border-base-300 shadow-lg" + >