optovia/webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make map fullscreen behind transparent navbar
All checks were successful
Build Docker Image / build (push) Successful in 3m14s
Details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-01-23 12:48:25 +07:00
parent aa5a0a66fa
commit 593aa0df12
2 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/components/page/CatalogPage.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col flex-1 min-h-0 relative">
<div class="fixed inset-0 flex flex-col">
<!-- Loading state -->
<div v-if="loading" class="absolute inset-0 z-50 flex items-center justify-center bg-base-100/80">
<Card padding="lg">
@@ -28,8 +28,8 @@
</ClientOnly>
</div>
<!-- View toggle (top RIGHT overlay) - works in both modes -->
<div class="absolute top-4 right-4 z-20 hidden lg:block">
<!-- View toggle (top RIGHT overlay, below header) - works in both modes -->
<div class="absolute top-[116px] right-4 z-20 hidden lg:block">
<div class="flex gap-1 bg-black/30 backdrop-blur-md rounded-lg p-1 border border-white/10">
<button
class="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors"
@@ -64,10 +64,10 @@
</div>
</div>
<!-- Left overlay panel (shown when showPanel is true) -->
<!-- Left overlay panel (shown when showPanel is true, below header) -->
<div
v-if="showPanel"
class="absolute top-4 left-4 bottom-4 z-10 w-96 max-w-[calc(100vw-2rem)] hidden lg:block"
class="absolute top-[116px] left-4 bottom-4 z-10 w-96 max-w-[calc(100vw-2rem)] hidden lg:block"
>
<div class="bg-black/30 backdrop-blur-md rounded-xl shadow-lg border border-white/10 p-4 h-full overflow-y-auto text-white">
<slot name="panel" />

9
app/layouts/topnav.vue
View File

@@ -145,11 +145,14 @@ const headerStyle = computed(() => {
})
// Main content padding-top to compensate for fixed header
// For catalog section: no padding - map extends behind header
// 100px = MainNav with search (input + chips)
// 154px = MainNav + SubNav (orders, seller, settings)
const mainStyle = computed(() => ({
paddingTop: (isHomePage.value || isCatalogSection.value) ? '100px' : '154px'
}))
const mainStyle = computed(() => {
if (isCatalogSection.value) return { paddingTop: '0' }
if (isHomePage.value) return { paddingTop: '100px' }
return { paddingTop: '154px' }
})
// Provide collapsed state to child components (CatalogPage needs it for map positioning)
provide('headerCollapsed', isHeaderCollapsed)