diff options
Diffstat (limited to 'frontend')
| -rw-r--r-- | frontend/src/lib/components/Expander.svelte | 21 | ||||
| -rw-r--r-- | frontend/src/lib/filter/ComicFilterForm.svelte | 2 | ||||
| -rw-r--r-- | frontend/src/lib/filter/TagFilterForm.svelte | 2 | ||||
| -rw-r--r-- | frontend/src/lib/filter/components/FilterForm.svelte | 22 |
4 files changed, 9 insertions, 38 deletions
diff --git a/frontend/src/lib/components/Expander.svelte b/frontend/src/lib/components/Expander.svelte deleted file mode 100644 index 8f23042..0000000 --- a/frontend/src/lib/components/Expander.svelte +++ /dev/null @@ -1,21 +0,0 @@ -<script lang="ts"> - interface Props { - expanded: boolean; - title: string; - } - - let { expanded = $bindable(), title }: Props = $props(); - - function onclick() { - expanded = !expanded; - } -</script> - -<button class="flex items-center text-base hover:text-white" type="button" {onclick}> - {#if expanded} - <span class="icon-base icon-[material-symbols--expand-less]"></span> - {:else} - <span class="icon-base icon-[material-symbols--expand-more]"></span> - {/if} - {title} -</button> diff --git a/frontend/src/lib/filter/ComicFilterForm.svelte b/frontend/src/lib/filter/ComicFilterForm.svelte index 277edd1..331d571 100644 --- a/frontend/src/lib/filter/ComicFilterForm.svelte +++ b/frontend/src/lib/filter/ComicFilterForm.svelte @@ -23,7 +23,7 @@ let worlds = $derived($worldsQuery.data?.worlds.edges); </script> -<FilterForm type="grid" apply={filter.apply} expanded={filter.excludes > 0}> +<FilterForm type="grid" apply={filter.apply}> {#snippet include(type)} <Filter {type} wide title="Tags" options={tags} filter={filter.include.tags} /> <Filter {type} title="Artists" options={artists} filter={filter.include.artists} /> diff --git a/frontend/src/lib/filter/TagFilterForm.svelte b/frontend/src/lib/filter/TagFilterForm.svelte index 280db8a..1ca1a2d 100644 --- a/frontend/src/lib/filter/TagFilterForm.svelte +++ b/frontend/src/lib/filter/TagFilterForm.svelte @@ -13,7 +13,7 @@ let namespaces = $derived($namespaceQuery.data?.namespaces.edges); </script> -<FilterForm apply={filter.apply} expanded={filter.excludes > 0}> +<FilterForm apply={filter.apply}> {#snippet include(type)} <Filter {type} title="Namespaces" options={namespaces} filter={filter.include.namespaces} /> {/snippet} diff --git a/frontend/src/lib/filter/components/FilterForm.svelte b/frontend/src/lib/filter/components/FilterForm.svelte index a32faf8..717a56d 100644 --- a/frontend/src/lib/filter/components/FilterForm.svelte +++ b/frontend/src/lib/filter/components/FilterForm.svelte @@ -1,6 +1,5 @@ <script lang="ts"> import { page } from '$app/state'; - import Expander from '$lib/components/Expander.svelte'; import type { FilterType } from '$lib/Filter.svelte'; import type { Snippet } from 'svelte'; @@ -8,13 +7,10 @@ type?: 'grid' | 'row'; include?: Snippet<[FilterType]>; exclude?: Snippet<[FilterType]>; - expanded: boolean; apply: (params: URLSearchParams) => void; } - let { type = 'row', include, exclude, expanded: initialExpanded, apply }: Props = $props(); - - let expanded = $state(initialExpanded); + let { type = 'row', include, exclude, apply }: Props = $props(); function onsubmit(event: SubmitEvent) { event.preventDefault(); @@ -22,21 +18,17 @@ } </script> -<form {onsubmit} class="gap-0"> +<form {onsubmit} class="gap-4"> {#if type === 'grid'} <div class="flex flex-col gap-4 px-2 md:grid md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6"> {@render include?.('include')} </div> - <div class="my-2 flex justify-start"> - <Expander title="Exclude" bind:expanded /> + + <div + class="flex flex-col gap-4 bg-rose-950/50 p-2 md:grid md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6" + > + {@render exclude?.('exclude')} </div> - {#if expanded} - <div - class="flex flex-col gap-4 bg-rose-950/50 p-2 md:grid md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6" - > - {@render exclude?.('exclude')} - </div> - {/if} {:else} <div class="flex flex-wrap justify-center gap-2 *:basis-full xl:*:basis-1/3 2xl:*:basis-1/5"> <div class="p-2"> |