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

UI: Glass effect everywhere, fix nav height, simplify quote form
All checks were successful
Build Docker Image / build (push) Successful in 3m9s
Details

Browse Source 
- Fixed nav height (h-20), logo and user menu aligned to top
- Quote form: removed colored circles, simple labels, search button inside pill
- Panels closer to nav (top-4 instead of top-20)
- Glass effect on all overlays (bg-base-100/70 backdrop-blur-md)
- Selection panel sticky headers with glass effect
This commit is contained in:
Ruslan Bakiev
2026-01-23 11:36:20 +07:00
parent f31ceacdee
commit 999658aee1
3 changed files with 47 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/catalog/SelectionPanel.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
<!-- Header (sticky at top) --> <!-- Header (sticky at top) -->
<div class="flex items-center justify-between sticky top-0 bg-base-300/95 -mx-4 px-4 py-2 -mt-4 z-10"> <div class="flex items-center justify-between sticky top-0 bg-base-100/80 backdrop-blur-sm -mx-4 px-4 py-2 -mt-4 z-10">
<h3 class="font-semibold text-lg">{{ title }}</h3> <h3 class="font-semibold text-lg">{{ title }}</h3>
<button class="btn btn-ghost btn-sm btn-circle" @click="emit('close')"> <button class="btn btn-ghost btn-sm btn-circle" @click="emit('close')">
<Icon name="lucide:x" size="18" /> <Icon name="lucide:x" size="18" />
@@ -9,7 +9,7 @@
</div> </div>
<!-- Search input (sticky below header) --> <!-- Search input (sticky below header) -->
<div class="sticky top-10 bg-base-300/95 -mx-4 px-4 pb-2 z-10"> <div class="sticky top-10 bg-base-100/80 backdrop-blur-sm -mx-4 px-4 pb-2 z-10">
<input <input
v-model="searchQuery" v-model="searchQuery"
type="text" type="text"

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

@@ -1,16 +1,16 @@
<template> <template>
<header class="bg-base-100 shadow-md"> <header class="h-20 bg-base-100/80 backdrop-blur-md shadow-md">
<!-- Single row: Logo + Search + Icons --> <!-- Single row: Logo + Search + Icons -->
<div class="flex items-start px-4 lg:px-6 py-3 gap-4"> <div class="flex items-stretch h-full px-4 lg:px-6 gap-4">
<!-- Left: Logo --> <!-- Left: Logo (top aligned) -->
<div class="flex items-center flex-shrink-0 py-2.5"> <div class="flex items-start flex-shrink-0 pt-4">
<NuxtLink :to="localePath('/')" class="flex items-center gap-2"> <NuxtLink :to="localePath('/')" class="flex items-center gap-2">
<span class="font-bold text-xl">Optovia</span> <span class="font-bold text-xl">Optovia</span>
</NuxtLink> </NuxtLink>
</div> </div>
<!-- Mode toggle (between Logo and Search) --> <!-- Mode toggle (between Logo and Search, top aligned) -->
<div v-if="showModeToggle" class="flex items-center flex-shrink-0 py-2.5"> <div v-if="showModeToggle" class="flex items-start flex-shrink-0 pt-3.5">
<div class="join"> <div class="join">
<button <button
class="btn btn-sm join-item" class="btn btn-sm join-item"
@@ -29,59 +29,42 @@
</div> </div>
</div> </div>
<!-- Center: Search input (transforms based on mode) --> <!-- Center: Search input (vertically centered) -->
<div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2 min-h-[72px] justify-center"> <div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2 justify-center">
<!-- Quote mode: Segmented input like Airbnb --> <!-- Quote mode: Simple segmented input with search inside -->
<template v-if="catalogMode === 'quote'"> <template v-if="catalogMode === 'quote'">
<div class="flex items-center gap-3 w-full"> <div class="flex items-center w-full rounded-full border border-base-300 bg-base-100 shadow-sm divide-x divide-base-300">
<div class="flex items-center flex-1 rounded-full border border-base-300 bg-base-100 shadow-sm divide-x divide-base-300">
<!-- Product segment --> <!-- Product segment -->
<button <button
class="flex-1 px-4 py-2.5 text-left hover:bg-base-200/50 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="flex items-center gap-1.5 text-xs text-base-content/60"> <div class="text-xs text-base-content/60">{{ $t('catalog.quote.product') }}</div>
<span class="w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0" :style="{ backgroundColor: entityColors.product }"> <div class="font-medium truncate">{{ productLabel || $t('catalog.quote.selectProduct') }}</div>
<Icon name="lucide:shopping-bag" size="10" class="text-white" />
</span>
{{ $t('catalog.quote.product') }}
</div>
<div class="font-medium truncate mt-0.5">{{ productLabel || $t('catalog.quote.selectProduct') }}</div>
</button> </button>
<!-- Hub segment --> <!-- Hub segment -->
<button <button
class="flex-1 px-4 py-2.5 text-left hover:bg-base-200/50 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="flex items-center gap-1.5 text-xs text-base-content/60"> <div class="text-xs text-base-content/60">{{ $t('catalog.quote.hub') }}</div>
<span class="w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0" :style="{ backgroundColor: entityColors.hub }"> <div class="font-medium truncate">{{ hubLabel || $t('catalog.quote.selectHub') }}</div>
<Icon name="lucide:warehouse" size="10" class="text-white" />
</span>
{{ $t('catalog.quote.hub') }}
</div>
<div class="font-medium truncate mt-0.5">{{ hubLabel || $t('catalog.quote.selectHub') }}</div>
</button> </button>
<!-- Quantity segment --> <!-- Quantity segment -->
<button <button
class="flex-1 px-4 py-2.5 text-left hover:bg-base-200/50 rounded-r-full 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="flex items-center gap-1.5 text-xs text-base-content/60"> <div class="text-xs text-base-content/60">{{ $t('catalog.quote.quantity') }}</div>
<span class="w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0 bg-base-content/30"> <div class="font-medium">{{ quantity ? `${quantity} ${$t('units.t')}` : '—' }}</div>
<Icon name="lucide:scale" size="10" class="text-white" />
</span>
{{ $t('catalog.quote.quantity') }}
</div>
<div class="font-medium mt-0.5">{{ quantity ? `${quantity} ${$t('units.t')}` : '—' }}</div>
</button> </button>
</div> <!-- Search button inside -->
<!-- Search button -->
<button <button
class="btn btn-primary btn-circle shadow-lg" class="btn btn-primary btn-circle m-1"
:disabled="!canSearch" :disabled="!canSearch"
@click="$emit('search')" @click="$emit('search')"
> >
<Icon name="lucide:search" size="20" /> <Icon name="lucide:search" size="18" />
</button> </button>
</div> </div>
</template> </template>
@@ -155,8 +138,8 @@
</template> </template>
</div> </div>
<!-- Right: AI + Globe + Team + User --> <!-- Right: AI + Globe + Team + User (top aligned) -->
<div class="flex items-center gap-1 flex-shrink-0 py-2.5"> <div class="flex items-start gap-1 flex-shrink-0 pt-3">
<!-- AI Assistant button --> <!-- AI Assistant button -->
<NuxtLink :to="localePath('/clientarea/ai')" class="btn btn-ghost btn-circle btn-sm"> <NuxtLink :to="localePath('/clientarea/ai')" class="btn btn-ghost btn-circle btn-sm">
<Icon name="lucide:bot" size="18" /> <Icon name="lucide:bot" size="18" />

