58 lines
2.0 KiB
Plaintext
58 lines
2.0 KiB
Plaintext
{{define "anime_recommendations"}}
|
|
{{if .Items}}
|
|
<div class="w-full">
|
|
<h2 class="mb-6 text-lg font-normal text-foreground">Recommendations</h2>
|
|
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
|
|
{{range (slice .Items 0 (min (len .Items) 8))}}
|
|
<a href="/anime/{{.Entry.MalID}}" class="group flex flex-col gap-2">
|
|
<div class="aspect-2/3 overflow-hidden bg-background-surface shadow-md">
|
|
<img src="{{.Entry.Images.Webp.LargeImageURL}}" alt="{{.Entry.Title}}" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy" />
|
|
</div>
|
|
<span class="truncate text-xs font-medium text-foreground-muted transition-colors group-hover:text-foreground">{{.Entry.Title}}</span>
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|
|
|
|
{{define "anime_recommendations_loading"}}
|
|
<div
|
|
hx-get="/anime/{{.AnimeID}}?section=recommendations"
|
|
hx-trigger="load delay:1500ms"
|
|
hx-swap="outerHTML"
|
|
>
|
|
<div class="w-full">
|
|
<h2 class="mb-6 text-lg font-normal text-foreground">Recommendations</h2>
|
|
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
|
|
{{range (seq 8)}}
|
|
<div class="flex flex-col gap-2">
|
|
<div class="skeleton aspect-2/3"></div>
|
|
<div class="skeleton h-3 w-full"></div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{define "anime_recommendations_initial_loading"}}
|
|
<div
|
|
hx-get="/anime/{{.AnimeID}}?section=recommendations"
|
|
hx-trigger="load"
|
|
hx-swap="outerHTML"
|
|
>
|
|
<div class="w-full">
|
|
<h2 class="mb-6 text-lg font-normal text-foreground">Recommendations</h2>
|
|
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
|
|
{{range (seq 8)}}
|
|
<div class="flex flex-col gap-2">
|
|
<div class="skeleton aspect-2/3"></div>
|
|
<div class="skeleton h-3 w-full"></div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|