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

fix: align landing capsule under hero title

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-03-12 15:46:21 +07:00
parent c940369c81
commit 3380e407f3
1 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -532,6 +532,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_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) {
@@ -540,22 +542,30 @@ const rowStyle = computed(() => {
return { height: `${props.height}px` } return { height: `${props.height}px` }
}) })
const heroTitleStyle = computed(() => { const heroTitleTop = computed(() => {
if (!isHeroLayout.value) return {} if (!isHeroLayout.value) return 0
const heroHeight = props.height || topRowHeight const heroHeight = 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))
const top = Math.round(maxTop - (maxTop - minTop) * progress) return Math.round(maxTop - (maxTop - minTop) * progress)
return { marginTop: `${top}px` } })
const heroTitleStyle = computed(() => {
if (!isHeroLayout.value) return {}
return { marginTop: `${heroTitleTop.value}px` }
}) })
const isFloatingHomeCapsule = computed(() => isHeroLayout.value) const isFloatingHomeCapsule = computed(() => isHeroLayout.value)
const landingCapsuleTopStart = computed(() => { const landingCapsuleTopStart = computed(() => {
if (!isFloatingHomeCapsule.value) return LANDING_CAPSULE_TOP_STOP
const naturalTop = heroTitleTop.value + HERO_TITLE_HEIGHT_ESTIMATE + HERO_CAPSULE_GAP
const minTop = 180
const base = props.heroBaseHeight || props.height || 0 const base = props.heroBaseHeight || props.height || 0
if (!base) return 420 if (!base) return Math.max(minTop, naturalTop)
return Math.max(300, Math.min(520, Math.round(base * 0.52))) const maxTop = Math.max(260, base - 140)
return Math.max(minTop, Math.min(maxTop, naturalTop))
}) })
const landingCapsuleTop = computed(() => { const landingCapsuleTop = computed(() => {