valknar/sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

polish: search full-width on top, filters in a row below

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-03-12 10:25:22 +01:00
parent 6a49fbb9ca
commit 2abd54489b
3 changed files with 116 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
packages/frontend/src/routes/videos/+page.svelte
View File

@@ -56,11 +56,11 @@
<SexyBackground />
<PageHero title={$_("videos.title")} description={$_("videos.description")}>
<div class="flex flex-col lg:flex-row gap-4 max-w-6xl mx-auto">
<div class="flex flex-col gap-3 max-w-6xl mx-auto">
<!-- Search -->
<div class="relative flex-1">
<div class="relative">
<span
class="icon-[ri--search-line] absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground"
class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
></span>
<Input
placeholder={$_("videos.search_placeholder")}
@@ -69,56 +69,55 @@
searchValue = (e.target as HTMLInputElement).value;
debounceSearch(searchValue);
}}
class="pl-12 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary"
class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
/>
</div>
<!-- Duration Filter -->
<Select
type="single"
value={data.duration}
onValueChange={(v) => v && setParam("duration", v)}
>
<SelectTrigger
class="w-full lg:w-48 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary"
<!-- Filters -->
<div class="flex gap-3">
<!-- Duration Filter -->
<Select
type="single"
value={data.duration}
onValueChange={(v) => v && setParam("duration", v)}
>
<span class="icon-[ri--timer-2-line] w-5 h-5 mr-2"></span>
{data.duration === "short"
? $_("videos.duration.short")
: data.duration === "medium"
? $_("videos.duration.medium")
: data.duration === "long"
? $_("videos.duration.long")
: $_("videos.duration.all")}
</SelectTrigger>
<SelectContent>
<SelectItem value="all">{$_("videos.duration.all")}</SelectItem>
<SelectItem value="short">{$_("videos.duration.short")}</SelectItem>
<SelectItem value="medium">{$_("videos.duration.medium")}</SelectItem>
<SelectItem value="long">{$_("videos.duration.long")}</SelectItem>
</SelectContent>
</Select>
<SelectTrigger class="flex-1 bg-background/50 border-primary/20 focus:border-primary">
<span class="icon-[ri--timer-2-line] w-4 h-4 mr-2"></span>
{data.duration === "short"
? $_("videos.duration.short")
: data.duration === "medium"
? $_("videos.duration.medium")
: data.duration === "long"
? $_("videos.duration.long")
: $_("videos.duration.all")}
</SelectTrigger>
<SelectContent>
<SelectItem value="all">{$_("videos.duration.all")}</SelectItem>
<SelectItem value="short">{$_("videos.duration.short")}</SelectItem>
<SelectItem value="medium">{$_("videos.duration.medium")}</SelectItem>
<SelectItem value="long">{$_("videos.duration.long")}</SelectItem>
</SelectContent>
</Select>
<!-- Sort -->
<Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
<SelectTrigger
class="w-full lg:w-48 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary"
>
{data.sort === "most_liked"
? $_("videos.sort.most_liked")
: data.sort === "most_played"
? $_("videos.sort.most_played")
: data.sort === "name"
? $_("videos.sort.name")
: $_("videos.sort.recent")}
</SelectTrigger>
<SelectContent>
<SelectItem value="recent">{$_("videos.sort.recent")}</SelectItem>
<SelectItem value="most_liked">{$_("videos.sort.most_liked")}</SelectItem>
<SelectItem value="most_played">{$_("videos.sort.most_played")}</SelectItem>
<SelectItem value="name">{$_("videos.sort.name")}</SelectItem>
</SelectContent>
</Select>
<!-- Sort -->
<Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
<SelectTrigger class="flex-1 bg-background/50 border-primary/20 focus:border-primary">
{data.sort === "most_liked"
? $_("videos.sort.most_liked")
: data.sort === "most_played"
? $_("videos.sort.most_played")
: data.sort === "name"
? $_("videos.sort.name")
: $_("videos.sort.recent")}
</SelectTrigger>
<SelectContent>
<SelectItem value="recent">{$_("videos.sort.recent")}</SelectItem>
<SelectItem value="most_liked">{$_("videos.sort.most_liked")}</SelectItem>
<SelectItem value="most_played">{$_("videos.sort.most_played")}</SelectItem>
<SelectItem value="name">{$_("videos.sort.name")}</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</PageHero>
<!-- Videos Grid -->