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

fix: pin header capsules and simplify home center capsule scroll

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-03-12 16:50:08 +07:00
parent fcc22b4051
commit 1a6287d13e
2 changed files with 7 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/components/navigation/MainNavigation.vue
View File

@@ -531,9 +531,8 @@ const getTokenIcon = (type: string) => {
const isHeroLayout = computed(() => props.isHomePage && !props.isClientArea) const isHeroLayout = computed(() => props.isHomePage && !props.isClientArea)
const topRowHeight = 100 const topRowHeight = 100
const LANDING_CAPSULE_TOP_START = 500
const LANDING_CAPSULE_TOP_STOP = 2 const LANDING_CAPSULE_TOP_STOP = 2
const HERO_TITLE_HEIGHT_ESTIMATE = 72
const HERO_CAPSULE_GAP = 20
const rowStyle = computed(() => { const rowStyle = computed(() => {
if (isHeroLayout.value) { if (isHeroLayout.value) {
@@ -544,7 +543,7 @@ const rowStyle = computed(() => {
const heroTitleTop = computed(() => { const heroTitleTop = computed(() => {
if (!isHeroLayout.value) return 0 if (!isHeroLayout.value) return 0
const heroHeight = props.height || topRowHeight const heroHeight = props.heroBaseHeight || props.height || topRowHeight
const minTop = 0 const minTop = 0
const maxTop = Math.max(120, Math.round(heroHeight * 0.42)) const maxTop = Math.max(120, Math.round(heroHeight * 0.42))
const progress = Math.min(1, Math.max(0, props.collapseProgress || 0)) const progress = Math.min(1, Math.max(0, props.collapseProgress || 0))
@@ -560,12 +559,9 @@ const isFloatingHomeCapsule = computed(() => isHeroLayout.value)
const landingCapsuleTopStart = computed(() => { const landingCapsuleTopStart = computed(() => {
if (!isFloatingHomeCapsule.value) return LANDING_CAPSULE_TOP_STOP if (!isFloatingHomeCapsule.value) return LANDING_CAPSULE_TOP_STOP
const naturalTop = heroTitleTop.value + HERO_TITLE_HEIGHT_ESTIMATE + HERO_CAPSULE_GAP const base = props.heroBaseHeight || 0
const minTop = 180 if (!base) return LANDING_CAPSULE_TOP_START
const base = props.heroBaseHeight || props.height || 0 return Math.max(280, Math.min(LANDING_CAPSULE_TOP_START, base - 180))
if (!base) return Math.max(minTop, naturalTop)
const maxTop = Math.max(260, base - 140)
return Math.max(minTop, Math.min(maxTop, naturalTop))
}) })
const landingCapsuleTop = computed(() => { const landingCapsuleTop = computed(() => {

4
app/layouts/topnav.vue
View File

@@ -9,14 +9,14 @@
<div class="flex-1 flex flex-col" :style="contentStyle"> <div class="flex-1 flex flex-col" :style="contentStyle">
<!-- Fixed Header Container --> <!-- Fixed Header Container -->
<div class="header-glass fixed inset-x-0 top-0 z-50 border-0" :style="headerContainerStyle"> <div class="header-glass fixed inset-x-0 top-0 z-50 border-0" :style="headerContainerStyle">
<div class="header-glass-backdrop" aria-hidden="true" />
<!-- Static hero background for home page --> <!-- Static hero background for home page -->
<HeroBackground v-if="isHomePage" /> <HeroBackground v-if="isHomePage" />
<div class="header-glass-backdrop" aria-hidden="true" />
<!-- MainNavigation --> <!-- MainNavigation -->
<MainNavigation <MainNavigation
class="relative z-10" class="relative z-10"
:height="isHomePage ? heroBaseHeight : 100" :height="100"
:collapse-progress="isHomePage ? 0 : 1" :collapse-progress="isHomePage ? 0 : 1"
:hero-scroll-y="isHomePage ? heroScrollY : 0" :hero-scroll-y="isHomePage ? heroScrollY : 0"
:hero-base-height="isHomePage ? heroBaseHeight : 0" :hero-base-height="isHomePage ? heroBaseHeight : 0"