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

Separate active season admin card

Browse Source
This commit is contained in:
AzuTear
2026-06-17 13:39:54 +02:00
parent 6d08d6ea01
commit 33975a633c
1 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/admin/AdminLayoutView.vue
+31 -29
View File
@@ -35,36 +35,38 @@ onMounted(async () => {
<template>
<div class="pb-10">
<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-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-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 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>
<aside class="space-y-3 xl:sticky xl:top-4 xl:h-fit">
<Card class="p-2">
<nav class="space-y-1">
<RouterLink
v-for="item in navItems"
:key="item.to"
:to="item.to"
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-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 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="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>
</div>
<span
v-if="item.badge()"
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>
</div>
</RouterLink>
</nav>
</RouterLink>
</nav>
</Card>
<div class="mt-3 rounded-lg border border-violet-100 bg-violet-50/60 px-3 py-3">
<Card class="p-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>
@@ -78,8 +80,8 @@ onMounted(async () => {
<strong class="block text-base leading-5 text-violet-800">{{ item.value }}</strong>
</div>
</div>
</div>
</Card>
</Card>
</aside>
<RouterView />
</div>