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-bottom: 8px;
margin-top: 8px;
width: fit-content;
}
</style>

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

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

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

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

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

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

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

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

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

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