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

=test grid

Browse source
This commit is contained in:
Linux User 2024-01-03 17:16:28 +00:00
parent 259640c94c
commit 9c5781f926
1 changed files with 49 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
frontend/src/routes/pri/+page.svelte
View file

@ -1,59 +1,73 @@
<div class="header">
<div class="select">
<select name="heats" id="heats">
<option value="uno">Uno</option>
<option value="due">Due</option>
</select>
</div>
<div class="timer">
<h2>00:00</h2>
</div>
<div class="button">
<button>START</button>
</div>
</div>
<script>
const lines = 5;
</script>
<div class="container">
<div class="line">
<div class="pri">
<h1>P</h1>
<div class="header">
<div class="select">
<select name="heats" id="heats">
<option value="uno">Uno</option>
<option value="due">Due</option>
</select>
</div>
<div class="color">
<div class="timer">
00:00
</div>
<div class="button">
<button>START</button>
</div>
</div>
{#each Array(lines) as _}
<div class="line">
<div class="pri">
<h1>P</h1>
</div>
<div class="color">
</div>
</div>
{/each}
</div>
<style>
.container {
display: grid;
grid-gap: 5px;
grid-auto-flow: row;
}
.header {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 3rem;
grid-template-columns: 1fr 3fr 1fr;
grid-template-areas:
"select timer button";
grid-template-rows: 4rem;
align-items: center;
background-color: darkblue;
}
.select {
grid-column: 1/2;
grid-area: select;
justify-self: start;
margin-left: 5px;
}
.timer {
grid-column: 2/5;
justify-self: center;
grid-area: timer;
text-align: center;
color: beige;
font-size: 3.5rem;
}
.button {
grid-column: 5/6;
grid-area: button;
justify-self: end;
}
.container {
display: grid;
margin-right: 5px;
}
.line {
display: grid;
grid-gap: 4px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 4rem;
grid-template-areas:
@ -65,10 +79,11 @@
grid-area: pri;
width: 100%;
height: 100%;
background-color: yellow;
align-items: center;
justify-content: center;
justify-self: start;
background-color: red;
text-justify: center;
text-align: center;
font-size: 1.5rem;
border-radius: 10px;
}
.color {