55 lines
2.2 KiB
Plaintext
55 lines
2.2 KiB
Plaintext
{{define "title"}}Browse{{end}}
|
|
{{define "content"}}
|
|
{{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
|
|
{{template "browse_content" .}}
|
|
{{end}}
|
|
|
|
{{define "browse_content"}}
|
|
<div id="browse-content" class="flex flex-col gap-6">
|
|
<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>
|
|
</div>
|
|
|
|
{{template "filter_bar" .}}
|
|
|
|
<main class="w-full">
|
|
{{if eq (len .Animes) 0}}
|
|
<div class="flex h-64 flex-col items-center justify-center gap-4 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>
|
|
<p class="text-foreground">No anime found</p>
|
|
<div class="flex gap-2">
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
{{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">
|
|
{{range .Animes}}
|
|
{{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
|
|
{{end}}
|
|
{{if .HasNextPage}}
|
|
{{template "browse_sentinel" .}}
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
</main>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{define "anime_card_scroll"}}
|
|
{{range .Animes}}
|
|
{{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
|
|
{{end}}
|
|
{{if .HasNextPage}}
|
|
{{template "browse_sentinel" .}}
|
|
{{end}}
|
|
{{end}}
|
|
|
|
{{define "browse_sentinel"}}
|
|
<div hx-get="/browse?q={{.Query}}&type={{.Type}}&status={{.Status}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}&{{genresParams .Genres}}&page={{.NextPage}}"
|
|
hx-trigger="intersect once"
|
|
hx-swap="outerHTML"
|
|
hx-target="this"
|
|
class="col-span-full h-px"></div>
|
|
{{end}}
|