blackbirdchess/blackbirdchess-client-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added static slicing of results page

Browse Source
This commit is contained in:
Jeroen De Meerleer 2023-08-30 17:23:31 +02:00
parent 0aa1940594
commit 8e948297f1
Signed by: JeroenED
GPG Key ID: 28CCCB8F62BFADD6
13 changed files with 153 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.html
View File

@ -7,6 +7,6 @@
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover" data-theme="skeleton"> <body data-sveltekit-preload-data="hover" data-theme="skeleton">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
</body> </body>
</html> </html>

2
src/app.postcss
View File

@ -6,5 +6,5 @@
/*place global styles here */ /*place global styles here */
html, html,
body { body {
@apply h-full; @apply h-full overflow-hidden;
} }

40
src/lib/components/Header.svelte Normal file
View File

@ -0,0 +1,40 @@
<div class="app-bar flex justify-between items-center m-4">
<div class="app-bar-slot">
<h1 class="text-3xl">Blackbird Chess</h1>
</div>
<div class="app-bar-slot">
<p class="badge variant-filled-surface">24e herfstschaaktornooi</p>
</div>
<div class="app-bar-slot">
<button class="btn">
<i class="icon icon-gear"></i>
<span>Settings</span>
</button>
<button class="btn" on:click={logout}>
<i class="icon icon-sign-out"></i>
<span>Logout</span>
</button>
</div>
</div>
<script>
import {sessionstore, globalstore} from "$lib/stores.js";
import {goto} from "$app/navigation";
let sessionvars;
sessionstore.subscribe(value => {
sessionvars = value;
});
let globalvars;
globalstore.subscribe(value => {
globalvars = value;
});
function logout() {
sessionstore.set({});
globalstore.set({});
goto('/')
}
</script>

19
src/lib/components/Sidebar.svelte Normal file
View File

