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

Apply dark glass style (bg-black/30) to navbar, left panel, mobile panel
All checks were successful
Build Docker Image / build (push) Successful in 3m13s
Details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-01-23 12:30:28 +07:00
parent 9d46bab93f
commit aa5a0a66fa
2 changed files with 32 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,25 +1,25 @@
<template> <template>
<header class="h-[100px] bg-base-100/70 backdrop-blur-md shadow-md"> <header class="h-[100px] bg-black/30 backdrop-blur-md shadow-lg border-b border-white/10">
<!-- Single row: Logo + Search + Icons --> <!-- Single row: Logo + Search + Icons -->
<div class="flex items-stretch h-full px-4 lg:px-6 gap-4"> <div class="flex items-stretch h-full px-4 lg:px-6 gap-4">
<!-- Left: Logo + Nav links (top aligned) --> <!-- Left: Logo + Nav links (top aligned) -->
<div class="flex items-start gap-6 flex-shrink-0 pt-4"> <div class="flex items-start gap-6 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 text-white">Optovia</span>
</NuxtLink> </NuxtLink>
<!-- Service nav links --> <!-- Service nav links -->
<nav v-if="showModeToggle" class="flex items-center gap-1"> <nav v-if="showModeToggle" class="flex items-center gap-1">
<button <button
class="px-3 py-1 text-sm font-medium rounded-lg transition-colors" class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
:class="catalogMode === 'explore' ? 'bg-primary/10 text-primary' : 'text-base-content/70 hover:text-base-content hover:bg-base-200/50'" :class="catalogMode === 'explore' ? 'bg-white/20 text-white' : 'text-white/70 hover:text-white hover:bg-white/10'"
@click="$emit('set-catalog-mode', 'explore')" @click="$emit('set-catalog-mode', 'explore')"
> >
TradeScanner TradeScanner
</button> </button>
<button <button
class="px-3 py-1 text-sm font-medium rounded-lg transition-colors" class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
:class="catalogMode === 'quote' ? 'bg-primary/10 text-primary' : 'text-base-content/70 hover:text-base-content hover:bg-base-200/50'" :class="catalogMode === 'quote' ? 'bg-white/20 text-white' : 'text-white/70 hover:text-white hover:bg-white/10'"
@click="$emit('set-catalog-mode', 'quote')" @click="$emit('set-catalog-mode', 'quote')"
> >
Search Search
@@ -31,30 +31,30 @@
<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 -->
<template v-if="catalogMode === 'quote'"> <template v-if="catalogMode === 'quote'">
<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 w-full rounded-full border border-white/20 bg-white/10 shadow-sm divide-x divide-white/20">
<!-- Product segment --> <!-- Product segment -->
<button <button
class="flex-1 px-4 py-2 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-white/10 rounded-l-full transition-colors min-w-0"
@click="$emit('edit-token', 'product')" @click="$emit('edit-token', 'product')"
> >
<div class="text-xs text-base-content/60">{{ $t('catalog.quote.product') }}</div> <div class="text-xs text-white/60">{{ $t('catalog.quote.product') }}</div>
<div class="font-medium truncate">{{ productLabel || $t('catalog.quote.selectProduct') }}</div> <div class="font-medium truncate text-white">{{ 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-base-200/50 transition-colors min-w-0" class="flex-1 px-4 py-2 text-left hover:bg-white/10 transition-colors min-w-0"
@click="$emit('edit-token', 'hub')" @click="$emit('edit-token', 'hub')"
> >
<div class="text-xs text-base-content/60">{{ $t('catalog.quote.hub') }}</div> <div class="text-xs text-white/60">{{ $t('catalog.quote.hub') }}</div>
<div class="font-medium truncate">{{ hubLabel || $t('catalog.quote.selectHub') }}</div> <div class="font-medium truncate text-white">{{ 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-base-200/50 transition-colors min-w-0" class="flex-1 px-4 py-2 text-left hover:bg-white/10 transition-colors min-w-0"
@click="$emit('edit-token', 'quantity')" @click="$emit('edit-token', 'quantity')"
> >
<div class="text-xs text-base-content/60">{{ $t('catalog.quote.quantity') }}</div> <div class="text-xs text-white/60">{{ $t('catalog.quote.quantity') }}</div>
<div class="font-medium">{{ quantity ? `${quantity} ${$t('units.t')}` : '—' }}</div> <div class="font-medium text-white">{{ quantity ? `${quantity} ${$t('units.t')}` : '—' }}</div>
</button> </button>
<!-- Search button inside --> <!-- Search button inside -->
<button <button
@@ -71,10 +71,10 @@
<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-base-300 bg-base-100 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text" 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"
@click="focusInput" @click="focusInput"
> >
<Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" /> <Icon name="lucide:search" size="22" class="text-white 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" class="flex-1 min-w-32 bg-transparent outline-none text-lg text-white placeholder:text-white/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="btn btn-xs btn-ghost gap-1.5 pr-3" 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"
@click="$emit('start-select', chip.type)" @click="$emit('start-select', chip.type)"
> >
<span <span
@@ -139,13 +139,13 @@
<!-- Right: AI + Globe + Team + User (top aligned) --> <!-- Right: AI + Globe + Team + User (top aligned) -->
<div class="flex items-start gap-1 flex-shrink-0 pt-3"> <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="w-8 h-8 rounded-full flex items-center justify-center text-white/70 hover:text-white hover:bg-white/10 transition-colors">
<Icon name="lucide:bot" size="18" /> <Icon name="lucide:bot" size="18" />
</NuxtLink> </NuxtLink>
<!-- Globe (language/currency) dropdown --> <!-- Globe (language/currency) dropdown -->
<div class="dropdown dropdown-end"> <div class="dropdown dropdown-end">
<button tabindex="0" class="btn btn-ghost btn-circle btn-sm"> <button tabindex="0" class="w-8 h-8 rounded-full flex items-center justify-center text-white/70 hover:text-white hover:bg-white/10 transition-colors">
<Icon name="lucide:globe" size="18" /> <Icon name="lucide:globe" size="18" />
</button> </button>
<div tabindex="0" class="dropdown-content bg-base-100 rounded-box z-50 w-52 p-4 shadow-lg border border-base-300"> <div tabindex="0" class="dropdown-content bg-base-100 rounded-box z-50 w-52 p-4 shadow-lg border border-base-300">
@@ -175,7 +175,7 @@
<!-- Team dropdown --> <!-- Team dropdown -->
<template v-if="loggedIn && userData?.teams?.length"> <template v-if="loggedIn && userData?.teams?.length">
<div class="dropdown dropdown-end"> <div class="dropdown dropdown-end">
<button tabindex="0" class="btn btn-ghost btn-sm gap-1"> <button tabindex="0" class="flex items-center gap-1 px-2 py-1 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors">
<Icon name="lucide:building-2" size="16" /> <Icon name="lucide:building-2" size="16" />
<span class="hidden lg:inline max-w-24 truncate text-xs"> <span class="hidden lg:inline max-w-24 truncate text-xs">
{{ userData?.activeTeam?.name || $t('common.selectTeam') }} {{ userData?.activeTeam?.name || $t('common.selectTeam') }}
@@ -207,15 +207,13 @@
<template v-if="sessionChecked"> <template v-if="sessionChecked">
<template v-if="loggedIn"> <template v-if="loggedIn">
<div class="dropdown dropdown-end"> <div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-ghost btn-circle btn-sm avatar"> <div tabindex="0" role="button" class="w-8 h-8 rounded-full overflow-hidden ring-2 ring-white/20 hover:ring-white/40 transition-all cursor-pointer">
<div class="w-8 rounded-full"> <div v-if="userAvatarSvg" v-html="userAvatarSvg" class="w-full h-full" />
<div v-if="userAvatarSvg" v-html="userAvatarSvg" class="w-full h-full" /> <div
<div v-else
v-else class="w-full h-full bg-white/20 flex items-center justify-center text-white font-bold text-xs"
class="w-full h-full bg-primary flex items-center justify-center text-primary-content font-bold text-xs" >
> {{ userInitials }}
{{ userInitials }}
</div>
</div> </div>
</div> </div>
<ul <ul
@@ -242,7 +240,7 @@
</div> </div>
</template> </template>
<template v-else> <template v-else>
<button @click="$emit('sign-in')" class="btn btn-primary btn-sm"> <button @click="$emit('sign-in')" class="px-4 py-1.5 rounded-full bg-white/20 text-white text-sm font-medium hover:bg-white/30 transition-colors">
{{ $t('auth.login') }} {{ $t('auth.login') }}
</button> </button>
</template> </template>

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

@@ -69,7 +69,7 @@
v-if="showPanel" v-if="showPanel"
class="absolute top-4 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-100/70 backdrop-blur-md rounded-xl shadow-lg border border-base-300/50 p-4 h-full overflow-y-auto"> <div class="bg-black/30 backdrop-blur-md rounded-xl shadow-lg border border-white/10 p-4 h-full overflow-y-auto text-white">
<slot name="panel" /> <slot name="panel" />
</div> </div>
</div> </div>
@@ -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-100/70 backdrop-blur-md rounded-t-xl shadow-lg border border-base-300/50 transition-all duration-300" class="bg-black/30 backdrop-blur-md rounded-t-xl shadow-lg border border-white/10 transition-all duration-300 text-white"
:class="mobilePanelExpanded ? 'h-[60vh]' : 'h-auto'" :class="mobilePanelExpanded ? 'h-[60vh]' : 'h-auto'"
> >
<!-- Drag handle --> <!-- Drag handle -->
@@ -120,7 +120,7 @@
class="flex justify-center py-2 cursor-pointer" class="flex justify-center py-2 cursor-pointer"
@click="mobilePanelExpanded = !mobilePanelExpanded" @click="mobilePanelExpanded = !mobilePanelExpanded"
> >
<div class="w-10 h-1 bg-base-300 rounded-full" /> <div class="w-10 h-1 bg-white/30 rounded-full" />
</div> </div>
<div class="px-4 pb-4 overflow-y-auto" :class="mobilePanelExpanded ? 'h-[calc(60vh-2rem)]' : 'max-h-48'"> <div class="px-4 pb-4 overflow-y-auto" :class="mobilePanelExpanded ? 'h-[calc(60vh-2rem)]' : 'max-h-48'">