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

fix: pin home capsule flow and switch explore panel to white left dock

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-03-12 15:42:56 +07:00
parent 530c97b912
commit c940369c81
8 changed files with 113 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -102,10 +102,11 @@
:class="[
isHeroLayout ? 'w-full max-w-none justify-start' : 'max-w-2xl justify-center'
]"
:style="centerStyle"
>
<!-- Hero slot for home page title -->
<slot name="hero" />
<div :style="heroTitleStyle">
<slot name="hero" />
</div>
<!-- Client Area tabs -->
<template v-if="isClientArea">
@@ -419,10 +420,13 @@ const props = withDefaults(defineProps<{
collapseProgress?: number
// Home scroll position for floating center capsule
heroScrollY?: number
// Initial hero height for stable landing capsule start position
heroBaseHeight?: number
}>(), {
height: 100,
collapseProgress: 1,
heroScrollY: 0
heroScrollY: 0,
heroBaseHeight: 0
})
defineEmits([
@@ -527,7 +531,6 @@ const getTokenIcon = (type: string) => {
const isHeroLayout = computed(() => props.isHomePage && !props.isClientArea)
const topRowHeight = 100
const LANDING_CAPSULE_TOP_START = 450
const LANDING_CAPSULE_TOP_STOP = 2
const rowStyle = computed(() => {
@@ -537,7 +540,7 @@ const rowStyle = computed(() => {
return { height: `${props.height}px` }
})
const centerStyle = computed(() => {
const heroTitleStyle = computed(() => {
if (!isHeroLayout.value) return {}
const heroHeight = props.height || topRowHeight
const minTop = 0
@@ -549,15 +552,21 @@ const centerStyle = computed(() => {
const isFloatingHomeCapsule = computed(() => isHeroLayout.value)
const landingCapsuleTopStart = computed(() => {
const base = props.heroBaseHeight || props.height || 0
if (!base) return 420
return Math.max(300, Math.min(520, Math.round(base * 0.52)))
})
const landingCapsuleTop = computed(() => {
if (!isFloatingHomeCapsule.value) return LANDING_CAPSULE_TOP_STOP
const y = Math.max(0, props.heroScrollY || 0)
return Math.max(LANDING_CAPSULE_TOP_STOP, LANDING_CAPSULE_TOP_START - y)
return Math.max(LANDING_CAPSULE_TOP_STOP, landingCapsuleTopStart.value - y)
})
const searchCapsuleClass = computed(() => {
if (!isFloatingHomeCapsule.value) return 'w-full'
return 'w-full lg:fixed lg:left-1/2 lg:z-40 lg:w-[min(1120px,calc(100%-1.5rem))] lg:-translate-x-1/2 transition-[top] duration-200 ease-out'
return 'w-full lg:absolute lg:left-1/2 lg:z-20 lg:w-[min(1120px,calc(100%-1.5rem))] lg:-translate-x-1/2 transition-[top] duration-200 ease-out'
})
const searchCapsuleStyle = computed(() => {