Added app bar

This commit is contained in:
Jeroen De Meerleer 2023-08-30 21:48:08 +02:00
parent 8e948297f1
commit f5c265a376
Signed by: JeroenED
GPG Key ID: 28CCCB8F62BFADD6
2 changed files with 56 additions and 14 deletions

View File

@ -1,11 +1,8 @@
<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">
<AppBar background="bg-transparent" gridColumns="grid-cols-3" slotDefault="place-self-center" slotTrail="place-content-end">
<svelte:fragment slot="lead"><h1 class="text-3xl">Blackbird Chess</h1></svelte:fragment>
<p class="badge variant-filled-surface">24e herfstschaaktornooi</p>
<svelte:fragment slot="trail">
<button class="btn">
<i class="icon icon-gear"></i>
<span>Settings</span>
@ -14,12 +11,13 @@
<i class="icon icon-sign-out"></i>
<span>Logout</span>
</button>
</div>
</div>
</svelte:fragment>
</AppBar>
<script>
import {sessionstore, globalstore} from "$lib/stores.js";
import {goto} from "$app/navigation";
import { AppBar } from '@skeletonlabs/skeleton';
let sessionvars;
sessionstore.subscribe(value => {

View File

@ -23,22 +23,66 @@
<tbody>
<tr>
<td class="text-left">Person A</td>
<td class="text-center">0-1</td>
<td class="text-center">
<select class="select w-auto">
<option value="-">-</option>
<option value="1-0" selected>1-0</option>
<option value="5-5">&frac12;-&frac12;</option>
<option value="0-1">0-1</option>
<option value="1-0FF">1-0FF</option>
<option value="0-1FF">0-1FF</option>
<option value="5-5FF">&frac12;-&frac12;FF</option>
<option value="0-0FF">0-0FF</option>
</select>
</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-center">
<select class="select w-auto">
<option value="-">-</option>
<option value="1-0">1-0</option>
<option value="5-5" selected>&frac12;-&frac12;</option>
<option value="0-1">0-1</option>
<option value="1-0FF">1-0FF</option>
<option value="0-1FF">0-1FF</option>
<option value="5-5FF">&frac12;-&frac12;FF</option>
<option value="0-0FF">0-0FF</option>
</select>
</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-center">
<select class="select w-auto">
<option value="-">-</option>
<option value="1-0">1-0</option>
<option value="5-5">&frac12;-&frac12;</option>
<option value="0-1" selected>0-1</option>
<option value="1-0FF">1-0FF</option>
<option value="0-1FF">0-1FF</option>
<option value="5-5FF">&frac12;-&frac12;FF</option>
<option value="0-0FF">0-0FF</option>
</select>
</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-center">
<select class="select w-auto">
<option value="-" selected>-</option>
<option value="1-0">1-0</option>
<option value="5-5">&frac12;-&frac12;</option>
<option value="0-1">0-1</option>
<option value="1-0FF">1-0FF</option>
<option value="0-1FF">0-1FF</option>
<option value="5-5FF">&frac12;-&frac12;FF</option>
<option value="0-0FF">0-0FF</option>
</select>
</td>
<td class="text-right">Person H</td>
</tr>
</tbody>