diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/Dropdown.svelte | 35 | ||||
| -rw-r--r-- | src/routes/user/[user]/badges/+page.svelte | 50 |
2 files changed, 55 insertions, 30 deletions
diff --git a/src/lib/Dropdown.svelte b/src/lib/Dropdown.svelte index efbafa1a..bd657f9a 100644 --- a/src/lib/Dropdown.svelte +++ b/src/lib/Dropdown.svelte @@ -2,10 +2,13 @@ interface Item { name: string; url: string; + onClick?: () => void; } export let items: Item[] = []; - export let title: string; + export let title: string | undefined = undefined; + export let header = true; + export let center = false; let open = false; @@ -16,21 +19,31 @@ <svelte:window on:click={handleClickOutside} /> -<div class="dropdown" id="dropdown"> +<div + class="dropdown" + id="dropdown" + style={`--dropdown-left: ${center ? '50%' : 'unset'}; --dropdown-transform: ${ + center ? 'translateX(-50%)' : 'unset' + };`} +> <span - class="header-item dropdown-toggle" + class={`${header ? 'header-item' : ''} dropdown-toggle`} id="dropdown-toggle" on:click|preventDefault={() => (open = !open)} on:keydown={() => {}} role="button" tabindex="0" > - {title} + {#if title} + {title} + {:else} + <slot name="title" /> + {/if} </span> <div class={`dropdown-content card card-small ${open ? 'dropdown-open' : ''}`}> {#each items as item} - <a href={item.url} class="header-item"> + <a href={item.url} class="header-item" on:click={item.onClick}> {item.name} </a> {/each} @@ -69,8 +82,8 @@ visibility: hidden; $delay: 0.25s; transition: opacity $delay ease, transform $delay ease, visibility 0s linear $delay; - left: 50%; - transform: translateX(-50%); + left: var(--dropdown-left); + transform: var(--dropdown-transform); } .dropdown-open { @@ -78,8 +91,8 @@ transform: translateY(0); visibility: visible; transition-delay: 0s, 0s, 0s; - left: 50%; - transform: translateX(-50%); + left: var(--dropdown-left); + transform: var(--dropdown-transform); } .dropdown:hover .dropdown-content { @@ -87,8 +100,8 @@ transform: translateY(0); visibility: visible; transition-delay: 0s, 0s, 0s; - left: 50%; - transform: translateX(-50%); + left: var(--dropdown-left); + transform: var(--dropdown-transform); } .dropdown-content a { diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte index b2efceef..36a23f73 100644 --- a/src/routes/user/[user]/badges/+page.svelte +++ b/src/routes/user/[user]/badges/+page.svelte @@ -14,6 +14,7 @@ import Skeleton from '$lib/Loading/Skeleton.svelte'; import RateLimited from '$lib/Error/RateLimited.svelte'; import Message from '$lib/Loading/Message.svelte'; + import Dropdown from '$lib/Dropdown.svelte'; // import { io } from 'socket.io-client'; export let data; @@ -419,26 +420,37 @@ size="15" value={selectedBadge ? selectedBadge.description : ''} /> - <input - type="text" - placeholder={$locale().user.badges.editMode.category} - name="category" - minlength="1" - maxlength="1000" - size="15" - value={selectedBadge - ? selectedBadge.category === 'Uncategorised' - ? '' - : selectedBadge.category - : ''} - list="categories" - /> {#if groups.length > 0} - <datalist id="categories"> - {#each groups as group} - <option value={group} /> - {/each} - </datalist> + <Dropdown + items={groups.map((group) => ({ + name: group, + url: '#', + onClick: () => { + const category = document.querySelector('input[name="category"]'); + + if (category instanceof HTMLInputElement) category.value = group; + } + }))} + header={false} + center={false} + > + <span slot="title"> + <input + type="text" + placeholder={$locale().user.badges.editMode.category} + name="category" + minlength="1" + maxlength="1000" + size="15" + value={selectedBadge + ? selectedBadge.category === 'Uncategorised' + ? '' + : selectedBadge.category + : ''} + list="categories" + /> + </span> + </Dropdown> {/if} <button class="button-lined" on:click={submitBadge} >{selectedBadge |