BradNut/boredgame
1
0
Fork 0
mirror of https://github.com/BradNut/boredgame synced 2025-09-08 17:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Advanced search in text search conditional based on disclosure.

Browse source
This commit is contained in:
Bradley Shellnut 2022-08-08 15:45:42 -07:00
parent b455b83759
commit a8afcca6d2
1 changed files with 53 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
src/lib/components/search/textSearch/index.svelte
View file

@ -1,4 +1,11 @@
<script lang="ts"> <script lang="ts">
import { fade } from "svelte/transition";
import {
Disclosure,
DisclosureButton,
DisclosurePanel,
} from "@rgossiaux/svelte-headlessui";
import { ChevronRightIcon } from "@rgossiaux/svelte-heroicons/solid";
import { boredState } from '$lib/stores/boredState'; import { boredState } from '$lib/stores/boredState';
import { gameStore } from '$lib/stores/gameSearchStore'; import { gameStore } from '$lib/stores/gameSearchStore';
import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte'; import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte';
@ -12,34 +19,63 @@
</script> </script>
<!-- <form on:submit|preventDefault={handleSearch} method="post"> --> <!-- <form on:submit|preventDefault={handleSearch} method="post"> -->
<fieldset class="text-search" aria-busy={submitting} disabled={submitting}> <div class="search">
<label for="name"> <fieldset class="text-search" aria-busy={submitting} disabled={submitting}>
Search <label for="name">
<input Search
id="name" <input
name="name" id="name"
bind:value={name} name="name"
type="text" bind:value={name}
aria-label="Search boardgame" type="text"
placeholder="Search boardgame" aria-label="Search boardgame"
/> placeholder="Search boardgame"
</label> />
</fieldset> </label>
{#if advancedSearch} </fieldset>
<AdvancedSearch /> {#if advancedSearch}
{/if} <Disclosure let:open>
<DisclosureButton class="disclosure-button">
<span>Advanced Search?</span>
<ChevronRightIcon class="icon disclosure-icon" style={open ? "transform: rotate(90deg); transition: transform 0.5s ease;" : "transform: rotate(0deg); transition: transform 0.5s ease;"} />
</DisclosureButton>
{#if open}
<div transition:fade>
<!-- Using `static`, `DisclosurePanel` is always rendered,
and ignores the `open` state -->
<DisclosurePanel static>
<AdvancedSearch />
</DisclosurePanel>
</div>
{/if}
</Disclosure>
{/if}
</div>
{#if showButton} {#if showButton}
<button class="btn" type="submit" disabled={submitting}>Submit</button> <button class="btn" type="submit" disabled={submitting}>Submit</button>
{/if} {/if}
<!-- </form> --> <!-- </form> -->
<style lang="scss"> <style lang="scss">
.search {
display: grid;
gap: 1rem;
}
:global(.disclosure-button) {
display: flex;
gap: 0.25rem;
place-items: center;
}
h1 { h1 {
width: 100%; width: 100%;
} }
button { button {
padding: 1rem; padding: 1rem;
margin-bottom: 1.5rem; margin: 1.5rem 0;
} }
label { label {
@ -48,7 +84,6 @@
gap: 1rem; gap: 1rem;
place-content: start; place-content: start;
place-items: center; place-items: center;
margin: 1rem;
@media (max-width: 850px) { @media (max-width: 850px) {
display: flex; display: flex;