melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: migrate schedule page to v4 syntax

Browse Source
This commit is contained in:
mkelvers
2026-06-07 17:45:48 +02:00
committed by Milas Holsting
parent 295afa6b59
commit b8a89b7d2d
1 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
templates/schedule.gohtml
View File

@@ -22,7 +22,7 @@
{{define "schedule_section"}}
<section class="flex w-full flex-col gap-8" data-schedule-section>
{{if eq (len .Animes) 0}}
<div class="flex flex-col items-center justify-center gap-4 bg-background-surface px-8 py-16 text-center ring-1 ring-[var(--border)]">
<div class="flex flex-col items-center justify-center gap-4 bg-background-surface px-8 py-16 text-center ring-1 ring-(--border)">
<svg class="h-10 w-10 text-foreground-muted/50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
<line x1="16" y1="2" x2="16" y2="6"/>
@@ -71,18 +71,18 @@
</div>
<div class="overflow-x-auto pb-3">
<div class="grid min-w-[1400px] grid-cols-7 gap-px border border-[var(--border)] bg-[var(--border)]" data-schedule-board>
<div class="grid min-w-350 grid-cols-7 gap-px border border-(--border) bg-(--border)" data-schedule-board>
{{range (list "Monday" "Tuesday" "Wednesday" "Thursday" "Friday" "Saturday" "Sunday")}}
{{$day := .}}
<section class="flex min-w-0 flex-col bg-background-surface" data-schedule-day="{{$day}}">
<header class="flex min-h-28 items-end justify-between gap-3 border-b border-[var(--border-light)] px-5 py-5">
<header class="flex min-h-28 items-end justify-between gap-3 border-b border-(--border-light) px-5 py-5">
<div class="min-w-0">
<div class="text-xs font-normal uppercase tracking-wide text-foreground-muted" data-schedule-date-label>—</div>
<h2 class="mt-1 text-xl font-normal tracking-[-0.02em] text-foreground" data-schedule-day-label>{{$day}}</h2>
</div>
<span class="shrink-0 text-sm font-normal tabular-nums text-foreground-muted" data-schedule-count>0</span>
</header>
<div class="flex min-h-[34rem] flex-col" data-schedule-day-items></div>
<div class="flex min-h-136 flex-col" data-schedule-day-items></div>
</section>
{{end}}
</div>
@@ -106,7 +106,7 @@
data-broadcast-time="{{$anime.Broadcast.Time}}"
data-broadcast-timezone="{{$anime.Broadcast.Timezone}}"
>
<div class="flex min-h-[31rem] flex-col gap-4 border-b border-[var(--border-light)] px-5 py-5 transition-colors last:border-b-0 hover:bg-[color:var(--color-surface-hover)]">
<div class="flex min-h-124 flex-col gap-4 border-b border-(--border-light) px-5 py-5 transition-colors last:border-b-0 hover:bg-surface-hover">
<a href="/anime/{{$anime.MalID}}" class="overflow-hidden bg-background-button" data-schedule-poster>
<img src="{{$imageUrl}}" alt="{{$anime.DisplayTitle}}" class="h-44 w-full object-cover" loading="lazy" />
</a>
@@ -114,7 +114,7 @@
<div class="flex min-w-0 flex-1 flex-col gap-3">
<div class="flex items-start justify-between gap-4">
<a href="/anime/{{$anime.MalID}}" class="min-w-0">
<h3 class="line-clamp-3 min-h-[4.5rem] text-xl font-normal leading-tight tracking-[-0.02em] text-foreground">{{$anime.DisplayTitle}}</h3>
<h3 class="line-clamp-3 min-h-18 text-xl font-normal leading-tight tracking-[-0.02em] text-foreground">{{$anime.DisplayTitle}}</h3>
</a>
<button
type="button"
@@ -122,7 +122,7 @@
data-mal-id="{{$anime.MalID}}"
data-watchlist-title="{{$anime.DisplayTitle}}"
data-watchlist-state="{{if (index $.WatchlistMap $anime.MalID)}}in{{else}}out{{end}}"
class="mt-1 shrink-0 text-foreground-muted transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:opacity-50 {{if (index $.WatchlistMap $anime.MalID)}}!text-accent{{end}}"
class="mt-1 shrink-0 text-foreground-muted transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:opacity-50 {{if (index $.WatchlistMap $anime.MalID)}}text-accent!{{end}}"
aria-label="{{if (index $.WatchlistMap $anime.MalID)}}Remove from Watchlist{{else}}Add to Watchlist{{end}}"
>
<svg class="size-5 watchlist-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>
@@ -151,7 +151,7 @@
{{define "schedule_section_scraped"}}
<section class="flex w-full flex-col gap-8" data-schedule-section>
{{if eq (len .ScheduleDays) 0}}
<div class="flex flex-col items-center justify-center gap-4 bg-background-surface px-8 py-16 text-center ring-1 ring-[var(--border)]">
<div class="flex flex-col items-center justify-center gap-4 bg-background-surface px-8 py-16 text-center ring-1 ring-(--border)">
<svg class="h-10 w-10 text-foreground-muted/50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<polyline points="12 6 12 12 16 14"/>
@@ -170,22 +170,22 @@
</div>
<div class="overflow-x-auto pb-3">
<div class="grid min-w-[1400px] grid-cols-7 gap-px border border-[var(--border)] bg-[var(--border)]">
<div class="grid min-w-350 grid-cols-7 gap-px border border-(--border) bg-(--border)">
{{range .ScheduleDays}}
<section class="flex min-w-0 flex-col bg-background-surface">
<header class="flex min-h-28 items-end justify-between gap-3 border-b border-[var(--border-light)] bg-background px-5 py-5">
<header class="flex min-h-28 items-end justify-between gap-3 border-b border-(--border-light) bg-background px-5 py-5">
<div class="min-w-0">
<div class="text-xs font-normal uppercase tracking-wide text-foreground-muted">{{.DateLabel}}</div>
<h2 class="mt-1 text-xl font-normal tracking-[-0.02em] text-foreground">{{.WeekdayLabel}}</h2>
</div>
</header>
<div class="flex min-h-[34rem] flex-col">
<div class="flex min-h-136 flex-col">
{{if eq (len .Entries) 0}}
<div class="flex min-h-32 flex-1 items-center justify-center px-6 py-10 text-center text-sm text-foreground-muted">No releases scheduled</div>
{{else}}
{{range .Entries}}
<a href="/browse?q={{urlquery .Title}}" class="group flex min-h-[31rem] flex-col gap-4 border-b border-[var(--border-light)] px-5 py-5 transition-colors last:border-b-0 hover:bg-[color:var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
<div class="relative aspect-[4/5] w-full overflow-hidden bg-background-button">
<a href="/browse?q={{urlquery .Title}}" class="group flex min-h-124 flex-col gap-4 border-b border-(--border-light) px-5 py-5 transition-colors last:border-b-0 hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
<div class="relative aspect-4/5 w-full overflow-hidden bg-background-button">
{{if .ImageURL}}
<img src="{{.ImageURL}}" alt="{{.Title}}" class="h-full w-full object-cover" loading="lazy" />
{{end}}
@@ -199,7 +199,7 @@
<span class="bg-background-button px-2.5 py-1 text-sm font-normal text-accent">{{.AirType}}</span>
</div>
<h3 class="line-clamp-3 min-h-[4.5rem] text-xl font-normal leading-tight tracking-[-0.02em] text-foreground">{{.Title}}</h3>
<h3 class="line-clamp-3 min-h-18 text-xl font-normal leading-tight tracking-[-0.02em] text-foreground">{{.Title}}</h3>
<span class="mt-auto pt-2 text-sm font-normal text-foreground-muted transition-colors group-hover:text-foreground">View details</span>
</div>
</a>
@@ -227,19 +227,19 @@
</div>
</div>
<div class="overflow-x-auto pb-3">
<div class="grid min-w-[1400px] grid-cols-7 gap-px border border-[var(--border)] bg-[var(--border)]">
<div class="grid min-w-350 grid-cols-7 gap-px border border-(--border) bg-(--border)">
{{range (seq 7)}}
<div class="flex flex-col bg-background-surface">
<div class="flex min-h-28 items-end justify-between border-b border-[var(--border-light)] px-5 py-5">
<div class="flex min-h-28 items-end justify-between border-b border-(--border-light) px-5 py-5">
<div class="flex flex-col gap-2">
<div class="skeleton skeleton-subtle h-3 w-20"></div>
<div class="skeleton h-8 w-28"></div>
</div>
<div class="skeleton skeleton-subtle h-8 w-10"></div>
</div>
<div class="flex min-h-[34rem] flex-col">
<div class="flex min-h-136 flex-col">
{{range (seq 3)}}
<div class="flex flex-col gap-4 border-b border-[var(--border-light)] px-5 py-5 last:border-b-0">
<div class="flex flex-col gap-4 border-b border-(--border-light) px-5 py-5 last:border-b-0">
<div class="skeleton h-44 w-full"></div>
<div class="flex flex-1 flex-col gap-3">
<div class="skeleton skeleton-subtle h-7 w-20"></div>