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"