feat(ui): refresh glass header and map bottom sheets
All checks were successful
Build Docker Image / build (push) Successful in 5m23s
All checks were successful
Build Docker Image / build (push) Successful in 5m23s
This commit is contained in:
Ruslan Bakiev
@@ -12,27 +12,28 @@
|
||||
|
||||
<!-- Bottom Sheet with slide-up animation -->
|
||||
<Transition name="slide-up" appear>
|
||||
<div class="fixed inset-x-0 bottom-0 z-50 flex flex-col" style="height: 70vh">
|
||||
<!-- Glass sheet -->
|
||||
<div class="relative flex-1 bg-black/40 backdrop-blur-xl rounded-t-2xl border-t border-white/20 shadow-2xl overflow-hidden">
|
||||
<div class="fixed inset-x-0 bottom-0 z-50 flex justify-center px-3 md:px-4" style="height: 72vh">
|
||||
<div class="absolute inset-0 -top-[32vh] bg-gradient-to-t from-black/45 via-black/20 to-transparent" />
|
||||
<!-- Sheet -->
|
||||
<div class="relative flex w-full max-w-[980px] flex-col overflow-hidden rounded-t-[2rem] border border-white/60 bg-base-100/95 shadow-[0_-24px_70px_rgba(15,23,42,0.3)] backdrop-blur-xl">
|
||||
<!-- Drag handle -->
|
||||
<div class="flex justify-center py-2">
|
||||
<div class="w-12 h-1.5 bg-white/30 rounded-full" />
|
||||
<div class="h-1.5 w-12 rounded-full bg-base-content/20" />
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="px-6 pb-4 border-b border-white/10">
|
||||
<div class="border-b border-base-300 bg-base-100/90 px-6 pb-4">
|
||||
<!-- Back button -->
|
||||
<NuxtLink :to="localePath('/clientarea/orders')" class="inline-flex items-center gap-1 text-white/60 hover:text-white text-sm mb-3">
|
||||
<NuxtLink :to="localePath('/clientarea/orders')" class="mb-3 inline-flex items-center gap-1 text-sm text-base-content/60 hover:text-base-content">
|
||||
<Icon name="lucide:arrow-left" size="16" />
|
||||
{{ t('common.back') }}
|
||||
</NuxtLink>
|
||||
|
||||
<template v-if="hasOrderError">
|
||||
<div class="bg-error/20 border border-error/30 rounded-lg p-4">
|
||||
<div class="font-semibold text-white mb-2">{{ t('common.error') }}</div>
|
||||
<div class="text-sm text-white/70 mb-3">{{ orderError }}</div>
|
||||
<button class="btn btn-sm bg-white/10 border-white/20 text-white" @click="loadOrder">
|
||||
<div class="rounded-lg border border-error/30 bg-error/10 p-4">
|
||||
<div class="mb-2 font-black text-base-content">{{ t('common.error') }}</div>
|
||||
<div class="mb-3 text-sm text-base-content/70">{{ orderError }}</div>
|
||||
<button class="btn btn-sm btn-outline" @click="loadOrder">
|
||||
{{ t('ordersDetail.errors.retry') }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -40,13 +41,13 @@
|
||||
|
||||
<template v-else-if="!isLoadingOrder && order">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 rounded-xl bg-indigo-500/20 flex items-center justify-center">
|
||||
<Icon name="lucide:package" size="24" class="text-indigo-400" />
|
||||
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/15">
|
||||
<Icon name="lucide:package" size="24" class="text-primary" />
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-bold text-lg text-white truncate">{{ orderTitle }}</div>
|
||||
<div class="truncate text-xl font-black text-base-content">{{ orderTitle }}</div>
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<span v-for="(meta, idx) in orderMeta" :key="idx" class="text-xs text-white/50">
|
||||
<span v-for="(meta, idx) in orderMeta" :key="idx" class="text-xs text-base-content/55">
|
||||
{{ meta }}{{ idx < orderMeta.length - 1 ? ' · ' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -56,18 +57,18 @@
|
||||
|
||||
<template v-else>
|
||||
<div class="animate-pulse">
|
||||
<div class="h-12 bg-white/10 rounded-xl w-48" />
|
||||
<div class="h-12 w-48 rounded-xl bg-base-300/70" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Scrollable content -->
|
||||
<div v-if="!hasOrderError && order" class="overflow-y-auto h-[calc(70vh-140px)] px-6 py-4 space-y-4">
|
||||
<div v-if="!hasOrderError && order" class="h-[calc(72vh-150px)] overflow-y-auto px-6 py-4 space-y-4">
|
||||
<!-- Route stages -->
|
||||
<div v-if="orderStageItems.length" class="bg-white/5 rounded-xl p-4 border border-white/10">
|
||||
<div class="font-semibold text-white mb-3 flex items-center gap-2">
|
||||
<div v-if="orderStageItems.length" class="rounded-2xl border border-base-300 bg-base-100 p-4">
|
||||
<div class="mb-3 flex items-center gap-2 text-base-content">
|
||||
<Icon name="lucide:route" size="18" />
|
||||
{{ t('ordersDetail.sections.stages.title', 'Маршрут') }}
|
||||
<span class="text-lg font-black">{{ t('ordersDetail.sections.stages.title', 'Маршрут') }}</span>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div
|
||||
@@ -76,15 +77,15 @@
|
||||
class="flex gap-3"
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-3 h-3 rounded-full bg-indigo-500" />
|
||||
<div v-if="idx < orderStageItems.length - 1" class="w-0.5 flex-1 bg-white/20 my-1" />
|
||||
<div class="h-3 w-3 rounded-full bg-primary" />
|
||||
<div v-if="idx < orderStageItems.length - 1" class="my-1 w-0.5 flex-1 bg-base-300" />
|
||||
</div>
|
||||
<div class="flex-1 pb-3">
|
||||
<div class="text-sm text-white font-medium">{{ stage.from }}</div>
|
||||
<div v-if="stage.to && stage.to !== stage.from" class="text-xs text-white/50 mt-0.5">
|
||||
<div class="text-sm font-bold text-base-content">{{ stage.from }}</div>
|
||||
<div v-if="stage.to && stage.to !== stage.from" class="mt-0.5 text-xs text-base-content/60">
|
||||
→ {{ stage.to }}
|
||||
</div>
|
||||
<div v-if="stage.meta?.length" class="text-xs text-white/40 mt-1">
|
||||
<div v-if="stage.meta?.length" class="mt-1 text-xs text-base-content/50">
|
||||
{{ stage.meta.join(' · ') }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -93,10 +94,10 @@
|
||||
</div>
|
||||
|
||||
<!-- Timeline -->
|
||||
<div v-if="order.stages?.length" class="bg-white/5 rounded-xl p-4 border border-white/10">
|
||||
<div class="font-semibold text-white mb-3 flex items-center gap-2">
|
||||
<div v-if="order.stages?.length" class="rounded-2xl border border-base-300 bg-base-100 p-4">
|
||||
<div class="mb-3 flex items-center gap-2 text-base-content">
|
||||
<Icon name="lucide:calendar" size="18" />
|
||||
{{ t('ordersDetail.sections.timeline.title') }}
|
||||
<span class="text-lg font-black">{{ t('ordersDetail.sections.timeline.title') }}</span>
|
||||
</div>
|
||||
<GanttTimeline
|
||||
:stages="order.stages"
|
||||
@@ -106,10 +107,10 @@
|
||||
</div>
|
||||
|
||||
<!-- Map preview (small) -->
|
||||
<div v-if="orderRoutesForMap.length" class="bg-white/5 rounded-xl p-4 border border-white/10">
|
||||
<div class="font-semibold text-white mb-3 flex items-center gap-2">
|
||||
<div v-if="orderRoutesForMap.length" class="rounded-2xl border border-base-300 bg-base-100 p-4">
|
||||
<div class="mb-3 flex items-center gap-2 text-base-content">
|
||||
<Icon name="lucide:map" size="18" />
|
||||
{{ t('ordersDetail.sections.map.title', 'Карта') }}
|
||||
<span class="text-lg font-black">{{ t('ordersDetail.sections.map.title', 'Карта') }}</span>
|
||||
</div>
|
||||
<RequestRoutesMap :routes="orderRoutesForMap" :height="200" />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user