55 lines
2.6 KiB
Plaintext
55 lines
2.6 KiB
Plaintext
{{define "title"}}Browse{{end}}
|
||
{{define "content"}}
|
||
{{if .WatchlistIDs}}<script>window.__WATCHLIST_IDS__={{.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="text-xl font-normal tracking-[-0.02em] 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-3 text-foreground-muted">
|
||
<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-sm text-foreground">No anime found</p>
|
||
<p class="text-sm">Try clearing filters or browsing what’s popular.</p>
|
||
<div class="mt-2 flex gap-2">
|
||
<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>
|
||
{{else}}
|
||
<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}}
|
||
{{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}}
|