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

feat: add continue watching carousel

Browse Source
This commit is contained in:
mkelvers
2026-06-06 17:26:22 +02:00
parent 082219d2d4
commit 18a335fd74
4 changed files with 197 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
templates/index.gohtml
View File

@@ -117,16 +117,26 @@
{{end}}
{{define "continue_watching_skeleton"}}
<section id="continue-watching-section" class="w-full">
<section id="continue-watching-section" class="w-full" data-continue-watching-carousel>
<h2 class="mb-3 text-base font-normal text-foreground">Continue Watching</h2>
<div class="flex snap-x snap-mandatory gap-2 overflow-x-auto pb-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:[-ms-overflow-style:auto] lg:[scrollbar-width:thin] lg:[scrollbar-color:var(--scrollbar-thumb)_var(--scrollbar-track)] lg:[&::-webkit-scrollbar]:block lg:[&::-webkit-scrollbar]:h-2 lg:[&::-webkit-scrollbar-track]:bg-[var(--scrollbar-track)] lg:[&::-webkit-scrollbar-track]:rounded-none lg:[&::-webkit-scrollbar-thumb]:bg-[var(--scrollbar-thumb)] lg:[&::-webkit-scrollbar-thumb]:rounded-none lg:[&::-webkit-scrollbar-thumb:hover]:bg-[var(--scrollbar-thumb-hover)]">
<div class="relative overflow-hidden">
<div data-continue-watching-track class="flex snap-x snap-mandatory gap-2 overflow-x-auto pb-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
{{range (seq 3)}}
<div class="flex w-70 shrink-0 snap-start flex-col gap-2 2xl:w-lg">
<div data-continue-watching-item class="flex w-70 shrink-0 snap-start flex-col gap-2 2xl:w-lg">
<div class="skeleton aspect-video w-full overflow-hidden"></div>
<div class="skeleton h-5 w-2/3"></div>
<div class="skeleton skeleton-subtle h-4 w-1/2"></div>
</div>
{{end}}
</div>
<div data-continue-watching-prev-fade class="pointer-events-none absolute inset-y-0 left-0 z-[70] hidden w-20 bg-linear-to-r from-background via-background/80 to-transparent" aria-hidden="true"></div>
<div data-continue-watching-next-fade class="pointer-events-none absolute inset-y-0 right-0 z-[70] hidden w-20 bg-linear-to-l from-background via-background/80 to-transparent" aria-hidden="true"></div>
<button type="button" data-unstyled-button data-continue-watching-prev class="pointer-events-auto absolute left-0 top-[42%] z-[80] hidden h-16 w-14 -translate-y-1/2 cursor-pointer items-center justify-center text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent" aria-label="Scroll continue watching left" aria-hidden="true" tabindex="-1">
<svg class="pointer-events-auto size-10 drop-shadow-[0_1px_2px_rgba(0,0,0,0.45)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"></polyline></svg>
</button>
<button type="button" data-unstyled-button data-continue-watching-next class="pointer-events-auto absolute right-0 top-[42%] z-[80] hidden h-16 w-14 -translate-y-1/2 cursor-pointer items-center justify-center text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent" aria-label="Scroll continue watching right" aria-hidden="true" tabindex="-1">
<svg class="pointer-events-auto size-10 drop-shadow-[0_1px_2px_rgba(0,0,0,0.45)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"></polyline></svg>
</button>
</div>
</section>
{{end}}