Nikolay Tatarinov
2bd2c8dbca
- Added a custom light theme in app.css to match the dark theme's palette. - Introduced AdminBreadcrumbs component for improved navigation in admin pages. - Implemented Skeleton component for loading states in various views. - Added ToastContainer for displaying notifications and alerts. - Enhanced MapView with loading indicators and improved marker handling. - Updated MapCoordsDisplay to allow copying of shareable links. - Refactored MapControls and MapContextMenu for better usability. - Improved user experience in profile and admin pages with loading states and search functionality.
55 lines
1.6 KiB
Vue
55 lines
1.6 KiB
Vue
<template>
|
||
<Teleport to="body">
|
||
<div
|
||
class="fixed bottom-4 right-4 z-[9998] flex flex-col gap-2 max-w-sm w-full pointer-events-none"
|
||
aria-live="polite"
|
||
aria-label="Notifications"
|
||
>
|
||
<TransitionGroup name="toast">
|
||
<div
|
||
v-for="t in toasts"
|
||
:key="t.id"
|
||
class="pointer-events-auto rounded-lg px-4 py-3 shadow-lg border backdrop-blur-sm flex items-center gap-2 min-w-0"
|
||
:class="
|
||
t.type === 'error'
|
||
? 'bg-error/95 text-error-content border-error/30'
|
||
: t.type === 'info'
|
||
? 'bg-info/95 text-info-content border-info/30'
|
||
: 'bg-success/95 text-success-content border-success/30'
|
||
"
|
||
role="alert"
|
||
>
|
||
<span class="flex-1 text-sm font-medium truncate">{{ t.text }}</span>
|
||
<button
|
||
type="button"
|
||
class="btn btn-ghost btn-xs btn-circle shrink-0 opacity-70 hover:opacity-100"
|
||
aria-label="Dismiss"
|
||
@click="dismiss(t.id)"
|
||
>
|
||
<span class="text-lg leading-none font-light" aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
</TransitionGroup>
|
||
</div>
|
||
</Teleport>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const { toasts, dismiss } = useToast()
|
||
</script>
|
||
|
||
<style scoped>
|
||
.toast-enter-active,
|
||
.toast-leave-active {
|
||
transition: all 0.2s ease;
|
||
}
|
||
.toast-enter-from,
|
||
.toast-leave-to {
|
||
opacity: 0;
|
||
transform: translateX(1rem);
|
||
}
|
||
.toast-move {
|
||
transition: transform 0.2s ease;
|
||
}
|
||
</style>
|