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

fix: standardize empty state and grid styles

Browse Source
This commit is contained in:
mkelvers
2026-05-25 01:41:31 +02:00
parent 900e56d7ca
commit f9c1fc9391
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
templates/browse.gohtml
View File

@@ -7,23 +7,23 @@
{{define "browse_content"}} {{define "browse_content"}}
<div id="browse-content" class="flex flex-col gap-6"> <div id="browse-content" class="flex flex-col gap-6">
<div class="flex items-end justify-between"> <div class="flex items-end justify-between">
<h1 class="font-[family:var(--font-serif)] tracking-[-0.03em] leading-[1.15] text-xl font-normal text-foreground">Browse</h1> <h1 class="text-xl font-normal tracking-[-0.02em] text-foreground">Browse</h1>
</div> </div>
{{template "filter_bar" .}} {{template "filter_bar" .}}
<main class="w-full"> <main class="w-full">
{{if eq (len .Animes) 0}} {{if eq (len .Animes) 0}}
<div class="flex h-64 flex-col items-center justify-center gap-4 text-foreground-muted"> <div class="flex h-64 flex-col items-center justify-center gap-3 text-foreground-muted">
<svg class="h-12 w-12 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></svg> <svg class="h-10 w-10 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" /></svg>
<p class="text-foreground">No anime found</p> <p class="text-sm text-foreground">No anime found</p>
<div class="flex gap-2"> <p class="text-sm">Try clearing filters or browsing what’s popular.</p>
<a href="/browse" class="px-4 py-2 text-sm bg-background-surface hover:bg-background-button-hover text-foreground transition-colors">Clear filters</a> <div class="mt-2 flex gap-2">
<a href="/browse?order_by=popularity&sort=desc" class="px-4 py-2 text-sm bg-accent/20 hover:bg-accent/30 text-accent transition-colors">Browse popular</a> <a href="/browse" class="!rounded-none inline-flex h-10 items-center justify-center bg-background-button px-4 text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Clear filters</a>
<a href="/browse?order_by=popularity&sort=desc" class="!rounded-none inline-flex h-10 items-center justify-center bg-background-button px-4 text-sm font-normal text-foreground transition-colors hover:bg-background-button-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">Browse popular</a>
</div> </div>
</div> </div>
{{else}} {{else}}
<div id="anime-grid" class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6"> <div id="anime-grid" class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7">
{{range .Animes}} {{range .Animes}}
{{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}} {{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
{{end}} {{end}}