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

fix: normalize quote capsule height and labels

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-03-12 20:46:48 +07:00
parent 8cfe67809c
commit 71d35476c2
1 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -136,39 +136,36 @@
<!-- Quote mode: Step-based capsule navigation (like logistics) -->
<template v-else-if="isQuoteModeActive">
<div
class="flex items-center rounded-full pill-glass overflow-hidden"
class="flex h-12 items-center overflow-hidden rounded-full pill-glass"
:class="searchCapsuleClass"
:style="searchCapsuleStyle"
>
<!-- Product segment -->
<NuxtLink
:to="localePath('/catalog/product')"
class="flex-1 px-4 py-2 text-left hover:bg-white/10 rounded-l-full transition-colors min-w-0"
class="flex h-full min-w-0 flex-1 items-center px-4 text-left text-sm font-medium transition-colors hover:bg-white/10"
>
<span class="text-[10px] font-bold uppercase tracking-wider opacity-60">{{ $t('catalog.filters.product') }}</span>
<div class="font-medium truncate text-base-content">{{ productLabel || $t('catalog.quote.selectProduct') }}</div>
<span class="truncate text-base-content">{{ productLabel || $t('catalog.quote.selectProduct') }}</span>
</NuxtLink>
<div class="w-px h-8 bg-base-300/40 self-center" />
<div class="h-6 w-px self-center bg-base-300/40" />
<!-- Hub segment -->
<NuxtLink
:to="localePath('/catalog/destination')"
class="flex-1 px-4 py-2 text-left hover:bg-white/10 transition-colors min-w-0"
class="flex h-full min-w-0 flex-1 items-center px-4 text-left text-sm font-medium transition-colors hover:bg-white/10"
>
<span class="text-[10px] font-bold uppercase tracking-wider opacity-60">{{ $t('catalog.filters.hub') }}</span>
<div class="font-medium truncate text-base-content">{{ hubLabel || $t('catalog.quote.selectHub') }}</div>
<span class="truncate text-base-content">{{ hubLabel || $t('catalog.quote.selectHub') }}</span>
</NuxtLink>
<div class="w-px h-8 bg-base-300/40 self-center" />
<div class="h-6 w-px self-center bg-base-300/40" />
<!-- Quantity segment -->
<NuxtLink
:to="localePath('/catalog/quantity')"
class="flex-1 px-4 py-2 text-left hover:bg-white/10 transition-colors min-w-0"
class="flex h-full min-w-0 flex-1 items-center px-4 text-left text-sm font-medium transition-colors hover:bg-white/10"
>
<span class="text-[10px] font-bold uppercase tracking-wider opacity-60">{{ $t('catalog.filters.quantity') }}</span>
<div class="font-medium truncate text-base-content">{{ quantity || '—' }} {{ quantity ? $t('units.t') : '' }}</div>
<span class="truncate text-base-content">{{ quantityLabel }}</span>
</NuxtLink>
<!-- Search button -->
<button
class="btn btn-primary btn-circle m-1"
class="btn btn-primary btn-circle btn-sm m-1"
@click="navigateToSearch"
>
<Icon name="lucide:search" size="18" />
@@ -556,6 +553,11 @@ const searchCapsuleStyle = computed(() => {
return { top: `${landingCapsuleTop.value}px` }
})
const quantityLabel = computed(() => {
if (!props.quantity) return t('catalog.quote.enterQty', 'Введите количество')
return `${props.quantity} ${t('units.t')}`
})
// Use white text on dark backgrounds (collapsed or home page with animation)
const useWhiteText = computed(() => props.isCollapsed || props.isHomePage)
</script>