polish: unify search/filter control size with FAQ (h-14, text-lg, larger icon)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -64,7 +64,7 @@
|
|||||||
<!-- Search -->
|
<!-- Search -->
|
||||||
<div class="relative flex-1">
|
<div class="relative flex-1">
|
||||||
<span
|
<span
|
||||||
class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
|
class="icon-[ri--search-line] absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground"
|
||||||
></span>
|
></span>
|
||||||
<Input
|
<Input
|
||||||
placeholder={$_("magazine.search_placeholder")}
|
placeholder={$_("magazine.search_placeholder")}
|
||||||
@@ -73,7 +73,7 @@
|
|||||||
searchValue = (e.target as HTMLInputElement).value;
|
searchValue = (e.target as HTMLInputElement).value;
|
||||||
debounceSearch(searchValue);
|
debounceSearch(searchValue);
|
||||||
}}
|
}}
|
||||||
class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
|
class="pl-12 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -84,9 +84,9 @@
|
|||||||
onValueChange={(v) => v && setParam("category", v)}
|
onValueChange={(v) => v && setParam("category", v)}
|
||||||
>
|
>
|
||||||
<SelectTrigger
|
<SelectTrigger
|
||||||
class="w-full md:w-48 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"
|
||||||
|
|||||||
@@ -57,7 +57,7 @@
|
|||||||
<!-- Search -->
|
<!-- Search -->
|
||||||
<div class="relative flex-1">
|
<div class="relative flex-1">
|
||||||
<span
|
<span
|
||||||
class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
|
class="icon-[ri--search-line] absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground"
|
||||||
></span>
|
></span>
|
||||||
<Input
|
<Input
|
||||||
placeholder={$_("models.search_placeholder")}
|
placeholder={$_("models.search_placeholder")}
|
||||||
@@ -66,14 +66,14 @@
|
|||||||
searchValue = (e.target as HTMLInputElement).value;
|
searchValue = (e.target as HTMLInputElement).value;
|
||||||
debounceSearch(searchValue);
|
debounceSearch(searchValue);
|
||||||
}}
|
}}
|
||||||
class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
|
class="pl-12 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 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="w-full md:w-48 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>
|
||||||
|
|||||||
@@ -60,7 +60,7 @@
|
|||||||
<!-- Search -->
|
<!-- Search -->
|
||||||
<div class="relative flex-1">
|
<div class="relative flex-1">
|
||||||
<span
|
<span
|
||||||
class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
|
class="icon-[ri--search-line] absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground"
|
||||||
></span>
|
></span>
|
||||||
<Input
|
<Input
|
||||||
placeholder={$_("videos.search_placeholder")}
|
placeholder={$_("videos.search_placeholder")}
|
||||||
@@ -69,7 +69,7 @@
|
|||||||
searchValue = (e.target as HTMLInputElement).value;
|
searchValue = (e.target as HTMLInputElement).value;
|
||||||
debounceSearch(searchValue);
|
debounceSearch(searchValue);
|
||||||
}}
|
}}
|
||||||
class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
|
class="pl-12 h-14 text-lg bg-background/50 border-primary/20 focus:border-primary"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -80,9 +80,9 @@
|
|||||||
onValueChange={(v) => v && setParam("duration", v)}
|
onValueChange={(v) => v && setParam("duration", v)}
|
||||||
>
|
>
|
||||||
<SelectTrigger
|
<SelectTrigger
|
||||||
class="w-full lg:w-48 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"
|
||||||
@@ -102,7 +102,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="w-full lg:w-48 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")
|
||||||
|
|||||||
Reference in New Issue
Block a user