max 6 lines

This commit is contained in:
Miki 2024-01-09 15:59:05 +01:00
parent f4d8320817
commit b50f1f061e

View file

@ -11,9 +11,10 @@
{ color: 'gray', priority: 'P' }, { color: 'gray', priority: 'P' },
{ color: 'gray', priority: '4' }, { color: 'gray', priority: '4' },
{ color: 'gray', priority: '3' }, { color: 'gray', priority: '3' },
{ color: 'gray', priority: '6' },
{ color: 'gray', priority: '5' }, { color: 'gray', priority: '5' },
]; ];
$: surfers = 5; $: surfers = 6;
$: if (saved && surfer) { $: if (saved && surfer) {
window.sessionStorage.setItem('priority', JSON.stringify(surfer)); window.sessionStorage.setItem('priority', JSON.stringify(surfer));
@ -47,7 +48,8 @@
{:else} {:else}
<div class="priority" id="n">{surfer[id].priority}</div> <div class="priority" id="n">{surfer[id].priority}</div>
{/if} {/if}
<div class="color" style:background-color={surfer[id].color}></div> <div class="color" style:background-color={surfer[id].color}>
</div>
</li> </li>
{/each} {/each}
</ul> </ul>
@ -60,6 +62,7 @@
<li style="--height:{setup_height}vh"> <li style="--height:{setup_height}vh">
{#if surfer[id].priority == 'P'} {#if surfer[id].priority == 'P'}
<div class="priority" id="p"><a href="/">{surfer[id].priority}</a></div> <div class="priority" id="p"><a href="/">{surfer[id].priority}</a></div>
<!-- <span>{footer_height} - {setup_height}</span> -->
{:else} {:else}
<div class="priority" id="n">{surfer[id].priority}</div> <div class="priority" id="n">{surfer[id].priority}</div>
{/if} {/if}
@ -68,22 +71,22 @@
{/each} {/each}
</ul> </ul>
<div class="footer" style="--height:{footer_height}vh"> <div class="footer" style="--height:{footer_height}vh">
<span>{footer_height} - {setup_height}</span> <!-- <span>{footer_height} - {setup_height}</span>
<span style:padding-left="20px"></span> <span style:padding-left="20px"></span>
{#each Array(surfers) as _, id} {#each Array(surfers) as _, id}
<span style:padding-left="20px"></span><span>{surfer[id].color}</span> <span style:padding-left="20px"></span><span>{surfer[id].color}</span>
{/each} {/each}
<br> <br> -->
<Button label="+" handleClick={() => {if (surfers < 5) surfers += 1;}} /> <Button label="+" handleClick={() => {if (surfers < 6) surfers += 1;}} />
<span class="surfers">{surfers}</span> <Button label={surfers} />
<Button label="-" handleClick={() => {if (surfers > 2) surfers -= 1;}} /> <Button label="-" handleClick={() => {if (surfers > 2) surfers -= 1;}} />
{#each Array(surfers) as _, id} {#each Array(surfers) as _, id}
<span style:padding-left="16px"></span> <span style:padding-left="1vmin"></span>
<Color id="color{id}" label="Color-{id+1}" bind:value={surfer[id].color} /> <Color id="color{id}" label="Color-{id+1}" bind:value={surfer[id].color} />
{/each} {/each}
<span style:padding-left="16px"></span> <span style:padding-left="1vmin"></span>
<Button label="Reset" handleClick={() => {saved = false; window.sessionStorage.clear(); location.reload();}} /> <Button label="Reset" handleClick={() => {saved = false; window.sessionStorage.clear(); location.reload();}} />
<span style:padding-left="16px"></span> <span style:padding-left="1vmin"></span>
<Button label="START" handleClick={() => {start = true;}} /> <Button label="START" handleClick={() => {start = true;}} />
</div> </div>
{/if} {/if}
@ -116,6 +119,7 @@
margin-top: 0.2vh; margin-top: 0.2vh;
margin-bottom: 0.2vh; margin-bottom: 0.2vh;
overflow: hidden; overflow: hidden;
height: var(--height);
} }
.priority { .priority {
@ -143,12 +147,11 @@
} }
.footer { .footer {
position: fixed; display: fixed;
bottom: 0; bottom: 0;
background-color: aqua; background-color: darkgrey;
border: 2px solid black; /* border: 2px solid black; */
width: 100%; width: 100%;
height: var(--height); height: var(--height);
} }
</style> </style>