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

Fix smooth scroll in CatalogPage - use pixel values from useScrollCollapse
All checks were successful
Build Docker Image / build (push) Successful in 4m3s
Details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-01-15 11:47:56 +07:00
parent 03485b77a5
commit 46b1a17a23
1 changed files with 16 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,7 +13,7 @@
<!-- Content --> <!-- Content -->
<template v-else> <template v-else>
<!-- Search bar slot (sticky third bar - like navigation) --> <!-- Search bar slot (sticky third bar - like navigation) -->
<div v-if="$slots.searchBar" class="sticky z-20 -mx-3 lg:-mx-6 px-3 lg:px-6 pt-4 pb-2 bg-base-100 border-b border-base-300" :class="searchBarTopClass"> <div v-if="$slots.searchBar" class="sticky z-20 -mx-3 lg:-mx-6 px-3 lg:px-6 pt-4 pb-2 bg-base-100 border-b border-base-300" :style="searchBarStyle">
<slot name="searchBar" :displayed-count="displayItems.length" :total-count="totalCount" /> <slot name="searchBar" :displayed-count="displayItems.length" :total-count="totalCount" />
</div> </div>
@@ -52,7 +52,7 @@
<!-- Right: Map (fixed position) --> <!-- Right: Map (fixed position) -->
<div class="w-3/5 relative"> <div class="w-3/5 relative">
<div class="fixed right-6 w-[calc(60%-3rem)] rounded-lg overflow-hidden" :class="[mapTopClass, mapHeightClass]"> <div class="fixed right-6 w-[calc(60%-3rem)] rounded-lg overflow-hidden" :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" />
@@ -213,37 +213,25 @@ const props = withDefaults(defineProps<{
totalCount: 0 totalCount: 0
}) })
// Inject header collapsed state from layout // Smooth scroll collapse - pixel values for smooth animation
const headerCollapsed = inject<Ref<boolean>>('headerCollapsed', ref(false)) // MainNav: 64px, SubNav: 54px, Header total: 118px, SearchBar: 56px
const { searchBarTop, mapTop } = useScrollCollapse(118, 56)
// Map positioning - dynamic based on search bar presence and header collapsed state
// Expanded: MainNav (4rem) + SubNav (3rem) = 7rem, with SearchBar = 10rem
// Collapsed: CollapsedBar (2rem), with SearchBar = 5rem
const slots = useSlots() const slots = useSlots()
const hasSearchBar = computed(() => !!slots.searchBar) const hasSearchBar = computed(() => !!slots.searchBar)
// SearchBar position: below header (sticky) // SearchBar style - smooth pixel positioning
const searchBarTopClass = computed(() => { const searchBarStyle = computed(() => ({
if (headerCollapsed.value) { top: `${searchBarTop.value}px`
return 'top-8' // 2rem collapsed bar }))
}
return 'top-[7rem]' // 4rem MainNav + 3rem SubNav
})
// Map position: below header + searchbar (fixed) // Map style - smooth pixel positioning
const mapTopClass = computed(() => { const mapStyle = computed(() => ({
if (headerCollapsed.value) { top: hasSearchBar.value ? `${mapTop.value}px` : `${searchBarTop.value}px`,
return hasSearchBar.value ? 'top-[5rem]' : 'top-8' // collapsed bar + searchbar height: hasSearchBar.value
} ? `calc(100vh - ${mapTop.value}px - 1rem)`
return hasSearchBar.value ? 'top-[10rem]' : 'top-[7rem]' // full header + searchbar : `calc(100vh - ${searchBarTop.value}px - 1rem)`
}) }))
const mapHeightClass = computed(() => {
if (headerCollapsed.value) {
return hasSearchBar.value ? 'h-[calc(100vh-6rem)]' : 'h-[calc(100vh-3rem)]'
}
return hasSearchBar.value ? 'h-[calc(100vh-11rem)]' : 'h-[calc(100vh-8rem)]'
})
const emit = defineEmits<{ const emit = defineEmits<{
'select': [item: MapItem] 'select': [item: MapItem]