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

Fix SearchBar height and remove padding gaps
All checks were successful
Build Docker Image / build (push) Successful in 4m24s
Details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-01-15 12:15:48 +07:00
parent ea7c0b460a
commit b9f44ecaf4
1 changed files with 5 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,8 +13,8 @@
<!-- 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" :style="searchBarStyle"> <div v-if="$slots.searchBar" class="sticky z-20 h-16 -mx-3 lg:-mx-6 px-3 lg:px-6 bg-base-100 border-b border-base-300" :style="searchBarStyle">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2 h-full">
<!-- Expand button - appears when header collapsed --> <!-- Expand button - appears when header collapsed -->
<button <button
v-if="isCollapsed" v-if="isCollapsed"
@@ -227,8 +227,8 @@ const props = withDefaults(defineProps<{
}) })
// Smooth scroll collapse - pixel values for smooth animation // Smooth scroll collapse - pixel values for smooth animation
// MainNav: 64px, SubNav: 54px, Header total: 118px, SearchBar: 56px // MainNav: 64px, SubNav: 54px, Header total: 118px, SearchBar: 64px
const { searchBarTop, mapTop, isCollapsed, expand } = useScrollCollapse(118, 56) const { searchBarTop, mapTop, isCollapsed, expand } = useScrollCollapse(118, 64)
const slots = useSlots() const slots = useSlots()
const hasSearchBar = computed(() => !!slots.searchBar) const hasSearchBar = computed(() => !!slots.searchBar)
@@ -241,9 +241,7 @@ const searchBarStyle = computed(() => ({
// Map style - smooth pixel positioning // Map style - smooth pixel positioning
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: hasSearchBar.value height: `calc(100vh - ${hasSearchBar.value ? mapTop.value : searchBarTop.value}px)`
? `calc(100vh - ${mapTop.value}px - 1rem)`
: `calc(100vh - ${searchBarTop.value}px - 1rem)`
})) }))
const emit = defineEmits<{ const emit = defineEmits<{