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

=layout grid

Browse source
This commit is contained in:
Miki 2023-12-29 17:28:35 +00:00
parent d7e9576bb7
commit 5cef5cf409
6 changed files with 71 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/lib/button.svelte
View file

@ -12,5 +12,6 @@
margin-right: 0.2rem; margin-right: 0.2rem;
margin-bottom: 8px; margin-bottom: 8px;
margin-top: 8px; margin-top: 8px;
width: fit-content;
} }
</style> </style>

2
frontend/src/lib/color.svelte
View file

@ -19,9 +19,11 @@
background-color: gray; background-color: gray;
border-radius: 8px; border-radius: 8px;
padding: 2px; padding: 2px;
width: fit-content;
} }
select { select {
font-size: 1.2rem; font-size: 1.2rem;
width: fit-content;
} }
</style> </style>

2
frontend/src/lib/input.svelte
View file

@ -18,6 +18,7 @@
background-color: gray; background-color: gray;
border-radius: 8px; border-radius: 8px;
padding: 2px; padding: 2px;
width: fit-content;
} }
input { input {
@ -27,5 +28,6 @@
margin-right: 0.1rem; margin-right: 0.1rem;
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
width: fit-content;
} }
</style> </style>

14
frontend/src/lib/number.svelte
View file

@ -1,14 +1,14 @@
<script> <script>
export let label export let label;
export let id export let id;
export let value export let value;
export let min = 1; export let min = 1;
export let max export let max;
export let step = 1; export let step = 1;
</script> </script>
<label class="label" for={id}>{label}</label> <label class="label" for={id}>{label}</label>
<input bind:value={value} id={id} type="number" min={min} max={max} step={step}/> <input bind:value {id} type="number" {min} {max} {step} />
<style> <style>
.label { .label {
@ -16,6 +16,7 @@
background-color: gray; background-color: gray;
border-radius: 8px; border-radius: 8px;
padding: 2px; padding: 2px;
width: fit-content;
} }
input { input {
@ -25,5 +26,6 @@
margin-right: 0.1rem; margin-right: 0.1rem;
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
width: fit-content;
} }
</style> </style>

6
frontend/src/lib/select.svelte
View file

@ -3,8 +3,8 @@
export let id; export let id;
export let options = []; export let options = [];
export let value; export let value;
export let optionStyle = ""; export let optionStyle = '';
export let selectStyle export let selectStyle;
</script> </script>
<label class="label" for={id}>{label}</label> <label class="label" for={id}>{label}</label>
@ -20,9 +20,11 @@
background-color: gray; background-color: gray;
border-radius: 8px; border-radius: 8px;
padding: 2px; padding: 2px;
width: fit-content;
} }
select { select {
font-size: 1.2rem; font-size: 1.2rem;
width: fit-content;
} }
</style> </style>

121
frontend/src/routes/setup/+page.svelte
View file

