add the stats and the menu

This commit is contained in:
Yanick Champoux 2024-02-06 15:40:47 -05:00
parent 2bbeefa26a
commit 23359b86ee
6 changed files with 72 additions and 28 deletions

View File

@ -0,0 +1,15 @@
export default function clickOutside(node) {
const handleClick = (event) => {
if (node && !node.contains(event.target) && !event.defaultPrevented) {
node.dispatchEvent(new CustomEvent('click_outside', node));
}
};
document.addEventListener('click', handleClick, true);
return {
destroy() {
document.removeEventListener('click', handleClick, true);
},
};
}

View File

@ -2,16 +2,19 @@
<title>Ottawa board games, trades and sales</title> <title>Ottawa board games, trades and sales</title>
</svelte:head> </svelte:head>
<main class="responsive"> <main class="responsive">
<AppTop />
<slot /> <slot />
</main> </main>
<script> <script>
import 'beercss/dist/cdn/beer.min.css'; import 'beercss/dist/cdn/beer.min.css';
// import 'beercss/dist/cdn/beer.min.js';
import { setContext } from 'svelte'; import { setContext } from 'svelte';
import { dev, browser } from '$app/environment'; import { dev, browser } from '$app/environment';
import { readable, writable } from 'svelte/store'; import { readable, writable } from 'svelte/store';
import { persisted } from 'svelte-persisted-store'; import { persisted } from 'svelte-persisted-store';
import u from '@yanick/updeep-remeda'; import u from '@yanick/updeep-remeda';
import AppTop from './AppTop.svelte';
const prefix = dev ? '/dev/' : '/db/'; const prefix = dev ? '/dev/' : '/db/';

View File

@ -1,12 +1,3 @@
<header>
<nav>
<h5 class="max left-align">Ottawa board games for sale and trade</h5>
<a class="button circle transparent" href="/about/">
<i>question_mark</i>
</a>
</nav>
</header>
<article> <article>
{#await $games} {#await $games}
<div class="medium-height middle-align center-align"> <div class="medium-height middle-align center-align">

50
src/routes/AppTop.svelte Normal file
View File

@ -0,0 +1,50 @@
<header>
<nav>
<button
class="circle transparent"
on:click={() => (show_menu = !show_menu)}>
<i>menu</i>
</button>
<h5 class="max left-align">Ottawa board games for sale and trade</h5>
</nav>
</header>
<dialog
class="left primary-container"
open={show_menu}
use:clickOutside
on:click_outside={() => (show_menu = false)}>
<nav class="drawer primary-container">
<header></header>
<a href="/" on:click={hide_menu}>
<i>list</i>
<span class="max">listing</span>
</a>
<a href="/stats/" on:click={hide_menu}>
<i>numbers</i>
<span>stats</span>
</a>
<a href="/about/" on:click={hide_menu}>
<i>question_mark</i>
<span>about</span>
</a>
<a class="backsie" on:click={hide_menu}>
<i>arrow_back</i>
<span class="max">back</span>
</a>
</nav>
</dialog>
<script>
import clickOutside from '$lib/directives/clickOutside.js';
let show_menu = false;
const hide_menu = () => (show_menu = false);
</script>
<style>
.backsie {
margin-top: 2em;
}
dialog {
font-size: var(--font-size-10);
}
</style>

View File

@ -1,12 +1,3 @@
<header>
<nav>
<h5 class="max left-align">Ottawa board games for sale and trade</h5>
<a class="button circle transparent" href="/">
<i>arrow_back</i>
</a>
</nav>
</header>
<article> <article>
<p> <p>
<code>bgg.babyl.ca</code> is an aggregation of board games for sale or <code>bgg.babyl.ca</code> is an aggregation of board games for sale or

View File

@ -1,12 +1,3 @@
<header>
<nav>
<h5 class="max left-align">Ottawa board games for sale and trade</h5>
<a class="button circle transparent" href="/">
<i>arrow_back</i>
</a>
</nav>
</header>
<article> <article>
<p>Currently listing {nbr_games} games from {nbr_sellers} sellers.</p> <p>Currently listing {nbr_games} games from {nbr_sellers} sellers.</p>
@ -27,7 +18,6 @@
<script> <script>
// TODO avatars? // TODO avatars?
// TODO BggUser component
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import BggUser from '$lib/components/BggUser.svelte'; import BggUser from '$lib/components/BggUser.svelte';
@ -53,4 +43,8 @@
margin-left: 2em; margin-left: 2em;
margin-right: 2em; margin-right: 2em;
} }
article {
font-size: var(--font-size-10);
}
</style> </style>