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

refactor: restructure episode controls for high episode counts

Browse Source
This commit is contained in:
mkelvers
2026-05-24 20:20:50 +02:00
parent e25b0acf7d
commit 2cf5bc2017
1 changed files with 24 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
templates/watch.gohtml
View File

@@ -179,31 +179,35 @@
<div class="flex items-center justify-between">
<span class="text-sm font-normal text-foreground-muted">Episodes</span>
{{if gt $totalEpisodes 100}}
<input id="episode-search" type="text" name="episode-search" placeholder="Find" data-episode-search class="w-24 bg-background-surface text-sm px-3 py-1.5 text-foreground placeholder-foreground-muted focus:outline-none focus:ring-1 focus:ring-accent" />
<span class="sr-only">Episode controls</span>
{{end}}
</div>
{{if gt $totalEpisodes 100}}
<ui-dropdown class="relative block" data-align="left" data-width="min-w-[200px]" data-episode-dropdown>
<div data-trigger>
<button class="w-full flex items-center justify-between px-3 py-2 bg-background-surface text-sm text-foreground-muted hover:bg-surface-hover">
<span data-dropdown-label>01-100</span>
<svg class="w-4 h-4 text-foreground-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
</button>
</div>
<div data-content class="hidden absolute z-50 top-full mt-1 left-0 min-w-50 bg-background-button shadow-[var(--shadow-card)]">
<div class="flex flex-col py-1">
{{$ranges := ceilDiv $totalEpisodes 100}}
{{range $i := seq $ranges}}
{{$start := imul $i 100}}
{{$end := min (add $start 100) $totalEpisodes}}
<button class="episode-range-btn px-4 py-2 text-left text-sm text-foreground-muted hover:bg-surface-hover" data-range-index="{{$i}}" data-range-start="{{add $start 1}}" data-range-end="{{$end}}">
{{printf "%02d" (add $start 1)}}-{{printf "%02d" $end}}
</button>
{{end}}
<div class="flex items-center gap-2">
<ui-dropdown class="relative block grow min-w-0" data-align="left" data-width="min-w-[200px]" data-episode-dropdown>
<div data-trigger>
<button class="w-full flex items-center justify-between px-3 py-2 bg-background-surface text-sm text-foreground-muted hover:bg-surface-hover">
<span data-dropdown-label>01-100</span>
<svg class="w-4 h-4 text-foreground-muted shrink-0 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
</button>
</div>
</div>
</ui-dropdown>
<div data-content class="hidden absolute z-50 top-full mt-1 left-0 min-w-50 bg-background-button shadow-[var(--shadow-card)]">
<div class="flex flex-col py-1">
{{$ranges := ceilDiv $totalEpisodes 100}}
{{range $i := seq $ranges}}
{{$start := imul $i 100}}
{{$end := min (add $start 100) $totalEpisodes}}
<button class="episode-range-btn px-4 py-2 text-left text-sm text-foreground-muted hover:bg-surface-hover" data-range-index="{{$i}}" data-range-start="{{add $start 1}}" data-range-end="{{$end}}">
{{printf "%02d" (add $start 1)}}-{{printf "%02d" $end}}
</button>
{{end}}
</div>
</div>
</ui-dropdown>
<input id="episode-search" type="text" name="episode-search" placeholder="Find" data-episode-search class="w-24 bg-background-surface text-sm px-3 py-2 text-foreground placeholder-foreground-muted focus:outline-none focus:ring-1 focus:ring-accent" />
</div>
{{end}}
</div>