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) --> <!-- Quote mode: Step-based capsule navigation (like logistics) -->
<template v-else-if="isQuoteModeActive"> <template v-else-if="isQuoteModeActive">
<div <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" :class="searchCapsuleClass"
:style="searchCapsuleStyle" :style="searchCapsuleStyle"
> >
<!-- Product segment --> <!-- Product segment -->
<NuxtLink <NuxtLink
:to="localePath('/catalog/product')" :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> <span class="truncate text-base-content">{{ productLabel || $t('catalog.quote.selectProduct') }}</span>
<div class="font-medium truncate text-base-content">{{ productLabel || $t('catalog.quote.selectProduct') }}</div>
</NuxtLink> </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 --> <!-- Hub segment -->
<NuxtLink <NuxtLink
:to="localePath('/catalog/destination')" :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> <span class="truncate text-base-content">{{ hubLabel || $t('catalog.quote.selectHub') }}</span>
<div class="font-medium truncate text-base-content">{{ hubLabel || $t('catalog.quote.selectHub') }}</div>
</NuxtLink> </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 --> <!-- Quantity segment -->
<NuxtLink <NuxtLink
:to="localePath('/catalog/quantity')" :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> <span class="truncate text-base-content">{{ quantityLabel }}</span>
<div class="font-medium truncate text-base-content">{{ quantity || '—' }} {{ quantity ? $t('units.t') : '' }}</div>
</NuxtLink> </NuxtLink>
<!-- Search button --> <!-- Search button -->
<button <button
class="btn btn-primary btn-circle m-1" class="btn btn-primary btn-circle btn-sm m-1"
@click="navigateToSearch" @click="navigateToSearch"
> >
<Icon name="lucide:search" size="18" /> <Icon name="lucide:search" size="18" />
@@ -556,6 +553,11 @@ const searchCapsuleStyle = computed(() => {
return { top: `${landingCapsuleTop.value}px` } 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) // Use white text on dark backgrounds (collapsed or home page with animation)
const useWhiteText = computed(() => props.isCollapsed || props.isHomePage) const useWhiteText = computed(() => props.isCollapsed || props.isHomePage)
</script> </script>