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

View File

@ -23,22 +23,66 @@
<tbody> <tbody>
<tr> <tr>
<td class="text-left">Person A</td> <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> <td class="text-right">Person B</td>
</tr> </tr>
<tr> <tr>
<td class="text-left">Person C</td> <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> <td class="text-right">Person D</td>
</tr> </tr>
<tr> <tr>
<td class="text-left">Person E</td> <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> <td class="text-right">Person F</td>
</tr> </tr>
<tr> <tr>
<td class="text-left">Person G</td> <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> <td class="text-right">Person H</td>
</tr> </tr>
</tbody> </tbody>