diff options
Diffstat (limited to 'frontend/src/lib/filter')
| -rw-r--r-- | frontend/src/lib/filter/ComicFilterForm.svelte | 16 | ||||
| -rw-r--r-- | frontend/src/lib/filter/components/Filter.svelte | 27 | ||||
| -rw-r--r-- | frontend/src/lib/filter/components/FilterForm.svelte | 4 |
3 files changed, 10 insertions, 37 deletions
diff --git a/frontend/src/lib/filter/ComicFilterForm.svelte b/frontend/src/lib/filter/ComicFilterForm.svelte index 7f0058d..8bf7af3 100644 --- a/frontend/src/lib/filter/ComicFilterForm.svelte +++ b/frontend/src/lib/filter/ComicFilterForm.svelte @@ -25,13 +25,7 @@ <FilterForm type="grid" apply={filter.apply} expanded={filter.excludes > 0}> {#snippet include(type)} - <Filter - {type} - title="Tags" - options={tags} - filter={filter.include.tags} - --grid-column="span 2" - /> + <Filter {type} wide title="Tags" options={tags} filter={filter.include.tags} /> <Filter {type} title="Artists" options={artists} filter={filter.include.artists} /> <Filter {type} title="Circles" options={circles} filter={filter.include.circles} /> <Filter {type} title="Characters" options={characters} filter={filter.include.characters} /> @@ -42,13 +36,7 @@ <Filter {type} title="Languages" options={languages} filter={filter.include.languages} /> {/snippet} {#snippet exclude(type)} - <Filter - {type} - title="Tags" - options={tags} - filter={filter.exclude.tags} - --grid-column="span 2" - /> + <Filter {type} wide title="Tags" options={tags} filter={filter.exclude.tags} /> <Filter {type} title="Artists" options={artists} filter={filter.exclude.artists} /> <Filter {type} title="Circles" options={circles} filter={filter.exclude.circles} /> <Filter {type} title="Characters" options={characters} filter={filter.exclude.characters} /> diff --git a/frontend/src/lib/filter/components/Filter.svelte b/frontend/src/lib/filter/components/Filter.svelte index c164cbb..4b39589 100644 --- a/frontend/src/lib/filter/components/Filter.svelte +++ b/frontend/src/lib/filter/components/Filter.svelte @@ -8,15 +8,16 @@ type: FilterType; options: ListItem[] | undefined; filter: Association<string> | Enum<string>; + wide?: boolean; } - let { title, type, options, filter }: Props = $props(); + let { title, type, options, filter, wide = false }: Props = $props(); let exclude = $derived(type === 'exclude'); const id = `${type}-${title.toLowerCase()}`; </script> -<div class:exclude class="filter-container"> +<div class:exclude class:wide class="filter-container [&.wide]:col-span-2"> <div class="flex gap-2"> <label for={id}>{title}</label> <div class="ml-auto flex items-center gap-1 self-center text-xs"> @@ -25,7 +26,7 @@ type="button" title="matches all" class:active={filter.mode === 'all'} - class="btn btn-xs" + class="btn-xs hover:bg-slate-700 [&.active]:bg-indigo-800" onclick={() => (filter.mode = 'all')} > ∀ @@ -34,7 +35,7 @@ type="button" title="matches any of" class:active={filter.mode === 'any'} - class="btn btn-xs" + class="btn-xs hover:bg-slate-700 [&.active]:bg-indigo-800" onclick={() => (filter.mode = 'any')} > ∃ @@ -43,7 +44,7 @@ type="button" title="matches exactly" class:active={filter.mode === 'exact'} - class="btn btn-xs" + class="btn-xs hover:bg-slate-700 [&.active]:bg-indigo-800" onclick={() => (filter.mode = 'exact')} > = @@ -54,7 +55,7 @@ type="button" title="empty" class:active={filter.empty} - class="btn btn-xs" + class="btn-xs hover:bg-slate-700 [&.active]:bg-indigo-800" onclick={() => (filter.empty = !filter.empty)} > ∅ @@ -63,17 +64,3 @@ </div> <Select multi clearable {options} {id} bind:value={filter.values} /> </div> - -<style lang="postcss"> - button:hover { - @apply bg-slate-700; - } - - button.active { - @apply bg-indigo-800; - } - - .filter-container { - grid-column: var(--grid-column); - } -</style> diff --git a/frontend/src/lib/filter/components/FilterForm.svelte b/frontend/src/lib/filter/components/FilterForm.svelte index ed58ed9..a32faf8 100644 --- a/frontend/src/lib/filter/components/FilterForm.svelte +++ b/frontend/src/lib/filter/components/FilterForm.svelte @@ -38,9 +38,7 @@ </div> {/if} {:else} - <div - class="flex flex-wrap justify-center gap-2 [&>*]:basis-full xl:[&>*]:basis-1/3 2xl:[&>*]:basis-1/5" - > + <div class="flex flex-wrap justify-center gap-2 *:basis-full xl:*:basis-1/3 2xl:*:basis-1/5"> <div class="p-2"> {@render include?.('include')} </div> |