Compact admin layout and preserve admin scroll
This commit is contained in:
AzuTear
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { RouterLink, RouterView, useRoute } from 'vue-router'
|
||||
import { Activity, AlertTriangle, CalendarCog, LayoutDashboard, Sparkles, Users } from '@lucide/vue'
|
||||
import { AlertTriangle, CalendarCog, LayoutDashboard, Sparkles, Users } from '@lucide/vue'
|
||||
|
||||
import Card from '../../components/ui/Card.vue'
|
||||
import { useAwardsStore } from '../../stores/awards'
|
||||
@@ -34,72 +34,55 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-8 pb-14">
|
||||
<div class="space-y-4">
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.35em] text-amber-500">Admin</p>
|
||||
<h1 class="max-w-[13ch] font-[Cormorant_Garamond] text-6xl leading-[0.92] text-violet-800">
|
||||
Betriebswerkzeug fuer Awards, Moderation und Risiko-Sichtung
|
||||
</h1>
|
||||
<p class="max-w-3xl text-lg leading-8 text-slate-600">
|
||||
Der Admin-Bereich ist in klar getrennte Arbeitszonen aufgeteilt, damit Season-Pflege, Review und Monitoring nicht mehr auf einer einzigen Seite kollidieren.
|
||||
</p>
|
||||
<div class="space-y-5 pb-10">
|
||||
<Card class="p-3">
|
||||
<div class="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
|
||||
<div class="flex min-w-0 items-center gap-3 px-2">
|
||||
<div class="grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-violet-100 text-violet-700">
|
||||
<component :is="currentNavItem.icon" class="h-5 w-5" />
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Admin</p>
|
||||
<h1 class="truncate text-xl font-semibold text-slate-900">{{ currentNavItem.label }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-[1.1fr_0.9fr]">
|
||||
<Card class="p-5">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="grid h-12 w-12 place-items-center rounded-[1.2rem] bg-violet-100 text-violet-700">
|
||||
<component :is="currentNavItem.icon" class="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Aktueller Bereich</p>
|
||||
<h2 class="mt-2 font-[Cormorant_Garamond] text-3xl text-violet-800">{{ currentNavItem.label }}</h2>
|
||||
<p class="mt-2 text-sm leading-6 text-slate-500">{{ currentNavItem.description }}</p>
|
||||
</div>
|
||||
<div class="grid gap-2 sm:grid-cols-3 xl:w-[420px]">
|
||||
<div
|
||||
v-for="item in seasonSummary"
|
||||
:key="item.label"
|
||||
class="rounded-lg border border-violet-100 bg-violet-50/60 px-3 py-2"
|
||||
>
|
||||
<p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">{{ item.label }}</p>
|
||||
<strong class="mt-1 block text-lg text-violet-800">{{ item.value }}</strong>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card class="p-5">
|
||||
<div class="flex items-center gap-3">
|
||||
<Activity class="h-5 w-5 text-violet-600" />
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Season Snapshot</p>
|
||||
</div>
|
||||
<div class="mt-4 grid gap-3 sm:grid-cols-3">
|
||||
<div
|
||||
v-for="item in seasonSummary"
|
||||
:key="item.label"
|
||||
class="rounded-[20px] border border-violet-100 bg-violet-50/60 px-4 py-4"
|
||||
>
|
||||
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{{ item.label }}</p>
|
||||
<strong class="mt-2 block text-2xl text-violet-800">{{ item.value }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div class="grid gap-6 xl:grid-cols-[280px_minmax(0,1fr)]">
|
||||
<Card class="h-fit p-4 xl:sticky xl:top-6">
|
||||
<nav class="space-y-2">
|
||||
<div class="grid gap-5 xl:grid-cols-[220px_minmax(0,1fr)]">
|
||||
<Card class="h-fit p-2 xl:sticky xl:top-4">
|
||||
<nav class="space-y-1">
|
||||
<RouterLink
|
||||
v-for="item in navItems"
|
||||
:key="item.to"
|
||||
:to="item.to"
|
||||
class="block rounded-[24px] border px-4 py-4 transition"
|
||||
class="block rounded-lg border px-3 py-2.5 transition"
|
||||
:class="route.path === item.to ? 'border-violet-200 bg-violet-100/80 text-violet-900' : 'border-transparent bg-white/70 text-slate-700 hover:border-violet-100 hover:bg-violet-50/70'"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="mt-0.5 grid h-10 w-10 place-items-center rounded-[1rem] bg-white/80 text-violet-700">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<div class="flex min-w-0 items-center gap-2">
|
||||
<div class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-white/80 text-violet-700">
|
||||
<component :is="item.icon" class="h-4 w-4" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-semibold uppercase tracking-[0.18em]">{{ item.label }}</p>
|
||||
<p class="mt-2 text-sm leading-6 text-slate-500">{{ item.description }}</p>
|
||||
<div class="min-w-0">
|
||||
<p class="truncate text-sm font-semibold">{{ item.label }}</p>
|
||||
<p class="truncate text-xs text-slate-500">{{ item.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
v-if="item.badge()"
|
||||
class="rounded-full border border-violet-200 bg-white/90 px-3 py-1 text-[11px] font-semibold text-violet-700"
|
||||
class="shrink-0 rounded-full border border-violet-200 bg-white/90 px-2 py-0.5 text-[11px] font-semibold text-violet-700"
|
||||
>
|
||||
{{ item.badge() }}
|
||||
</span>
|
||||
@@ -107,13 +90,10 @@ onMounted(async () => {
|
||||
</RouterLink>
|
||||
</nav>
|
||||
|
||||
<div class="mt-6 rounded-[24px] border border-violet-100 bg-violet-50/60 px-4 py-4">
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Aktive Season</p>
|
||||
<h2 class="mt-3 font-[Cormorant_Garamond] text-3xl text-violet-800">
|
||||
{{ currentSeason.year ? `${currentSeason.year}` : 'Keine Season' }}
|
||||
</h2>
|
||||
<p class="mt-2 text-sm text-slate-600">{{ currentSeason.name || 'Bitte Season auswaehlen.' }}</p>
|
||||
<p class="mt-3 text-xs uppercase tracking-[0.2em] text-slate-500">{{ currentSeason.currentPhase || 'Kein Status' }}</p>
|
||||
<div class="mt-3 rounded-lg border border-violet-100 bg-violet-50/60 px-3 py-3">
|
||||
<p class="text-[10px] font-semibold uppercase tracking-[0.18em] text-violet-500">Aktive Season</p>
|
||||
<p class="mt-1 truncate text-sm font-semibold text-violet-800">{{ currentSeason.year || 'Keine Season' }} · {{ currentSeason.currentPhase || 'Kein Status' }}</p>
|
||||
<p class="mt-1 truncate text-xs text-slate-500">{{ currentSeason.name || 'Bitte Season auswaehlen.' }}</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user