12
app/components/page/CatalogPage.vue
View File

@@ -29,8 +29,8 @@
</div> </div>
<!-- View toggle (top RIGHT overlay) - works in both modes --> <!-- View toggle (top RIGHT overlay) - works in both modes -->
<div class="absolute top-20 right-4 z-20 hidden lg:block"> <div class="absolute top-4 right-4 z-20 hidden lg:block">
<div class="join bg-base-100/95 backdrop-blur shadow-lg rounded-lg"> <div class="join bg-base-100/70 backdrop-blur-md shadow-lg rounded-lg border border-base-300/50">
<button <button
class="btn btn-sm join-item gap-2" class="btn btn-sm join-item gap-2"
:class="{ 'btn-active': mapViewMode === 'offers' }" :class="{ 'btn-active': mapViewMode === 'offers' }"
@@ -67,9 +67,9 @@
<!-- Left overlay panel (shown when showPanel is true) --> <!-- Left overlay panel (shown when showPanel is true) -->
<div <div
v-if="showPanel" v-if="showPanel"
class="absolute top-20 left-4 bottom-4 z-10 w-96 max-w-[calc(100vw-2rem)] hidden lg:block" class="absolute top-4 left-4 bottom-4 z-10 w-96 max-w-[calc(100vw-2rem)] hidden lg:block"
> >
<div class="bg-base-300/95 backdrop-blur rounded-xl shadow-lg p-4 h-full overflow-y-auto"> <div class="bg-base-100/70 backdrop-blur-md rounded-xl shadow-lg border border-base-300/50 p-4 h-full overflow-y-auto">
<slot name="panel" /> <slot name="panel" />
</div> </div>
</div> </div>
@@ -78,7 +78,7 @@
<div class="lg:hidden absolute bottom-0 left-0 right-0 z-20"> <div class="lg:hidden absolute bottom-0 left-0 right-0 z-20">
<!-- Mobile view toggle --> <!-- Mobile view toggle -->
<div class="flex justify-end px-4 mb-2"> <div class="flex justify-end px-4 mb-2">
<div class="join bg-base-100/95 backdrop-blur shadow-lg rounded-lg"> <div class="join bg-base-100/70 backdrop-blur-md shadow-lg rounded-lg border border-base-300/50">
<button <button
class="btn btn-xs join-item gap-1" class="btn btn-xs join-item gap-1"
:class="{ 'btn-active': mapViewMode === 'offers' }" :class="{ 'btn-active': mapViewMode === 'offers' }"
@@ -112,7 +112,7 @@
<!-- Mobile panel (collapsible) - only when showPanel is true --> <!-- Mobile panel (collapsible) - only when showPanel is true -->
<div <div
v-if="showPanel" v-if="showPanel"
class="bg-base-300/95 backdrop-blur rounded-t-xl shadow-lg transition-all duration-300" class="bg-base-100/70 backdrop-blur-md rounded-t-xl shadow-lg border border-base-300/50 transition-all duration-300"
:class="mobilePanelExpanded ? 'h-[60vh]' : 'h-auto'" :class="mobilePanelExpanded ? 'h-[60vh]' : 'h-auto'"
> >
<!-- Drag handle --> <!-- Drag handle -->