streaming/Priority
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

+ new bootstrap layout

Browse source
This commit is contained in:
Miki 2024-01-12 16:46:50 +01:00
parent fca2c7e2d1
commit 33433bfc08
2 changed files with 70 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
backend.light/backend.light
View file

Binary file not shown.

105
frontend.light/src/routes/priority/+page.svelte
View file

@ -179,7 +179,20 @@
</script>
<svelte:head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</svelte:head>
{#if start}
<div class="container text-center">
<div class="row">
<div class="col">
<button class="button" on:click={StopHeat}>STOP</button>
</div>
</div>
</div>
<ul>
{#each Array($surfersCount) as _, id}
<li style="--height:{setup_height}vh">
@ -210,43 +223,60 @@
</li>
{/each}
</ul>
<div class="footer" style="--height:{footer_height}vh">
<button class="button" on:click={StopHeat}>STOP</button>
</div>
{:else}
<ul>
{#each Array($surfersCount) as _, id}
<li style="--height:{setup_height}vh">
<div class="priority" id="color">
<select
name="color{id}"
{id}
bind:value={$surfers[id].color}
style="background-color: {$surfers[id].color};"
>
{#each $colors as color}
<option value={color} style="background-color: {color}">{color}</option>
{/each}
</select>
</div>
<div class="color" style:background-color={$surfers[id].color}><input type="text" bind:value={$surfers[id].name}></div>
</li>
{/each}
</ul>
<div
class="footer"
style="--height:{footer_height}vh"
>
<div class="control">
<button class="button" on:click={AddSurfer}>+</button>
{:else}
<div class="container text-center">
<div class="row">
<div class="col">
<button class="mybutton" on:click={AddSurfer}>+</button>
<button class="display">{$surfersCount}</button>
<button class="button" on:click={RemSurfer}>-</button>
<button class="mybutton" on:click={RemSurfer}>-</button>
</div>
<button class="button" on:click={StartHeat}>START</button>
<div class="command">
<button class="button" on:click={ResetLocalCache}>Reset</button>
<div class="col">
<button class="mybutton" on:click={StartHeat}>START</button>
</div>
<div class="col">
<button class="mybutton" on:click={ResetLocalCache}>Reset</button>
</div>
</div>
</div>
<table class="table is-hoverable is-striped is-bordered is-fullwidth">
<thead>
<tr>
<th> Name </th>
<td> Color </td>
</tr>
</thead>
<tbody>
{#each Array($surfersCount) as _, id}
<tr>
<th><input class="input" type="text" bind:value={$surfers[id].name}/></th>
<td>
<div class="select">
<select
name="color{id}"
{id}
bind:value={$surfers[id].color}
style="background-color: {$surfers[id].color};"
>
{#each $colors as color}
<option value={color} style="background-color: {color}">{color}</option>
{/each}
</select>
</div>
</td>
</tr>
{:else}
<tr>
<th />
<td />
</tr>
{/each}
</tbody>
</table>
{/if}
<style>
@ -319,7 +349,12 @@
font-size: 5vmin;
}
.footer {
.card {
background-color: aquamarine;
border-radius: 6%;
}
.myfooter {
display: inline-flex;
bottom: 0;
background-color: darkgrey;
@ -346,7 +381,7 @@
font-size: 2.5vmin;
}
.button {
.mybutton {
margin-left: 1vmin;
margin-right: 1vmin;
border-radius: 4px;