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

21
packages/frontend/src/routes/magazine/+page.svelte
View File

@@ -60,11 +60,11 @@
<SexyBackground /> <SexyBackground />
<PageHero title={$_("magazine.title")} description={$_("magazine.description")}> <PageHero title={$_("magazine.title")} description={$_("magazine.description")}>
<div class="flex flex-col md:flex-row gap-4 max-w-4xl mx-auto"> <div class="flex flex-col gap-3 max-w-4xl mx-auto">
<!-- Search --> <!-- Search -->
<div class="relative flex-1"> <div class="relative">
<span <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> ></span>
<Input <Input
placeholder={$_("magazine.search_placeholder")} placeholder={$_("magazine.search_placeholder")}
@@ -73,20 +73,20 @@
searchValue = (e.target as HTMLInputElement).value; searchValue = (e.target as HTMLInputElement).value;
debounceSearch(searchValue); 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> </div>
<!-- Filters -->
<div class="flex gap-3">
<!-- Category Filter --> <!-- Category Filter -->
<Select <Select
type="single" type="single"
value={data.category ?? "all"} value={data.category ?? "all"}
onValueChange={(v) => v && setParam("category", v)} onValueChange={(v) => v && setParam("category", v)}
> >
<SelectTrigger <SelectTrigger class="flex-1 bg-background/50 border-primary/20 focus:border-primary">
class="w-full md:w-48 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary" <span class="icon-[ri--filter-line] w-4 h-4 mr-2"></span>
>
<span class="icon-[ri--filter-line] w-5 h-5 mr-2"></span>
{!data.category {!data.category
? $_("magazine.categories.all") ? $_("magazine.categories.all")
: data.category === "photography" : data.category === "photography"
@@ -114,9 +114,7 @@
<!-- Sort --> <!-- Sort -->
<Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}> <Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
<SelectTrigger <SelectTrigger class="flex-1 bg-background/50 border-primary/20 focus:border-primary">
class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
>
{data.sort === "featured" {data.sort === "featured"
? $_("magazine.sort.featured") ? $_("magazine.sort.featured")
: data.sort === "name" : data.sort === "name"
@@ -130,6 +128,7 @@
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
</div>
</PageHero> </PageHero>
<div class="container mx-auto px-4 py-12"> <div class="container mx-auto px-4 py-12">

16
packages/frontend/src/routes/models/+page.svelte
View File

@@ -53,11 +53,11 @@
<SexyBackground /> <SexyBackground />
<PageHero title={$_("models.title")} description={$_("models.description")}> <PageHero title={$_("models.title")} description={$_("models.description")}>
<div class="flex flex-col md:flex-row gap-4 max-w-4xl mx-auto"> <div class="flex flex-col gap-3 max-w-4xl mx-auto">
<!-- Search --> <!-- Search -->
<div class="relative flex-1"> <div class="relative">
<span <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> ></span>
<Input <Input
placeholder={$_("models.search_placeholder")} placeholder={$_("models.search_placeholder")}
@@ -66,15 +66,14 @@
searchValue = (e.target as HTMLInputElement).value; searchValue = (e.target as HTMLInputElement).value;
debounceSearch(searchValue); 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> </div>
<!-- Sort --> <!-- Filters -->
<div class="flex gap-3">
<Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}> <Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
<SelectTrigger <SelectTrigger class="flex-1 bg-background/50 border-primary/20 focus:border-primary">
class="w-full md:w-48 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary"
>
{data.sort === "recent" ? $_("models.sort.recent") : $_("models.sort.name")} {data.sort === "recent" ? $_("models.sort.recent") : $_("models.sort.name")}
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -83,6 +82,7 @@
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
</div>
</PageHero> </PageHero>
<!-- Models Grid --> <!-- Models Grid -->
<div class="container mx-auto px-4 py-12"> <div class="container mx-auto px-4 py-12">

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

@@ -56,11 +56,11 @@
<SexyBackground /> <SexyBackground />
<PageHero title={$_("videos.title")} description={$_("videos.description")}> <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 --> <!-- Search -->
<div class="relative flex-1"> <div class="relative">
<span <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> ></span>
<Input <Input
placeholder={$_("videos.search_placeholder")} placeholder={$_("videos.search_placeholder")}
@@ -69,20 +69,20 @@
searchValue = (e.target as HTMLInputElement).value; searchValue = (e.target as HTMLInputElement).value;
debounceSearch(searchValue); 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> </div>
<!-- Filters -->
<div class="flex gap-3">
<!-- Duration Filter --> <!-- Duration Filter -->
<Select <Select
type="single" type="single"
value={data.duration} value={data.duration}
onValueChange={(v) => v && setParam("duration", v)} onValueChange={(v) => v && setParam("duration", v)}
> >
<SelectTrigger <SelectTrigger class="flex-1 bg-background/50 border-primary/20 focus:border-primary">
class="w-full lg:w-48 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary" <span class="icon-[ri--timer-2-line] w-4 h-4 mr-2"></span>
>
<span class="icon-[ri--timer-2-line] w-5 h-5 mr-2"></span>
{data.duration === "short" {data.duration === "short"
? $_("videos.duration.short") ? $_("videos.duration.short")
: data.duration === "medium" : data.duration === "medium"
@@ -101,9 +101,7 @@
<!-- Sort --> <!-- Sort -->
<Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}> <Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
<SelectTrigger <SelectTrigger class="flex-1 bg-background/50 border-primary/20 focus:border-primary">
class="w-full lg:w-48 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary"
>
{data.sort === "most_liked" {data.sort === "most_liked"
? $_("videos.sort.most_liked") ? $_("videos.sort.most_liked")
: data.sort === "most_played" : data.sort === "most_played"
@@ -120,6 +118,7 @@
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
</div>
</PageHero> </PageHero>
<!-- Videos Grid --> <!-- Videos Grid -->
<div class="container mx-auto px-4 py-12"> <div class="container mx-auto px-4 py-12">