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> </Stack>
</div> </div>
<!-- Right: Map (fixed position) --> <!-- Right: Map (sticky, inside content container) -->
<div class="w-3/5 relative"> <div class="w-3/5">
<div class="fixed right-0 w-3/5 overflow-hidden" :style="mapStyle"> <div class="sticky rounded-xl overflow-hidden shadow-lg" :style="mapStyle">
<!-- Search with map checkbox --> <!-- 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"> <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" /> <input type="checkbox" v-model="searchWithMap" class="checkbox checkbox-sm" />
@@ -238,10 +238,10 @@ const searchBarStyle = computed(() => ({
top: `${searchBarTop.value}px` top: `${searchBarTop.value}px`
})) }))
// Map style - smooth pixel positioning // Map style - smooth pixel positioning with bottom padding
const mapStyle = computed(() => ({ const mapStyle = computed(() => ({
top: hasSearchBar.value ? `${mapTop.value}px` : `${searchBarTop.value}px`, 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<{ const emit = defineEmits<{