Improve admin year setup card
This commit is contained in:
AzuTear
@@ -144,42 +144,72 @@ async function createCategory() {
|
|||||||
<AdminSeasonToolbar />
|
<AdminSeasonToolbar />
|
||||||
|
|
||||||
<div class="grid gap-6 xl:grid-cols-[0.95fr_1.05fr]">
|
<div class="grid gap-6 xl:grid-cols-[0.95fr_1.05fr]">
|
||||||
<Card class="p-7">
|
<Card class="overflow-hidden">
|
||||||
<div class="flex flex-col gap-6">
|
<div class="border-b border-violet-100 bg-gradient-to-br from-white via-violet-50/70 to-[#f7eef8] p-6">
|
||||||
|
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||||
<div>
|
<div>
|
||||||
<h2 class="font-[Cormorant_Garamond] text-4xl text-violet-800">Jahres-Einrichtung</h2>
|
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Jahresstatus</p>
|
||||||
<p class="mt-2 text-sm text-slate-500">Phase, aktueller Status und Basiskontext fuer das aktive Award-Jahr.</p>
|
<h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Award-Jahr steuern</h2>
|
||||||
|
<p class="mt-2 max-w-xl text-sm leading-6 text-slate-500">
|
||||||
|
Hier legst du fest, in welcher Phase das Jahr ist und ob genau dieses Jahr oeffentlich fuer Community, Voting und Archiv sichtbar ist.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-2xl border px-4 py-3 text-sm font-semibold" :class="seasonForm.isCurrent ? 'border-emerald-100 bg-emerald-50 text-emerald-700' : 'border-slate-100 bg-slate-50 text-slate-500'">
|
||||||
|
{{ seasonForm.isCurrent ? 'Oeffentlich aktiv' : 'Intern vorbereitet' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="space-y-3">
|
<div class="space-y-5 p-6">
|
||||||
<label class="text-sm font-semibold text-slate-600">Phase</label>
|
<label class="block space-y-2">
|
||||||
|
<span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Aktuelle Phase</span>
|
||||||
<input
|
<input
|
||||||
v-model="seasonForm.currentPhase"
|
v-model="seasonForm.currentPhase"
|
||||||
type="text"
|
type="text"
|
||||||
class="w-full rounded-2xl border border-violet-200 bg-white px-4 py-3"
|
class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
|
||||||
|
placeholder="z.B. Community Voting, Nominierung, Archiviert"
|
||||||
/>
|
/>
|
||||||
</div>
|
<span class="block text-xs leading-5 text-slate-500">
|
||||||
|
Diese Phase wird als Orientierung fuer Team und spaeter auch fuer Public-Kommunikation genutzt.
|
||||||
<label class="flex items-center gap-3 rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-4 text-sm text-slate-700">
|
</span>
|
||||||
<input v-model="seasonForm.isCurrent" type="checkbox" class="h-4 w-4 accent-violet-600" />
|
|
||||||
Dieses Jahr ist das aktuell oeffentliche Award-Jahr
|
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div class="flex flex-wrap items-center gap-4">
|
<label class="flex cursor-pointer gap-4 rounded-[24px] border border-violet-100 bg-violet-50/50 p-4 transition hover:bg-violet-50">
|
||||||
<Button :disabled="seasonSaving || !selectedSeasonId" @click="saveSeason">
|
<input v-model="seasonForm.isCurrent" type="checkbox" class="mt-1 h-4 w-4 shrink-0 accent-violet-600" />
|
||||||
{{ seasonSaving ? 'Speichert ...' : 'Jahr speichern' }}
|
<span>
|
||||||
</Button>
|
<span class="block font-semibold text-slate-800">Dieses Award-Jahr oeffentlich schalten</span>
|
||||||
<span class="text-sm text-slate-500">
|
<span class="mt-1 block text-sm leading-6 text-slate-500">
|
||||||
{{ seasonDetail.year }} · {{ seasonDetail.name }}
|
Wenn aktiv, gilt dieses Jahr als aktueller Public-Kontext. Nur ein Award-Jahr sollte gleichzeitig oeffentlich sein.
|
||||||
</span>
|
</span>
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="grid gap-3 sm:grid-cols-3">
|
||||||
|
<div class="rounded-2xl border border-violet-50 bg-white/80 p-4">
|
||||||
|
<p class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Jahr</p>
|
||||||
|
<strong class="mt-2 block text-xl text-violet-800">{{ seasonDetail.year || '-' }}</strong>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-2xl border border-violet-50 bg-white/80 p-4">
|
||||||
|
<p class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Kategorien</p>
|
||||||
|
<strong class="mt-2 block text-xl text-violet-800">{{ seasonDetail.categories.length }}</strong>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-2xl border border-violet-50 bg-white/80 p-4">
|
||||||
|
<p class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Kandidaten</p>
|
||||||
|
<strong class="mt-2 block text-xl text-violet-800">{{ seasonDetail.candidates.length }}</strong>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p v-if="adminMessage" class="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
|
<div class="flex flex-col gap-3 border-t border-violet-100 pt-5 sm:flex-row sm:items-center sm:justify-between">
|
||||||
{{ adminMessage }}
|
<p class="text-sm leading-6 text-slate-500">
|
||||||
</p>
|
Speichert Phase und Public-Status fuer <strong class="text-slate-700">{{ seasonDetail.name }}</strong>.
|
||||||
<p v-if="adminError" class="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
|
|
||||||
{{ adminError }}
|
|
||||||
</p>
|
</p>
|
||||||
|
<Button :disabled="seasonSaving || !selectedSeasonId" @click="saveSeason">
|
||||||
|
{{ seasonSaving ? 'Speichert ...' : 'Jahresstatus speichern' }}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p v-if="adminMessage" class="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">{{ adminMessage }}</p>
|
||||||
|
<p v-if="adminError" class="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{{ adminError }}</p>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user