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

fix: pin home capsule flow and switch explore panel to white left dock

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-03-12 15:42:56 +07:00
parent 530c97b912
commit c940369c81
8 changed files with 113 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/pages/clientarea/addresses/index.vue
View File

@@ -15,7 +15,7 @@
>
<template #panel>
<!-- Panel header -->
<div class="p-4 border-b border-white/10 flex-shrink-0">
<div class="p-4 border-b border-base-300 flex-shrink-0">
<div class="flex items-center justify-between mb-3">
<span class="font-semibold">{{ t('cabinetNav.addresses') }}</span>
</div>
@@ -26,14 +26,14 @@
v-model="searchQuery"
type="text"
:placeholder="t('common.search')"
class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/50"
class="input input-sm w-full bg-base-200 border-base-300 text-base-content placeholder:text-base-content/50"
/>
<Icon name="lucide:search" size="16" class="absolute right-3 top-1/2 -translate-y-1/2 text-white/50" />
<Icon name="lucide:search" size="16" class="absolute right-3 top-1/2 -translate-y-1/2 text-base-content/50" />
</div>
<!-- Add button -->
<NuxtLink :to="localePath('/clientarea/addresses/new')">
<button class="btn btn-sm w-full bg-white/10 border-white/20 text-white hover:bg-white/20">
<button class="btn btn-sm w-full bg-base-200 border-base-300 text-base-content hover:bg-base-200">
<Icon name="lucide:plus" size="14" class="mr-1" />
{{ t('profileAddresses.actions.add') }}
</button>
@@ -46,7 +46,7 @@
<div
v-for="item in displayItems"
:key="item.uuid"
class="bg-white/10 rounded-lg p-3 hover:bg-white/20 transition-colors cursor-pointer"
class="bg-base-200 rounded-lg p-3 hover:bg-base-200 transition-colors cursor-pointer"
:class="{ 'ring-2 ring-emerald-500': selectedAddressId === item.uuid }"
@click="selectedAddressId = item.uuid"
@mouseenter="hoveredAddressId = item.uuid"
@@ -56,7 +56,7 @@
<span class="text-xl">{{ isoToEmoji(item.countryCode) }}</span>
<div class="flex-1 min-w-0">
<div class="font-semibold text-sm truncate">{{ item.name }}</div>
<div class="text-xs text-white/60 line-clamp-2">{{ item.address }}</div>
<div class="text-xs text-base-content/60 line-clamp-2">{{ item.address }}</div>
</div>
</div>
</div>
@@ -65,9 +65,9 @@
<div class="text-center py-8">
<div class="text-3xl mb-2">📍</div>
<div class="font-semibold text-sm mb-1">{{ t('profileAddresses.empty.title') }}</div>
<div class="text-xs text-white/60 mb-3">{{ t('profileAddresses.empty.description') }}</div>
<div class="text-xs text-base-content/60 mb-3">{{ t('profileAddresses.empty.description') }}</div>
<NuxtLink :to="localePath('/clientarea/addresses/new')">
<button class="btn btn-sm bg-white/10 border-white/20 text-white hover:bg-white/20">
<button class="btn btn-sm bg-base-200 border-base-300 text-base-content hover:bg-base-200">
<Icon name="lucide:plus" size="14" class="mr-1" />
{{ t('profileAddresses.empty.cta') }}
</button>
@@ -77,8 +77,8 @@
</div>
<!-- Footer -->
<div class="p-3 border-t border-white/10 flex-shrink-0">
<span class="text-xs text-white/50">{{ displayItems.length }} {{ t('catalog.of') }} {{ items.length }}</span>
<div class="p-3 border-t border-base-300 flex-shrink-0">
<span class="text-xs text-base-content/50">{{ displayItems.length }} {{ t('catalog.of') }} {{ items.length }}</span>
</div>
</template>
</CatalogPage>

26
app/pages/clientarea/orders/index.vue
View File

