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

fix: catalog layout - header height, search width, overflow
All checks were successful
Build Docker Image / build (push) Successful in 4m47s
Details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-01-14 22:36:37 +07:00
parent 6f16c862f4
commit ff2b25d8c7
1 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/layouts/catalog.vue
View File

@@ -3,6 +3,7 @@
<!-- Layer 1+2: MainNavigation + SubNavigation (slides up on scroll) --> <!-- Layer 1+2: MainNavigation + SubNavigation (slides up on scroll) -->
<div <div
class="fixed left-0 right-0 z-50" class="fixed left-0 right-0 z-50"
:class="{ 'overflow-hidden': headerOffset < 0 }"
:style="{ top: `${headerOffset}px` }" :style="{ top: `${headerOffset}px` }"
> >
<MainNavigation <MainNavigation
@@ -39,7 +40,6 @@
<!-- Layer 3: SearchBar (fixed, slides to top:0) - teleport target --> <!-- Layer 3: SearchBar (fixed, slides to top:0) - teleport target -->
<div <div
id="catalog-searchbar"
class="fixed left-0 right-0 z-40 bg-base-100 border-b border-base-300 flex items-center" class="fixed left-0 right-0 z-40 bg-base-100 border-b border-base-300 flex items-center"
:style="{ top: `${searchBarTop}px` }" :style="{ top: `${searchBarTop}px` }"
> >
@@ -50,7 +50,8 @@
> >
<Icon :name="isCollapsed ? 'lucide:chevron-down' : 'lucide:chevron-up'" size="16" /> <Icon :name="isCollapsed ? 'lucide:chevron-down' : 'lucide:chevron-up'" size="16" />
</button> </button>
<!-- SearchBar content teleported here --> <!-- SearchBar content teleported here (flex-1 for full width) -->
<div id="catalog-searchbar" class="flex-1 min-w-0" />
</div> </div>
<!-- Layer 4: Map (fixed, right side, to bottom) - teleport target --> <!-- Layer 4: Map (fixed, right side, to bottom) - teleport target -->
@@ -108,7 +109,10 @@ const route = useRoute()
const localePath = useLocalePath() const localePath = useLocalePath()
const { t } = useI18n() const { t } = useI18n()
// Smooth collapsible header - headerHeight = 112px (64 + 48), searchBarHeight = 48px // Smooth collapsible header
// MainNav: h-16 (64px) + border (1px) = 65px
// SubNav: py-2 (16px) + links (36px) + border (1px) = 53px
// Total header = 65 + 53 = 118px, SearchBar = 48px
const { const {
headerOffset, headerOffset,
searchBarTop, searchBarTop,
@@ -117,7 +121,7 @@ const {
isCollapsed, isCollapsed,
expand, expand,
collapse collapse
} = useScrollCollapse(112, 48) } = useScrollCollapse(118, 48)
// Mobile view toggle // Mobile view toggle
const mobileView = ref<'list' | 'map'>('list') const mobileView = ref<'list' | 'map'>('list')