pablo/logipedia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

article filter bar mobile responsive

Browse Source
This commit is contained in:
mr-shortman 2025-03-15 11:59:00 +01:00
parent 0f7bf09676
commit 38b43174ec
2 changed files with 32 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/article/article-filter-bar.tsx
View File

@ -54,7 +54,7 @@ function ArticleFilterBar({
<> <>
<div <div
className={cn( className={cn(
"flex w-full items-center justify-center gap-2 rounded-md border bg-background p-2", "flex w-full flex-col-reverse items-center justify-center gap-2 rounded-md border bg-background p-2 lg:flex-row lg:gap-4",
className, className,
)} )}
> >
@ -70,8 +70,9 @@ function ArticleFilterBar({
placeholder="Artikel Suche..." placeholder="Artikel Suche..."
/> />
</div> </div>
<div className="flex w-full flex-col gap-2 sm:flex-row">
<CategorySelect <CategorySelect
className="w-full max-w-xs" className="w-full"
onSelect={(category) => { onSelect={(category) => {
onFilterChange({ onFilterChange({
category: category?.length ? category : undefined, category: category?.length ? category : undefined,
@ -90,7 +91,7 @@ function ArticleFilterBar({
sort: currentValue?.length ? currentValue : undefined, sort: currentValue?.length ? currentValue : undefined,
}); });
}} }}
className="w-full max-w-64" className="w-full"
messageUi={{ messageUi={{
selectIcon: FilterIcon, selectIcon: FilterIcon,
select: "Sortieren", select: "Sortieren",
@ -100,6 +101,7 @@ function ArticleFilterBar({
}} }}
/> />
</div> </div>
</div>
</> </>
); );
} }

3
src/components/combobox.tsx
View File

@ -121,9 +121,6 @@ export function Combobox({
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{item?.Icon && <item.Icon className="ml-auto opacity-50" />} {item?.Icon && <item.Icon className="ml-auto opacity-50" />}
<span>{item.label}</span> <span>{item.label}</span>
{/* <span className="text-xs text-muted-foreground">
{value === item.value && "ausgewählt"}
</span> */}
</div> </div>
<Check <Check
className={cn( className={cn(