mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
141 lines
3 KiB
Svelte
141 lines
3 KiB
Svelte
<script lang="ts">
|
|
import { fade } from 'svelte/transition';
|
|
import { Popover, PopoverButton, PopoverPanel } from '@rgossiaux/svelte-headlessui';
|
|
import { CogIcon } from '@rgossiaux/svelte-heroicons/outline'
|
|
import Themes from './themes.svelte';
|
|
import GameCollection from './gameCollection.svelte';
|
|
</script>
|
|
|
|
<div class="container">
|
|
<Popover let:open class="popover">
|
|
<PopoverButton aria-label="Preferences">
|
|
<CogIcon width="24" height="24" />
|
|
</PopoverButton>
|
|
|
|
{#if open}
|
|
<div transition:fade={{ duration: 100 }}>
|
|
<PopoverPanel class="popover-panel" static>
|
|
<div class="preferences">
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
class="arrow"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
id="inside"
|
|
d="M23 24H1L11.0909 1.98341C11.4474 1.20562 12.5526 1.20562 12.9091 1.98341L23 24Z"
|
|
fill="none"
|
|
/>
|
|
<path
|
|
id="outside"
|
|
d="M12.8944 1.78885L24 24H23L12.9021 2.88628C12.5396 2.12822 11.4604 2.12822 11.0979 2.88628L1 24H0L11.1056 1.78885C11.4741 1.05181 12.5259 1.0518 12.8944 1.78885Z"
|
|
fill="none"
|
|
/>
|
|
</svg>
|
|
|
|
<span class="title">Preferences</span>
|
|
|
|
<div class="options">
|
|
<Themes />
|
|
<GameCollection />
|
|
</div>
|
|
</div>
|
|
</PopoverPanel>
|
|
</div>
|
|
{/if}
|
|
</Popover>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.panel-contents {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.container {
|
|
width: 24px;
|
|
height: 24px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.container :global(.popover) {
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.container :global(.popover-panel) {
|
|
position: absolute;
|
|
top: 48px;
|
|
right: -22px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.preferences {
|
|
background-image: var(--clr-menu-bg);
|
|
padding: var(--spacing-24);
|
|
border: 1px solid var(--clr-menu-border);
|
|
border-radius: var(--rounded-20);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.preferences .arrow {
|
|
position: absolute;
|
|
top: -23px;
|
|
right: 22px;
|
|
}
|
|
|
|
.preferences .arrow #inside {
|
|
fill: var(--clr-menu-arrow-bg);
|
|
}
|
|
|
|
.preferences .arrow #outside {
|
|
fill: var(--clr-menu-border);
|
|
}
|
|
|
|
.preferences .title {
|
|
display: block;
|
|
padding-bottom: var(--spacing-8);
|
|
font-size: var(--font-24);
|
|
font-weight: 700;
|
|
line-height: 32px;
|
|
border-bottom: 1px solid var(--clr-menu-border);
|
|
}
|
|
|
|
.preferences .options {
|
|
font-weight: 500;
|
|
color: var(--clr-menu-text);
|
|
}
|
|
|
|
.preferences .options > :global(*) {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--spacing-32);
|
|
padding: var(--spacing-24) 0;
|
|
}
|
|
|
|
.preferences .options > :global(*:not(:last-child)) {
|
|
border-bottom: 1px solid var(--clr-menu-border);
|
|
}
|
|
|
|
.preferences .options > :global(*:last-child) {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.preferences .options span {
|
|
max-width: 180px;
|
|
}
|
|
|
|
@media (min-width: 480px) {
|
|
.preferences {
|
|
width: 420px;
|
|
}
|
|
|
|
.preferences .options > :global(*) {
|
|
gap: var(--spacing-64);
|
|
}
|
|
}
|
|
</style>
|