bao/vtuber-awards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compact admin layout and preserve admin scroll

Browse Source
This commit is contained in:
AzuTear
2026-06-17 13:30:27 +02:00
parent 4a211189f0
commit e2c74a7378
5 changed files with 73 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AppShell.vue
+13 -6
View File
@@ -31,6 +31,7 @@ const currentLabel = computed(
const visibleNavItems = computed(() =>
navItems.filter((item) => item.to !== '/admin' || authStore.isAdmin),
)
const isAdminRoute = computed(() => route.path.startsWith('/admin'))
async function login(role: 'viewer' | 'admin') {
loginError.value = ''
@@ -56,15 +57,21 @@ async function login(role: 'viewer' | 'admin') {
<span>{{ currentLabel }}</span>
</div>
<header class="mb-10 flex flex-col gap-6 rounded-[34px] border border-white/70 bg-white/72 px-5 py-5 shadow-[0_24px_80px_rgba(93,63,135,0.08)] backdrop-blur lg:px-7">
<div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
<header
class="flex flex-col rounded-[24px] border border-white/70 bg-white/72 shadow-[0_18px_55px_rgba(93,63,135,0.08)] backdrop-blur lg:px-7"
:class="isAdminRoute ? 'mb-5 gap-3 px-4 py-3' : 'mb-10 gap-6 px-5 py-5'"
>
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between" :class="isAdminRoute ? 'gap-3' : 'gap-5'">
<RouterLink to="/" class="flex items-center gap-4 text-slate-800 no-underline">
<div class="grid h-12 w-12 place-items-center rounded-[1.4rem] bg-[linear-gradient(135deg,#f6e3b2,#f5c877)] text-amber-950 shadow-[0_16px_28px_rgba(245,200,119,0.35)]">
<Star class="h-5 w-5" />
<div
class="grid place-items-center rounded-[1.1rem] bg-[linear-gradient(135deg,#f6e3b2,#f5c877)] text-amber-950 shadow-[0_16px_28px_rgba(245,200,119,0.35)]"
:class="isAdminRoute ? 'h-10 w-10' : 'h-12 w-12'"
>
<Star :class="isAdminRoute ? 'h-4 w-4' : 'h-5 w-5'" />
</div>
<div>
<strong class="block text-sm tracking-[0.35em]">VTUBER</strong>
<span class="block text-[11px] tracking-[0.45em] text-slate-500">STAR AWARDS</span>
<span v-if="!isAdminRoute" class="block text-[11px] tracking-[0.45em] text-slate-500">STAR AWARDS</span>
</div>
</RouterLink>
@@ -96,7 +103,7 @@ async function login(role: 'viewer' | 'admin') {
<p v-if="loginError" class="mt-3 text-sm text-rose-700">{{ loginError }}</p>
</div>
<div class="flex flex-col gap-4 border-t border-black/6 pt-4 lg:flex-row lg:items-center lg:justify-between">
<div class="flex flex-col gap-3 border-t border-black/6 pt-3 lg:flex-row lg:items-center lg:justify-between">
<nav class="flex flex-wrap items-center gap-2 text-sm text-slate-600">
<RouterLink
v-for="item in visibleNavItems"
frontend/src/components/admin/AdminPageHeader.vue
+5 -3
View File
@@ -7,9 +7,11 @@ defineProps<{
</script>
<template>
<div class="space-y-3">
<div class="flex flex-col gap-2 border-b border-violet-100 pb-4 md:flex-row md:items-end md:justify-between">
<div>
<p v-if="eyebrow" class="text-xs font-semibold uppercase tracking-[0.28em] text-violet-500">{{ eyebrow }}</p>
<h2 class="font-[Cormorant_Garamond] text-5xl leading-[0.95] text-violet-800">{{ title }}</h2>
<p class="max-w-3xl text-base leading-7 text-slate-600">{{ description }}</p>
<h2 class="mt-1 text-2xl font-semibold text-slate-900">{{ title }}</h2>
</div>
<p class="max-w-xl text-sm leading-6 text-slate-500">{{ description }}</p>
</div>
</template>
frontend/src/components/admin/AdminSeasonToolbar.vue
+6 -10
View File
@@ -26,22 +26,18 @@ const currentSeason = computed(() => store.adminSeasonDetail)
</script>
<template>
<div class="flex flex-col gap-4 rounded-[26px] border border-violet-100 bg-white/80 px-5 py-5 lg:flex-row lg:items-center lg:justify-between">
<div class="space-y-3">
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-violet-500">Arbeitskontext</p>
<p class="mt-2 text-sm text-slate-500">Die gewaehlte Season steuert Kategorien, Kandidaten und Review-Queues im gesamten Admin-Bereich.</p>
<div class="flex flex-wrap gap-3">
<span class="rounded-full border border-violet-100 bg-violet-50/70 px-3 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-600">
<div class="flex flex-col gap-3 rounded-lg border border-violet-100 bg-white/80 px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
<div class="flex flex-wrap items-center gap-2">
<p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">Season</p>
<span class="rounded-full border border-violet-100 bg-violet-50/70 px-3 py-1.5 text-xs font-semibold text-slate-600">
{{ currentSeason.currentPhase || 'Kein Status' }}
</span>
<span class="rounded-full border border-violet-100 bg-white px-3 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-600">
<span class="rounded-full border border-violet-100 bg-white px-3 py-1.5 text-xs font-semibold text-slate-600">
{{ currentSeason.isCurrent ? 'Public Season' : 'Nicht aktiv' }}
</span>
</div>
</div>
<div class="grid gap-3 lg:min-w-[330px]">
<label class="text-sm font-semibold text-slate-600">Season</label>
<div class="lg:min-w-[330px]">
<Select
v-model="selectedSeasonId"
:options="seasonOptions"
frontend/src/router.ts
+9 -1
View File
@@ -14,7 +14,15 @@ import WinnersView from './views/WinnersView.vue'
const router = createRouter({
history: createWebHistory(),
scrollBehavior() {
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
}
if (to.path.startsWith('/admin') && from.path.startsWith('/admin')) {
return false
}
return { top: 0 }
},
routes: [
frontend/src/views/admin/AdminLayoutView.vue
+29 -49
View File
@@ -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="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">
<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>
<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 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>
</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 class="grid gap-2 sm:grid-cols-3 xl:w-[420px]">
<div
v-for="item in seasonSummary"
:key="item.label"
class="rounded-[20px] border border-violet-100 bg-violet-50/60 px-4 py-4"
class="rounded-lg border border-violet-100 bg-violet-50/60 px-3 py-2"
>
<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>
<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>
</div>
</div>
</Card>
</div>
</div>
<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>