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

Fix map layout: use sticky instead of fixed, add rounded corners and shadow
All checks were successful
Build Docker Image / build (push) Successful in 4m20s
Details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-01-16 16:27:39 +07:00
parent 62dea50abb
commit 7968a32fd4
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -63,9 +63,9 @@
</Stack>
</div>
<!-- Right: Map (fixed position) -->
<div class="w-3/5 relative">
<div class="fixed right-0 w-3/5 overflow-hidden" :style="mapStyle">
<!-- Right: Map (sticky, inside content container) -->
<div class="w-3/5">
<div class="sticky rounded-xl overflow-hidden shadow-lg" :style="mapStyle">
<!-- Search with map checkbox -->
<label class="absolute top-4 left-4 z-10 bg-white/90 backdrop-blur px-3 py-2 rounded-lg shadow flex items-center gap-2 cursor-pointer">
<input type="checkbox" v-model="searchWithMap" class="checkbox checkbox-sm" />
@@ -238,10 +238,10 @@ const searchBarStyle = computed(() => ({
top: `${searchBarTop.value}px`
}))
// Map style - smooth pixel positioning
// Map style - smooth pixel positioning with bottom padding
const mapStyle = computed(() => ({
top: hasSearchBar.value ? `${mapTop.value}px` : `${searchBarTop.value}px`,
height: `calc(100vh - ${hasSearchBar.value ? mapTop.value : searchBarTop.value}px)`
height: `calc(100vh - ${hasSearchBar.value ? mapTop.value : searchBarTop.value}px - 16px)`
}))
const emit = defineEmits<{