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

feat(ui): align web shell and landing with logistics style

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-21 10:26:55 +07:00
parent a74e75049c
commit 670e9b7fd1
5 changed files with 1142 additions and 979 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,17 +35,22 @@
<!-- List button (LEFT, opens panel) - hide when panel is open -->
<button
v-if="!isPanelOpen"
class="absolute top-[116px] left-4 z-20 hidden lg:flex items-center gap-2 map-chip rounded-full px-3 py-1.5 text-base-content text-sm hover:bg-base-200 transition-colors"
class="absolute bottom-4 left-4 top-[108px] z-20 hidden w-14 lg:flex flex-col items-center justify-between rounded-full border border-[#d5c7b0] bg-[#f3eee6] px-2 py-3 text-[#2f2418] shadow-[0_20px_40px_rgba(38,29,18,0.18)] transition-colors hover:bg-[#eee6dc]"
@click="openPanel"
>
<Icon name="lucide:menu" size="16" />
<span>{{ $t('catalog.list') }}</span>
<span class="flex h-10 w-10 items-center justify-center rounded-full bg-white text-[#5f4b33]">
<Icon name="lucide:panel-left-open" size="16" />
</span>
<span class="-rotate-90 whitespace-nowrap text-[11px] font-bold uppercase tracking-[0.14em] text-[#6f6353]">
{{ $t('catalog.list') }}
</span>
<span class="h-10 w-10" aria-hidden="true" />
</button>
<!-- Filter by bounds checkbox (LEFT, next to panel when open) - only in selection mode -->
<label
v-if="selectMode !== null"
class="absolute top-[116px] z-20 hidden lg:flex items-center gap-2 map-chip rounded-full px-3 py-1.5 cursor-pointer text-base-content text-sm hover:bg-base-200 transition-colors"
class="absolute top-[108px] z-20 hidden lg:flex items-center gap-2 rounded-full border border-[#d5c7b0] bg-[#f3eee6] px-3 py-1.5 cursor-pointer text-[#2f2418] text-sm shadow-[0_12px_26px_rgba(38,29,18,0.12)] transition-colors hover:bg-[#eee6dc]"
:style="boundsFilterStyle"
>
<input
@@ -61,11 +66,11 @@
<!-- View toggle (top RIGHT overlay, below header) - hide in info mode or when hideViewToggle -->
<div v-if="!isInfoMode && !hideViewToggle" class="absolute top-[116px] right-4 z-20 hidden lg:flex items-center gap-2">
<!-- View mode toggle -->
<div class="flex gap-1 map-chip rounded-full p-1">
<div class="flex gap-1 rounded-full border border-[#d5c7b0] bg-[#f3eee6] p-1 shadow-[0_12px_26px_rgba(38,29,18,0.12)]">
<button
v-if="showOffersToggle"
class="flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-bold transition-colors"
:class="mapViewMode === 'offers' ? 'bg-base-300 text-base-content' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
:class="mapViewMode === 'offers' ? 'bg-[#2f2416] text-[#fff8ef]' : 'text-[#6b5b48] hover:text-[#2f2418] hover:bg-[#ece3d3]'"
@click="setMapViewMode('offers')"
>
<span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #f97316">
@@ -76,7 +81,7 @@
<button
v-if="showHubsToggle"
class="flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-bold transition-colors"
:class="mapViewMode === 'hubs' ? 'bg-base-300 text-base-content' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
:class="mapViewMode === 'hubs' ? 'bg-[#2f2416] text-[#fff8ef]' : 'text-[#6b5b48] hover:text-[#2f2418] hover:bg-[#ece3d3]'"
@click="setMapViewMode('hubs')"
>
<span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #22c55e">
@@ -87,7 +92,7 @@
<button
v-if="showSuppliersToggle"
class="flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-bold transition-colors"
:class="mapViewMode === 'suppliers' ? 'bg-base-300 text-base-content' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
:class="mapViewMode === 'suppliers' ? 'bg-[#2f2416] text-[#fff8ef]' : 'text-[#6b5b48] hover:text-[#2f2418] hover:bg-[#ece3d3]'"
@click="setMapViewMode('suppliers')"
>
<span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #3b82f6">
@@ -102,10 +107,10 @@
<Transition name="slide-left">
<div
v-if="isPanelOpen"
class="absolute top-[116px] left-0 bottom-0 z-30 max-w-[calc(100vw-1rem)] hidden lg:block"
class="absolute top-[108px] left-4 bottom-4 z-30 max-w-[calc(100vw-1rem)] hidden lg:block"
:class="panelWidth"
>
<div class="bg-base-100 text-base-content border border-base-300 border-l-0 rounded-none rounded-tr-[1.1rem] rounded-bl-[1.1rem] shadow-2xl h-full flex flex-col">
<div class="h-full flex flex-col overflow-hidden rounded-[28px] border-0 bg-[#f3eee6] text-[#2f2418] shadow-[0_28px_70px_rgba(38,29,18,0.18)]">
<slot name="panel" />
</div>
</div>
@@ -117,7 +122,7 @@
<div class="flex justify-between px-4 mb-2">
<!-- List button (mobile) -->
<button
class="flex items-center gap-2 map-chip rounded-full px-3 py-2 text-base-content text-sm font-medium"
class="flex items-center gap-2 rounded-full border border-[#d5c7b0] bg-[#f3eee6] px-3 py-2 text-[#2f2418] text-sm font-medium shadow-[0_10px_24px_rgba(38,29,18,0.12)]"
@click="openPanel"
>
<Icon name="lucide:menu" size="16" />
@@ -125,11 +130,11 @@
</button>
<!-- Mobile view toggle - hide in info mode or when hideViewToggle -->
<div v-if="!isInfoMode && !hideViewToggle" class="flex gap-1 map-chip rounded-full p-1">
<div v-if="!isInfoMode && !hideViewToggle" class="flex gap-1 rounded-full border border-[#d5c7b0] bg-[#f3eee6] p-1 shadow-[0_10px_24px_rgba(38,29,18,0.12)]">
<button
v-if="showOffersToggle"
class="flex items-center justify-center w-8 h-8 rounded-full transition-colors"
:class="mapViewMode === 'offers' ? 'bg-base-300' : 'hover:bg-base-200'"
:class="mapViewMode === 'offers' ? 'bg-[#2f2416]' : 'hover:bg-[#ece3d3]'"
@click="setMapViewMode('offers')"
>
<span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #f97316">
@@ -139,7 +144,7 @@
<button
v-if="showHubsToggle"
class="flex items-center justify-center w-8 h-8 rounded-full transition-colors"
:class="mapViewMode === 'hubs' ? 'bg-base-300' : 'hover:bg-base-200'"
:class="mapViewMode === 'hubs' ? 'bg-[#2f2416]' : 'hover:bg-[#ece3d3]'"
@click="setMapViewMode('hubs')"
>
<span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #22c55e">
@@ -149,7 +154,7 @@
<button
v-if="showSuppliersToggle"
class="flex items-center justify-center w-8 h-8 rounded-full transition-colors"
:class="mapViewMode === 'suppliers' ? 'bg-base-300' : 'hover:bg-base-200'"
:class="mapViewMode === 'suppliers' ? 'bg-[#2f2416]' : 'hover:bg-[#ece3d3]'"
@click="setMapViewMode('suppliers')"
>
<span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #3b82f6">
@@ -163,7 +168,7 @@
<Transition name="slide-up">
<div
v-if="isPanelOpen"
class="bg-base-100 text-base-content rounded-t-3xl border-t border-base-300 shadow-[0_-8px_40px_rgba(0,0,0,0.12)] transition-all duration-300 h-[60vh]"
class="rounded-t-3xl border-t border-[#d5c7b0] bg-[#f3eee6] text-[#2f2418] shadow-[0_-8px_40px_rgba(0,0,0,0.12)] transition-all duration-300 h-[60vh]"
>
<!-- Drag handle / close -->
<div