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
@@ -2,84 +2,84 @@
|
||||
<Transition name="address-slide">
|
||||
<div
|
||||
v-if="isOpen && addressUuid"
|
||||
class="fixed inset-x-0 bottom-0 z-50 flex flex-col"
|
||||
style="height: 70vh"
|
||||
class="fixed inset-x-0 bottom-0 z-50 flex justify-center px-3 md:px-4"
|
||||
style="height: 72vh"
|
||||
>
|
||||
<!-- Backdrop (clickable to close) -->
|
||||
<div
|
||||
class="absolute inset-0 -top-[30vh] bg-black/30"
|
||||
class="absolute inset-0 -top-[32vh] bg-gradient-to-t from-black/45 via-black/20 to-transparent"
|
||||
@click="emit('close')"
|
||||
/>
|
||||
|
||||
<!-- Sheet content -->
|
||||
<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="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">
|
||||
<!-- Header with drag handle and close -->
|
||||
<div class="sticky top-0 z-10 bg-black/30 backdrop-blur-md border-b border-white/10">
|
||||
<div class="sticky top-0 z-10 border-b border-base-300 bg-base-100/90">
|
||||
<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>
|
||||
<div class="flex items-center justify-between px-6 pb-4">
|
||||
<template v-if="address">
|
||||
<div class="flex items-center gap-3 flex-1 min-w-0">
|
||||
<div class="w-10 h-10 bg-emerald-500/20 rounded-xl flex items-center justify-center flex-shrink-0 text-2xl">
|
||||
<div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-success/20 text-2xl">
|
||||
{{ isoToEmoji(address.countryCode) }}
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<div class="font-bold text-white truncate">{{ address.name }}</div>
|
||||
<div class="text-sm text-white/60 truncate">{{ address.address }}</div>
|
||||
<div class="truncate text-xl font-black text-base-content">{{ address.name }}</div>
|
||||
<div class="truncate text-sm text-base-content/60">{{ address.address }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="flex items-center gap-3 flex-1">
|
||||
<div class="w-10 h-10 bg-white/10 rounded-xl animate-pulse" />
|
||||
<div class="h-10 w-10 animate-pulse rounded-xl bg-base-300/70" />
|
||||
<div class="flex-1">
|
||||
<div class="h-5 bg-white/10 rounded w-48 animate-pulse" />
|
||||
<div class="h-4 bg-white/10 rounded w-32 mt-1 animate-pulse" />
|
||||
<div class="h-5 w-48 animate-pulse rounded bg-base-300/70" />
|
||||
<div class="mt-1 h-4 w-32 animate-pulse rounded bg-base-300/70" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<button class="btn btn-ghost btn-sm btn-circle text-white/60 hover:text-white flex-shrink-0" @click="emit('close')">
|
||||
<button class="btn btn-ghost btn-sm btn-circle flex-shrink-0 text-base-content/60 hover:text-base-content" @click="emit('close')">
|
||||
<Icon name="lucide:x" size="20" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div v-if="address" class="overflow-y-auto h-[calc(70vh-100px)] px-6 py-4 space-y-4">
|
||||
<div v-if="address" class="h-[calc(72vh-110px)] overflow-y-auto px-6 py-4 space-y-4">
|
||||
<!-- Location info -->
|
||||
<div 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 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-pin" size="18" />
|
||||
{{ t('profileAddresses.detail.location') }}
|
||||
<span class="text-lg font-black">{{ t('profileAddresses.detail.location') }}</span>
|
||||
</div>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex items-start gap-2 text-white/80">
|
||||
<Icon name="lucide:navigation" size="14" class="text-white/50 mt-0.5 flex-shrink-0" />
|
||||
<div class="flex items-start gap-2 text-base-content/80">
|
||||
<Icon name="lucide:navigation" size="14" class="mt-0.5 flex-shrink-0 text-base-content/50" />
|
||||
<span>{{ address.address }}</span>
|
||||
</div>
|
||||
<div v-if="address.latitude && address.longitude" class="flex items-center gap-2 text-white/60">
|
||||
<Icon name="lucide:crosshair" size="14" class="text-white/50" />
|
||||
<div v-if="address.latitude && address.longitude" class="flex items-center gap-2 text-base-content/60">
|
||||
<Icon name="lucide:crosshair" size="14" class="text-base-content/50" />
|
||||
<span class="font-mono text-xs">{{ address.latitude.toFixed(6) }}, {{ address.longitude.toFixed(6) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Map preview -->
|
||||
<div v-if="address.latitude && address.longitude" 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="address.latitude && address.longitude" 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('profileAddresses.detail.map') }}
|
||||
<span class="text-lg font-black">{{ t('profileAddresses.detail.map') }}</span>
|
||||
</div>
|
||||
<div class="h-48 rounded-lg overflow-hidden">
|
||||
<div class="h-48 overflow-hidden rounded-xl">
|
||||
<ClientOnly>
|
||||
<MapboxMap
|
||||
:map-id="'address-preview-' + addressUuid"
|
||||
style="width: 100%; height: 100%"
|
||||
:options="{
|
||||
style: 'mapbox://styles/mapbox/dark-v11',
|
||||
style: 'mapbox://styles/mapbox/light-v11',
|
||||
center: [address.longitude, address.latitude],
|
||||
zoom: 14,
|
||||
interactive: false
|
||||
@@ -98,7 +98,7 @@
|
||||
<!-- Actions -->
|
||||
<div class="flex gap-3">
|
||||
<NuxtLink :to="localePath(`/clientarea/addresses/${addressUuid}`)" class="flex-1">
|
||||
<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 btn-outline">
|
||||
<Icon name="lucide:pencil" size="14" class="mr-2" />
|
||||
{{ t('profileAddresses.actions.edit') }}
|
||||
</button>
|
||||
@@ -115,8 +115,8 @@
|
||||
|
||||
<!-- Loading state -->
|
||||
<div v-else class="px-6 py-4 space-y-4">
|
||||
<div class="h-24 bg-white/5 rounded-xl animate-pulse" />
|
||||
<div class="h-48 bg-white/5 rounded-xl animate-pulse" />
|
||||
<div class="h-24 animate-pulse rounded-xl bg-base-300/70" />
|
||||
<div class="h-48 animate-pulse rounded-xl bg-base-300/70" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user