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

Search forms: white glass style (bg-white/80) for contrast
All checks were successful
Build Docker Image / build (push) Successful in 4m26s
Details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-01-24 09:11:00 +07:00
parent 593aa0df12
commit 63d81ab42f
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,32 +29,32 @@
<!-- Center: Search input (vertically centered) --> <!-- Center: Search input (vertically centered) -->
<div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2 justify-center"> <div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2 justify-center">
<!-- Quote mode: Simple segmented input with search inside --> <!-- Quote mode: Simple segmented input with search inside (white glass) -->
<template v-if="catalogMode === 'quote'"> <template v-if="catalogMode === 'quote'">
<div class="flex items-center w-full rounded-full border border-white/20 bg-white/10 shadow-sm divide-x divide-white/20"> <div class="flex items-center w-full rounded-full border border-white/40 bg-white/80 backdrop-blur-md shadow-lg divide-x divide-base-300/30">
<!-- Product segment --> <!-- Product segment -->
<button <button
class="flex-1 px-4 py-2 text-left hover:bg-white/10 rounded-l-full transition-colors min-w-0" class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 rounded-l-full transition-colors min-w-0"
@click="$emit('edit-token', 'product')" @click="$emit('edit-token', 'product')"
> >
<div class="text-xs text-white/60">{{ $t('catalog.quote.product') }}</div> <div class="text-xs text-base-content/60">{{ $t('catalog.quote.product') }}</div>
<div class="font-medium truncate text-white">{{ productLabel || $t('catalog.quote.selectProduct') }}</div> <div class="font-medium truncate text-base-content">{{ productLabel || $t('catalog.quote.selectProduct') }}</div>
</button> </button>
<!-- Hub segment --> <!-- Hub segment -->
<button <button
class="flex-1 px-4 py-2 text-left hover:bg-white/10 transition-colors min-w-0" class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 transition-colors min-w-0"
@click="$emit('edit-token', 'hub')" @click="$emit('edit-token', 'hub')"
> >
<div class="text-xs text-white/60">{{ $t('catalog.quote.hub') }}</div> <div class="text-xs text-base-content/60">{{ $t('catalog.quote.hub') }}</div>
<div class="font-medium truncate text-white">{{ hubLabel || $t('catalog.quote.selectHub') }}</div> <div class="font-medium truncate text-base-content">{{ hubLabel || $t('catalog.quote.selectHub') }}</div>
</button> </button>
<!-- Quantity segment --> <!-- Quantity segment -->
<button <button
class="flex-1 px-4 py-2 text-left hover:bg-white/10 transition-colors min-w-0" class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 transition-colors min-w-0"
@click="$emit('edit-token', 'quantity')" @click="$emit('edit-token', 'quantity')"
> >
<div class="text-xs text-white/60">{{ $t('catalog.quote.quantity') }}</div> <div class="text-xs text-base-content/60">{{ $t('catalog.quote.quantity') }}</div>
<div class="font-medium text-white">{{ quantity ? `${quantity} ${$t('units.t')}` : '—' }}</div> <div class="font-medium text-base-content">{{ quantity ? `${quantity} ${$t('units.t')}` : '—' }}</div>
</button> </button>
<!-- Search button inside --> <!-- Search button inside -->
<button <button
@@ -67,14 +67,14 @@
</div> </div>
</template> </template>
<!-- Explore mode: Regular pill input + chips --> <!-- Explore mode: Regular pill input + chips (white glass) -->
<template v-else> <template v-else>
<!-- Big pill input --> <!-- Big pill input -->
<div <div
class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-white/20 bg-white/10 focus-within:border-white/40 focus-within:ring-2 focus-within:ring-white/20 transition-all cursor-text" class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-white/40 bg-white/80 backdrop-blur-md shadow-lg focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
@click="focusInput" @click="focusInput"
> >
<Icon name="lucide:search" size="22" class="text-white flex-shrink-0" /> <Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
<!-- Tokens + input inline --> <!-- Tokens + input inline -->
<div class="flex items-center gap-2 flex-wrap flex-1 min-w-0"> <div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
@@ -107,7 +107,7 @@
v-model="localSearchQuery" v-model="localSearchQuery"
type="text" type="text"
:placeholder="placeholder" :placeholder="placeholder"
class="flex-1 min-w-32 bg-transparent outline-none text-lg text-white placeholder:text-white/50" class="flex-1 min-w-32 bg-transparent outline-none text-lg text-base-content placeholder:text-base-content/50"
@input="$emit('update:search-query', localSearchQuery)" @input="$emit('update:search-query', localSearchQuery)"
/> />
</div> </div>
@@ -121,7 +121,7 @@
<button <button
v-for="chip in availableChips" v-for="chip in availableChips"
:key="chip.type" :key="chip.type"
class="flex items-center gap-1.5 px-3 py-1 rounded-full text-sm text-white/80 hover:text-white hover:bg-white/10 transition-colors" class="flex items-center gap-1.5 px-3 py-1 rounded-full text-sm bg-white/60 text-base-content/80 hover:bg-white/80 hover:text-base-content transition-colors"
@click="$emit('start-select', chip.type)" @click="$emit('start-select', chip.type)"
> >
<span <span