@ -180,61 +180,63 @@
<Header title="Heat setup" /> <Header title="Heat setup" />
<div class="container"> <div class="heat">
<div class="heat"> <div class="round">
<Select label="Round" id="round" bind:value={heat.round} options={$rounds} /> <Select label="Round" id="round" bind:value={heat.round} options={$rounds} />
</div>
<div class="number">
<Number label="Number" min="1" max="20" id="number" bind:value={heat.number} /> <Number label="Number" min="1" max="20" id="number" bind:value={heat.number} />
</div>
<div class="category">
<Select label="Category" id="category" options={$categories} bind:value={heat.category} /> <Select label="Category" id="category" options={$categories} bind:value={heat.category} />
</div>
<div class="duration">
<Number label="Duration" id="duration" min="5" max="60" step="5" bind:value={heat.timer} /> <Number label="Duration" id="duration" min="5" max="60" step="5" bind:value={heat.timer} />
</div> </div>
</div>
<hr /> <div class="controller">
<div class="controller"> <Button handleClick={addSurfers} label="+" />
<Button handleClick={addSurfers} label="+" /> <span class="surfers">{surfers}</span>
<span class="surfers">{surfers}</span> <Button handleClick={removeSurfers} label="-" />
<Button handleClick={removeSurfers} label="-" /> </div>
</div>
<div class="surfer">
{#each Array(surfers) as _, surfer} {#each Array(surfers) as _, surfer}
<div class="surfer"> <div class="name">
<Input label="Name" id="name{surfer}" bind:value={surfer_list[surfer].name} /> <Input label="Name" id="name{surfer}" bind:value={surfer_list[surfer].name} />
</div>
<div class="color">
<Color id="color{surfer}" label="Color" bind:value={surfer_list[surfer].color} /> <Color id="color{surfer}" label="Color" bind:value={surfer_list[surfer].color} />
</div> </div>
{/each} {/each}
</div> </div>
<Button handleClick={save} label="SAVE" /> <div class="controller">
<Button handleClick={resetHeat} label="RESET" /> <Button handleClick={save} label="SAVE" />
<Button handleClick={resetHeat} label="RESET" />
</div>
<hr /> <hr />
{#each heats as h, id} <div class="list">
<div class="surfer"> {#each heats as h, id}
<button <div class="surfer">
on:click={() => { <Button handleClick={() => setHeat(id)} label="{h.round} {h.number} {h.category}" />
setHeat(id); <Button handleClick={() => deleteHeat(id)} label="X" />
}}>{h.round} {h.number} {h.category}</button </div>
> {/each}
<button </div>
class="plus"
on:click={() => {
deleteHeat(id);
}}>X</button
>
</div>
{/each}
<!-- <hr> --> <!-- <hr> -->
<!-- <h2>{JSON.stringify(surfer_list)}</h2> --> <!-- <h2>{JSON.stringify(surfer_list)}</h2> -->
<style> <style>
.container {
background-color: lightgrey;
}
.heat { .heat {
background-color: lightgrey;
display: grid; display: grid;
grid-template-columns: auto 2fr auto 2fr; grid-template-columns: repeat(6, 1fr);
row-gap: 4px;
font-size: 1.3rem; font-size: 1.3rem;
margin-top: 8px; margin-top: 8px;
margin-bottom: 2px; margin-bottom: 2px;
@ -243,63 +245,46 @@
margin-right: auto; margin-right: auto;
} }
.heat input { .round {
font-size: 1.2rem; grid-column: 1 / 3;
border-radius: 6px;
margin-left: 0.1rem;
margin-right: 0.1rem;
padding-top: 2px;
padding-bottom: 2px;
} }
.heat select { .number {
font-size: 1.2rem; grid-column: 3 / 6;
border-radius: 6px;
margin-left: 0.1rem;
margin-right: 0.1rem;
padding-top: 2px;
padding-bottom: 2px;
} }
.label { .category {
border: 2px solid #555; grid-column: 1 / 3;
background-color: gray; }
border-radius: 8px;
padding: 2px; .duration {
grid-column: 3 / 6;
}
.controller {
background-color: lightgrey;
} }
.surfer { .surfer {
background-color: lightgrey;
font-size: 1.3rem; font-size: 1.3rem;
margin-top: 2px; margin-top: 2px;
margin-bottom: 2px; margin-bottom: 2px;
/* color: lightcyan; */ /* color: lightcyan; */
display: grid; display: grid;
grid-template-columns: auto auto auto auto; grid-template-columns: repeat(6, 1fr);
width: 100%; width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
border-radius: 8px; border-radius: 8px;
} }
.surfer input { .name {
font-size: 1.2rem; grid-column: 1 / 3;
border-radius: 6px;
margin-left: 0.1rem;
margin-right: 0.1rem;
padding-top: 2px;
padding-bottom: 2px;
} }
.surfer select { .color {
font-size: 1.2rem; grid-column: 3 / 6;
}
.plus {
border-radius: 8px;
margin-left: 0.2rem;
margin-right: 0.2rem;
margin-bottom: 8px;
margin-top: 8px;
} }
.surfers { .surfers {