@ -0,0 +1,19 @@
<ul class="list-nav">
{#each items as { href, label }}
<li>
<a {href} class="{classesActive(href)}">
<span class="">{label}</span>
</a>
</li>
{/each}
</ul>
<script type="text/javascript">
import { page } from '$app/stores';
let items = [
{ href: '/standings', label: 'Standings' },
{ href: '/results', label: 'Results' },
]
$: classesActive = (href) => (href === $page.url.pathname ? '!bg-primary-500' : '');
</script>

BIN
src/lib/fonts/icomoon.eot
View File

Binary file not shown.

3
src/lib/fonts/icomoon.svg
View File

@ -8,6 +8,9 @@
<missing-glyph horiz-adv-x="1024" /> <missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" /> <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xf00d;" glyph-name="close, remove, times" horiz-adv-x="805" d="M741.714 195.428c0-14.286-5.714-28.571-16-38.857l-77.714-77.714c-10.286-10.286-24.571-16-38.857-16s-28.571 5.714-38.857 16l-168 168-168-168c-10.286-10.286-24.571-16-38.857-16s-28.571 5.714-38.857 16l-77.714 77.714c-10.286 10.286-16 24.571-16 38.857s5.714 28.571 16 38.857l168 168-168 168c-10.286 10.286-16 24.571-16 38.857s5.714 28.571 16 38.857l77.714 77.714c10.286 10.286 24.571 16 38.857 16s28.571-5.714 38.857-16l168-168 168 168c10.286 10.286 24.571 16 38.857 16s28.571-5.714 38.857-16l77.714-77.714c10.286-10.286 16-24.571 16-38.857s-5.714-28.571-16-38.857l-168-168 168-168c10.286-10.286 16-24.571 16-38.857z" /> <glyph unicode="&#xf00d;" glyph-name="close, remove, times" horiz-adv-x="805" d="M741.714 195.428c0-14.286-5.714-28.571-16-38.857l-77.714-77.714c-10.286-10.286-24.571-16-38.857-16s-28.571 5.714-38.857 16l-168 168-168-168c-10.286-10.286-24.571-16-38.857-16s-28.571 5.714-38.857 16l-77.714 77.714c-10.286 10.286-16 24.571-16 38.857s5.714 28.571 16 38.857l168 168-168 168c-10.286 10.286-16 24.571-16 38.857s5.714 28.571 16 38.857l77.714 77.714c10.286 10.286 24.571 16 38.857 16s28.571-5.714 38.857-16l168-168 168 168c10.286 10.286 24.571 16 38.857 16s28.571-5.714 38.857-16l77.714-77.714c10.286-10.286 16-24.571 16-38.857s-5.714-28.571-16-38.857l-168-168 168-168c10.286-10.286 16-24.571 16-38.857z" />
<glyph unicode="&#xf013;" glyph-name="cog, gear" horiz-adv-x="878" d="M585.143 438.857c0 80.571-65.714 146.286-146.286 146.286s-146.286-65.714-146.286-146.286 65.714-146.286 146.286-146.286 146.286 65.714 146.286 146.286zM877.714 501.143v-126.857c0-8.571-6.857-18.857-16-20.571l-105.714-16c-6.286-18.286-13.143-35.429-22.286-52 19.429-28 40-53.143 61.143-78.857 3.429-4 5.714-9.143 5.714-14.286s-1.714-9.143-5.143-13.143c-13.714-18.286-90.857-102.286-110.286-102.286-5.143 0-10.286 2.286-14.857 5.143l-78.857 61.714c-16.571-8.571-34.286-16-52-21.714-4-34.857-7.429-72-16.571-106.286-2.286-9.143-10.286-16-20.571-16h-126.857c-10.286 0-19.429 7.429-20.571 17.143l-16 105.143c-17.714 5.714-34.857 12.571-51.429 21.143l-80.571-61.143c-4-3.429-9.143-5.143-14.286-5.143s-10.286 2.286-14.286 6.286c-30.286 27.429-70.286 62.857-94.286 96-2.857 4-4 8.571-4 13.143 0 5.143 1.714 9.143 4.571 13.143 19.429 26.286 40.571 51.429 60 78.286-9.714 18.286-17.714 37.143-23.429 56.571l-104.571 15.429c-9.714 1.714-16.571 10.857-16.571 20.571v126.857c0 8.571 6.857 18.857 15.429 20.571l106.286 16c5.714 18.286 13.143 35.429 22.286 52.571-19.429 27.429-40 53.143-61.143 78.857-3.429 4-5.714 8.571-5.714 13.714s2.286 9.143 5.143 13.143c13.714 18.857 90.857 102.286 110.286 102.286 5.143 0 10.286-2.286 14.857-5.714l78.857-61.143c16.571 8.571 34.286 16 52 21.714 4 34.857 7.429 72 16.571 106.286 2.286 9.143 10.286 16 20.571 16h126.857c10.286 0 19.429-7.429 20.571-17.143l16-105.143c17.714-5.714 34.857-12.571 51.429-21.143l81.143 61.143c3.429 3.429 8.571 5.143 13.714 5.143s10.286-2.286 14.286-5.714c30.286-28 70.286-63.429 94.286-97.143 2.857-3.429 4-8 4-12.571 0-5.143-1.714-9.143-4.571-13.143-19.429-26.286-40.571-51.429-60-78.286 9.714-18.286 17.714-37.143 23.429-56l104.571-16c9.714-1.714 16.571-10.857 16.571-20.571z" />
<glyph unicode="&#xf060;" glyph-name="arrow-left" horiz-adv-x="914" d="M877.714 438.857v-73.143c0-38.857-25.714-73.143-66.857-73.143h-402.286l167.429-168c13.714-13.143 21.714-32 21.714-51.429s-8-38.286-21.714-51.429l-42.857-43.429c-13.143-13.143-32-21.143-51.429-21.143s-38.286 8-52 21.143l-372 372.571c-13.143 13.143-21.143 32-21.143 51.429s8 38.286 21.143 52l372 371.429c13.714 13.714 32.571 21.714 52 21.714s37.714-8 51.429-21.714l42.857-42.286c13.714-13.714 21.714-32.571 21.714-52s-8-38.286-21.714-52l-167.429-167.429h402.286c41.143 0 66.857-34.286 66.857-73.143z" /> <glyph unicode="&#xf060;" glyph-name="arrow-left" horiz-adv-x="914" d="M877.714 438.857v-73.143c0-38.857-25.714-73.143-66.857-73.143h-402.286l167.429-168c13.714-13.143 21.714-32 21.714-51.429s-8-38.286-21.714-51.429l-42.857-43.429c-13.143-13.143-32-21.143-51.429-21.143s-38.286 8-52 21.143l-372 372.571c-13.143 13.143-21.143 32-21.143 51.429s8 38.286 21.143 52l372 371.429c13.714 13.714 32.571 21.714 52 21.714s37.714-8 51.429-21.714l42.857-42.286c13.714-13.714 21.714-32.571 21.714-52s-8-38.286-21.714-52l-167.429-167.429h402.286c41.143 0 66.857-34.286 66.857-73.143z" />
<glyph unicode="&#xf061;" glyph-name="arrow-right" horiz-adv-x="841" d="M841.143 402.286c0-19.429-7.429-38.286-21.143-52l-372-372c-13.714-13.143-32.571-21.143-52-21.143s-37.714 8-51.429 21.143l-42.857 42.857c-13.714 13.714-21.714 32.571-21.714 52s8 38.286 21.714 52l167.429 167.429h-402.286c-41.143 0-66.857 34.286-66.857 73.143v73.143c0 38.857 25.714 73.143 66.857 73.143h402.286l-167.429 168c-13.714 13.143-21.714 32-21.714 51.429s8 38.286 21.714 51.429l42.857 42.857c13.714 13.714 32 21.714 51.429 21.714s38.286-8 52-21.714l372-372c13.714-13.143 21.143-32 21.143-51.429z" />
<glyph unicode="&#xf071;" glyph-name="exclamation-triangle, warning" d="M585.143 165.143v108.571c0 10.286-8 18.857-18.286 18.857h-109.714c-10.286 0-18.286-8.571-18.286-18.857v-108.571c0-10.286 8-18.857 18.286-18.857h109.714c10.286 0 18.286 8.571 18.286 18.857zM584 378.857l10.286 262.286c0 3.429-1.714 8-5.714 10.857-3.429 2.857-8.571 6.286-13.714 6.286h-125.714c-5.143 0-10.286-3.429-13.714-6.286-4-2.857-5.714-8.571-5.714-12l9.714-261.143c0-7.429 8.571-13.143 19.429-13.143h105.714c10.286 0 18.857 5.714 19.429 13.143zM576 912.571l438.857-804.571c12.571-22.286 12-49.714-1.143-72s-37.143-36-62.857-36h-877.714c-25.714 0-49.714 13.714-62.857 36s-13.714 49.714-1.143 72l438.857 804.571c12.571 23.429 37.143 38.286 64 38.286s51.429-14.857 64-38.286z" /> <glyph unicode="&#xf071;" glyph-name="exclamation-triangle, warning" d="M585.143 165.143v108.571c0 10.286-8 18.857-18.286 18.857h-109.714c-10.286 0-18.286-8.571-18.286-18.857v-108.571c0-10.286 8-18.857 18.286-18.857h109.714c10.286 0 18.286 8.571 18.286 18.857zM584 378.857l10.286 262.286c0 3.429-1.714 8-5.714 10.857-3.429 2.857-8.571 6.286-13.714 6.286h-125.714c-5.143 0-10.286-3.429-13.714-6.286-4-2.857-5.714-8.571-5.714-12l9.714-261.143c0-7.429 8.571-13.143 19.429-13.143h105.714c10.286 0 18.857 5.714 19.429 13.143zM576 912.571l438.857-804.571c12.571-22.286 12-49.714-1.143-72s-37.143-36-62.857-36h-877.714c-25.714 0-49.714 13.714-62.857 36s-13.714 49.714-1.143 72l438.857 804.571c12.571 23.429 37.143 38.286 64 38.286s51.429-14.857 64-38.286z" />
<glyph unicode="&#xf08b;" glyph-name="sign-out" horiz-adv-x="896" d="M365.714 128c0-16 7.429-54.857-18.286-54.857h-182.857c-90.857 0-164.571 73.714-164.571 164.571v402.286c0 90.857 73.714 164.571 164.571 164.571h182.857c9.714 0 18.286-8.571 18.286-18.286 0-16 7.429-54.857-18.286-54.857h-182.857c-50.286 0-91.429-41.143-91.429-91.429v-402.286c0-50.286 41.143-91.429 91.429-91.429h164.571c14.286 0 36.571 2.857 36.571-18.286zM896 438.857c0-9.714-4-18.857-10.857-25.714l-310.857-310.857c-6.857-6.857-16-10.857-25.714-10.857-20 0-36.571 16.571-36.571 36.571v164.571h-256c-20 0-36.571 16.571-36.571 36.571v219.429c0 20 16.571 36.571 36.571 36.571h256v164.571c0 20 16.571 36.571 36.571 36.571 9.714 0 18.857-4 25.714-10.857l310.857-310.857c6.857-6.857 10.857-16 10.857-25.714z" />
</font></defs></svg> </font></defs></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
src/lib/fonts/icomoon.ttf
View File

Binary file not shown.

BIN
src/lib/fonts/icomoon.woff
View File

Binary file not shown.

2
src/lib/fonts/selection.json
View File

File diff suppressed because one or more lines are too long

22
src/lib/scss/icons.scss
View File

@ -1,10 +1,10 @@
@font-face { @font-face {
font-family: 'icomoon'; font-family: 'icomoon';
src: url('../fonts/icomoon.eot?y3pglu'); src: url('../fonts/icomoon.eot?nwgvq8');
src: url('../fonts/icomoon.eot?y3pglu#iefix') format('embedded-opentype'), src: url('../fonts/icomoon.eot?nwgvq8#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?y3pglu') format('truetype'), url('../fonts/icomoon.ttf?nwgvq8') format('truetype'),
url('../fonts/icomoon.woff?y3pglu') format('woff'), url('../fonts/icomoon.woff?nwgvq8') format('woff'),
url('../fonts/icomoon.svg?y3pglu#icomoon') format('svg'); url('../fonts/icomoon.svg?nwgvq8#icomoon') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: block; font-display: block;
@ -25,6 +25,18 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-cog:before {
content: "\f013";
}
.icon-gear:before {
content: "\f013";
}
.icon-arrow-right:before {
content: "\f061";
}
.icon-sign-out:before {
content: "\f08b";
}
.icon-close:before { .icon-close:before {
content: "\f00d"; content: "\f00d";
} }

44
src/routes/+layout.svelte
View File

@ -1,18 +1,16 @@
<script lang="ts"> <script lang="ts">
// The ordering of these imports is critical to your app working properly
import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
import '@skeletonlabs/skeleton/styles/skeleton.css';
import '$lib/scss/icons.scss' import '$lib/scss/icons.scss'
// Most of your app wide CSS should be put in this file // Most of your app wide CSS should be put in this file
import '../app.postcss'; import '../app.postcss';
import {alerts, globalstore} from "$lib/stores.js"; import {alerts, sessionstore} from '$lib/stores';
import { autoModeWatcher } from '@skeletonlabs/skeleton'; import { autoModeWatcher } from '@skeletonlabs/skeleton';
import { AppShell } from '@skeletonlabs/skeleton';
import Header from '$lib/components/Header.svelte';
import Sidebar from '$lib/components/Sidebar.svelte';
let alertsvar; let alertsvar;
let globalvars; let sessionvars;
function closeWarning(e) { function closeWarning(e) {
let index = e.target.dataset.index; let index = e.target.dataset.index;
alerts.update(function (data) { alerts.update(function (data) {
@ -23,8 +21,8 @@
alerts.subscribe((value) => { alerts.subscribe((value) => {
alertsvar = value; alertsvar = value;
}); });
globalstore.subscribe(value => { sessionstore.subscribe(value => {
globalvars = value; sessionvars = value;
}); });
</script> </script>
<style lang="scss"> <style lang="scss">
@ -41,19 +39,17 @@
} }
</style> </style>
<svelte:head>{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}</svelte:head> <svelte:head>{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}</svelte:head>
{#if typeof globalvars.user !== 'undefined' }
{#each alertsvar as alert, i}
<aside class="alert {alert.class}">
<!-- Icon -->
<div><i class="text-2xl icon icon-exclamation-triangle"></i></div>
<!-- Message -->
<p class="alert-message">{alert.text}</p>
<!-- Actions -->
<div class="alert-actions">
<i on:click={closeWarning} data-index={i} class="icon icon-close"></i>
</div>
</aside>
{/each}
{/if}
<slot /> {#if typeof sessionvars.authorization === 'undefined'}
<slot />
{:else}
<AppShell slotSidebarLeft="bg-surface-200 dark:bg-surface-800 w-1/6 ml-4 mb-4 p-4 rounded-l-xl" regionPage="bg-surface-100 dark:bg-surface-900 mr-4 mb-4 p-4 rounded-r-xl">
<svelte:fragment slot="header">
<Header/>
</svelte:fragment>
<svelte:fragment slot="sidebarLeft">
<Sidebar/>
</svelte:fragment>
<slot />
</AppShell>
{/if}

12
src/routes/+page.svelte
View File

@ -1,16 +1,14 @@
<script> <script>
import {globalstore} from "$lib/stores.js"; import {sessionstore} from "$lib/stores.js";
let globalvars; let sessionvars;
globalstore.subscribe(value => { sessionstore.subscribe(value => {
globalvars = value; sessionvars = value;
}); });
</script> </script>
{#if typeof globalvars.user !== 'undefined'} {#if typeof sessionvars.authorization === 'undefined'}
<h1>Welcome {globalvars.user.name}</h1>
{:else}
<h1 class="h1">Blackbird Chess</h1> <h1 class="h1">Blackbird Chess</h1>
<a href="/account/login" class="anchor">Go to login page</a> <a href="/account/login" class="anchor">Go to login page</a>
{/if} {/if}

46
src/routes/results/+page.svelte Normal file
View File

@ -0,0 +1,46 @@
<header class="flex justify-between items-center mb-2">
<div>
<i class="icon icon-arrow-left"></i>
<span>Go to round 1</span>
</div>
<div>
<h3 class="h3">Results for round 2</h3>
</div>
<div>
<span>Go to round 3</span>
<i class="icon icon-arrow-right"></i>
</div>
</header>
<section class="table-container">
<table class="table table-hover w-full">
<thead>
<tr>
<th class="text-left">White</th>
<th class="text-center">Result</th>
<th class="text-right">Black</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">Person A</td>
<td class="text-center">0-1</td>
<td class="text-right">Person B</td>
</tr>
<tr>
<td class="text-left">Person C</td>
<td class="text-center">&frac12;-&frac12;</td>
<td class="text-right">Person D</td>
</tr>
<tr>
<td class="text-left">Person E</td>
<td class="text-center">&frac12;-&frac12;</td>
<td class="text-right">Person F</td>
</tr>
<tr>
<td class="text-left">Person G</td>
<td class="text-center">0-1FF</td>
<td class="text-right">Person H</td>
</tr>
</tbody>
</table>
</section>