79 lines
4.0 KiB
Plaintext
79 lines
4.0 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 "studio_dropdown_items"}}
|
||
{{if eq .Page 1}}
|
||
<button type="button" class="flex w-full items-center px-5 py-2.5 text-left transition-colors hover:bg-surface-hover text-sm text-foreground" onclick="(function(){const input=document.getElementById('studio-input'); if(input){input.value=''}; const form=document.getElementById('browse-search-form'); if(form){form.requestSubmit()}; const dd=document.getElementById('studio-dropdown'); dd?.close?.()})()">
|
||
Any Studio
|
||
</button>
|
||
{{end}}
|
||
{{range .StudioItems}}
|
||
<button type="button" class="flex w-full items-center px-5 py-2.5 text-left transition-colors hover:bg-surface-hover text-sm text-foreground" onclick="(function(){const input=document.getElementById('studio-input'); if(input){input.value='{{.ID}}'}; const form=document.getElementById('browse-search-form'); if(form){form.requestSubmit()}; const dd=document.getElementById('studio-dropdown'); dd?.close?.()})()">
|
||
{{.Name}}
|
||
</button>
|
||
{{end}}
|
||
{{if and (eq (len .StudioItems) 0) (not .HasNextPage)}}
|
||
<div class="px-5 py-3 text-sm text-foreground-muted">No studios found.</div>
|
||
{{end}}
|
||
{{if .HasNextPage}}
|
||
<div hx-get="/api/jikan/producers?q={{urlquery .Query}}&page={{.NextPage}}&limit={{.Limit}}"
|
||
hx-trigger="intersect once"
|
||
hx-swap="beforeend"
|
||
hx-target="this"
|
||
hx-push-url="false"
|
||
class="h-px"></div>
|
||
{{end}}
|
||
{{end}}
|
||
|
||
{{define "browse_sentinel"}}
|
||
<div hx-get="/browse?q={{.Query}}&type={{.Type}}&status={{.Status}}&order_by={{.OrderBy}}&sort={{.Sort}}&studio={{.Studio}}&sfw={{.SFW}}{{ if .Genres }}&{{genresParams .Genres}}{{ end }}&page={{.NextPage}}"
|
||
hx-trigger="intersect once"
|
||
hx-swap="outerHTML"
|
||
hx-target="this"
|
||
class="col-span-full h-px"></div>
|
||
{{end}}
|