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

107
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,62 +73,61 @@
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>
<!-- Category Filter --> <!-- Filters -->
<Select <div class="flex gap-3">
type="single" <!-- Category Filter -->
value={data.category ?? "all"} <Select
onValueChange={(v) => v && setParam("category", v)} type="single"
> value={data.category ?? "all"}
<SelectTrigger onValueChange={(v) => v && setParam("category", v)}
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-5 h-5 mr-2"></span> <SelectTrigger class="flex-1 bg-background/50 border-primary/20 focus:border-primary">
{!data.category <span class="icon-[ri--filter-line] w-4 h-4 mr-2"></span>
? $_("magazine.categories.all") {!data.category
: data.category === "photography" ? $_("magazine.categories.all")
? $_("magazine.categories.photography") : data.category === "photography"
: data.category === "production" ? $_("magazine.categories.photography")
? $_("magazine.categories.production") : data.category === "production"
: data.category === "interview" ? $_("magazine.categories.production")
? $_("magazine.categories.interview") : data.category === "interview"
: data.category === "psychology" ? $_("magazine.categories.interview")
? $_("magazine.categories.psychology") : data.category === "psychology"
: data.category === "trends" ? $_("magazine.categories.psychology")
? $_("magazine.categories.trends") : data.category === "trends"
: $_("magazine.categories.spotlight")} ? $_("magazine.categories.trends")
</SelectTrigger> : $_("magazine.categories.spotlight")}
<SelectContent> </SelectTrigger>
<SelectItem value="all">{$_("magazine.categories.all")}</SelectItem> <SelectContent>
<SelectItem value="photography">{$_("magazine.categories.photography")}</SelectItem> <SelectItem value="all">{$_("magazine.categories.all")}</SelectItem>
<SelectItem value="production">{$_("magazine.categories.production")}</SelectItem> <SelectItem value="photography">{$_("magazine.categories.photography")}</SelectItem>
<SelectItem value="interview">{$_("magazine.categories.interview")}</SelectItem> <SelectItem value="production">{$_("magazine.categories.production")}</SelectItem>
<SelectItem value="psychology">{$_("magazine.categories.psychology")}</SelectItem> <SelectItem value="interview">{$_("magazine.categories.interview")}</SelectItem>
<SelectItem value="trends">{$_("magazine.categories.trends")}</SelectItem> <SelectItem value="psychology">{$_("magazine.categories.psychology")}</SelectItem>
<SelectItem value="spotlight">{$_("magazine.categories.spotlight")}</SelectItem> <SelectItem value="trends">{$_("magazine.categories.trends")}</SelectItem>
</SelectContent> <SelectItem value="spotlight">{$_("magazine.categories.spotlight")}</SelectItem>
</Select> </SelectContent>
</Select>
<!-- 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"
> ? $_("magazine.sort.featured")
{data.sort === "featured" : data.sort === "name"
? $_("magazine.sort.featured") ? $_("magazine.sort.name")
: data.sort === "name" : $_("magazine.sort.recent")}
? $_("magazine.sort.name") </SelectTrigger>
: $_("magazine.sort.recent")} <SelectContent>
</SelectTrigger> <SelectItem value="recent">{$_("magazine.sort.recent")}</SelectItem>
<SelectContent> <SelectItem value="featured">{$_("magazine.sort.featured")}</SelectItem>
<SelectItem value="recent">{$_("magazine.sort.recent")}</SelectItem> <SelectItem value="name">{$_("magazine.sort.name")}</SelectItem>
<SelectItem value="featured">{$_("magazine.sort.featured")}</SelectItem> </SelectContent>
<SelectItem value="name">{$_("magazine.sort.name")}</SelectItem> </Select>
</SelectContent> </div>
</Select>
</div> </div>
</PageHero> </PageHero>

32
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,22 +66,22 @@
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 -->
<Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}> <div class="flex gap-3">
<SelectTrigger <Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
class="w-full md:w-48 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary" <SelectTrigger class="flex-1 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> <SelectItem value="name">{$_("models.sort.name")}</SelectItem>
<SelectItem value="name">{$_("models.sort.name")}</SelectItem> <SelectItem value="recent">{$_("models.sort.recent")}</SelectItem>
<SelectItem value="recent">{$_("models.sort.recent")}</SelectItem> </SelectContent>
</SelectContent> </Select>
</Select> </div>
</div> </div>
</PageHero> </PageHero>
<!-- Models Grid --> <!-- Models Grid -->

95
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,56 +69,55 @@
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>
<!-- Duration Filter --> <!-- Filters -->
<Select <div class="flex gap-3">
type="single" <!-- Duration Filter -->
value={data.duration} <Select
onValueChange={(v) => v && setParam("duration", v)} type="single"
> value={data.duration}
<SelectTrigger onValueChange={(v) => v && setParam("duration", v)}
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-5 h-5 mr-2"></span> <SelectTrigger class="flex-1 bg-background/50 border-primary/20 focus:border-primary">
{data.duration === "short" <span class="icon-[ri--timer-2-line] w-4 h-4 mr-2"></span>
? $_("videos.duration.short") {data.duration === "short"
: data.duration === "medium" ? $_("videos.duration.short")
? $_("videos.duration.medium") : data.duration === "medium"
: data.duration === "long" ? $_("videos.duration.medium")
? $_("videos.duration.long") : data.duration === "long"
: $_("videos.duration.all")} ? $_("videos.duration.long")
</SelectTrigger> : $_("videos.duration.all")}
<SelectContent> </SelectTrigger>
<SelectItem value="all">{$_("videos.duration.all")}</SelectItem> <SelectContent>
<SelectItem value="short">{$_("videos.duration.short")}</SelectItem> <SelectItem value="all">{$_("videos.duration.all")}</SelectItem>
<SelectItem value="medium">{$_("videos.duration.medium")}</SelectItem> <SelectItem value="short">{$_("videos.duration.short")}</SelectItem>
<SelectItem value="long">{$_("videos.duration.long")}</SelectItem> <SelectItem value="medium">{$_("videos.duration.medium")}</SelectItem>
</SelectContent> <SelectItem value="long">{$_("videos.duration.long")}</SelectItem>
</Select> </SelectContent>
</Select>
<!-- 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"
> ? $_("videos.sort.most_liked")
{data.sort === "most_liked" : data.sort === "most_played"
? $_("videos.sort.most_liked") ? $_("videos.sort.most_played")
: data.sort === "most_played" : data.sort === "name"
? $_("videos.sort.most_played") ? $_("videos.sort.name")
: data.sort === "name" : $_("videos.sort.recent")}
? $_("videos.sort.name") </SelectTrigger>
: $_("videos.sort.recent")} <SelectContent>
</SelectTrigger> <SelectItem value="recent">{$_("videos.sort.recent")}</SelectItem>
<SelectContent> <SelectItem value="most_liked">{$_("videos.sort.most_liked")}</SelectItem>
<SelectItem value="recent">{$_("videos.sort.recent")}</SelectItem> <SelectItem value="most_played">{$_("videos.sort.most_played")}</SelectItem>
<SelectItem value="most_liked">{$_("videos.sort.most_liked")}</SelectItem> <SelectItem value="name">{$_("videos.sort.name")}</SelectItem>
<SelectItem value="most_played">{$_("videos.sort.most_played")}</SelectItem> </SelectContent>
<SelectItem value="name">{$_("videos.sort.name")}</SelectItem> </Select>
</SelectContent> </div>
</Select>
</div> </div>
</PageHero> </PageHero>
<!-- Videos Grid --> <!-- Videos Grid -->