@@ -15,7 +15,7 @@
>
<template #panel>
<!-- Panel header -->
<div class="p-4 border-b border-white/10 flex-shrink-0">
<div class="p-4 border-b border-base-300 flex-shrink-0">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-indigo-500/20 flex items-center justify-center">
@@ -23,7 +23,7 @@
</div>
<div>
<span class="font-semibold text-sm">{{ t('cabinetNav.orders') }}</span>
<div class="text-xs text-white/50">{{ filteredItems.length }} {{ t('orders.total', 'total') }}</div>
<div class="text-xs text-base-content/50">{{ filteredItems.length }} {{ t('orders.total', 'total') }}</div>
</div>
</div>
</div>
@@ -34,14 +34,14 @@
v-model="searchQuery"
type="text"
:placeholder="t('common.search')"
class="input input-sm w-full bg-white/10 border-white/20 text-white placeholder:text-white/50"
class="input input-sm w-full bg-base-200 border-base-300 text-base-content placeholder:text-base-content/50"
/>
<Icon name="lucide:search" size="16" class="absolute right-3 top-1/2 -translate-y-1/2 text-white/50" />
<Icon name="lucide:search" size="16" class="absolute right-3 top-1/2 -translate-y-1/2 text-base-content/50" />
</div>
<!-- Filter dropdown -->
<div class="dropdown dropdown-end w-full">
<label tabindex="0" class="btn btn-sm w-full bg-white/10 border-white/20 text-white hover:bg-white/20 justify-between">
<label tabindex="0" class="btn btn-sm w-full bg-base-200 border-base-300 text-base-content hover:bg-base-200 justify-between">
<span>{{ selectedFilterLabel }}</span>
<Icon name="lucide:chevron-down" size="14" />
</label>
@@ -62,7 +62,7 @@
<div
v-for="item in displayItems"
:key="item.uuid"
class="bg-white/10 rounded-lg p-3 hover:bg-white/20 transition-colors cursor-pointer"
class="bg-base-200 rounded-lg p-3 hover:bg-base-200 transition-colors cursor-pointer"
:class="{ 'ring-2 ring-indigo-500': selectedOrderId === item.uuid }"
@click="selectedOrderId = item.uuid"
@mouseenter="hoveredOrderId = item.uuid"
@@ -74,17 +74,17 @@
{{ getStatusText(item.status) }}
</span>
</div>
<div class="text-xs text-white/70 space-y-1">
<div class="text-xs text-base-content/70 space-y-1">
<div class="flex items-center gap-2">
<Icon name="lucide:map-pin" size="12" class="text-white/40" />
<Icon name="lucide:map-pin" size="12" class="text-base-content/40" />
<span class="truncate">{{ item.sourceLocationName }}</span>
</div>
<div class="flex items-center gap-2">
<Icon name="lucide:navigation" size="12" class="text-white/40" />
<Icon name="lucide:navigation" size="12" class="text-base-content/40" />
<span class="truncate">{{ item.destinationLocationName }}</span>
</div>
</div>
<div class="text-xs text-white/50 mt-2">
<div class="text-xs text-base-content/50 mt-2">
{{ getOrderDate(item) }}
</div>
</div>
@@ -93,14 +93,14 @@
<div class="text-center py-8">
<div class="text-3xl mb-2">📦</div>
<div class="font-semibold text-sm mb-1">{{ t('orders.no_orders') }}</div>
<div class="text-xs text-white/60">{{ t('orders.no_orders_desc') }}</div>
<div class="text-xs text-base-content/60">{{ t('orders.no_orders_desc') }}</div>
</div>
</template>
</div>
<!-- Footer -->
<div class="p-3 border-t border-white/10 flex-shrink-0">
<span class="text-xs text-white/50">{{ displayItems.length }} {{ t('catalog.of') }} {{ filteredItems.length }}</span>
<div class="p-3 border-t border-base-300 flex-shrink-0">
<span class="text-xs text-base-content/50">{{ displayItems.length }} {{ t('catalog.of') }} {{ filteredItems.length }}</span>
</div>
</template>
</CatalogPage>