Display Arc on summary
This commit is contained in:
parent
35366651ea
commit
82475127ed
1 changed files with 108 additions and 97 deletions
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import { gym, cardio, diet, currentView } from "./store";
|
||||
import Arc from "./Arc.svelte";
|
||||
let gymProgress = $derived($gym.filter((c) => c.completed).length);
|
||||
let cardioProgress = $derived($cardio.filter((c) => c.completed).length);
|
||||
let dietProgress = $derived($diet.filter((c) => c.completed).length);
|
||||
|
|
@ -11,58 +12,58 @@
|
|||
</script>
|
||||
|
||||
<main>
|
||||
<h1>Dags att komma i form!</h1>
|
||||
<div class="progress">
|
||||
<h1>Dags att komma i form!</h1>
|
||||
<Arc />
|
||||
<div class="progress">
|
||||
<h2>Styrketräning, 3d/v under 11 veckor</h2>
|
||||
<div class="progress-row">
|
||||
<progress class="gym" value={gymProgress} max={$gym.length}></progress>
|
||||
<i>{gymProgress} / {$gym.length}</i>
|
||||
<button class="clickable gym" onclick={() => navigate(1)}>+</button>
|
||||
<progress class="gym" value={gymProgress} max={$gym.length}></progress>
|
||||
<i>{gymProgress} / {$gym.length}</i>
|
||||
<button class="clickable gym" onclick={() => navigate(1)}>+</button>
|
||||
</div>
|
||||
<h2>Konditionsträning, 3d/v under 7 veckor</h2>
|
||||
<div class="progress-row">
|
||||
<progress class="cardio" value={cardioProgress} max={$cardio.length}></progress>
|
||||
<i>{cardioProgress} / {$cardio.length}</i>
|
||||
<button class="clickable cardio" onclick={() => navigate(2)}>+</button>
|
||||
<progress class="cardio" value={cardioProgress} max={$cardio.length}
|
||||
></progress>
|
||||
<i>{cardioProgress} / {$cardio.length}</i>
|
||||
<button class="clickable cardio" onclick={() => navigate(2)}>+</button>
|
||||
</div>
|
||||
<h2>Diet, feb–maj</h2>
|
||||
<div class="progress-row">
|
||||
<progress class="diet" value={dietProgress} max={dietTotal}></progress>
|
||||
<i>{dietProgress} / {dietTotal}</i>
|
||||
<button class="clickable diet" onclick={() => navigate(3)}>+</button>
|
||||
<progress class="diet" value={dietProgress} max={dietTotal}></progress>
|
||||
<i>{dietProgress} / {dietTotal}</i>
|
||||
<button class="clickable diet" onclick={() => navigate(3)}>+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-button">
|
||||
<button class="clickable info" onclick={() => navigate(4)}>
|
||||
Va?
|
||||
</button>
|
||||
</div>
|
||||
<p class="madeby">Skapad av <a href="https://madr.se">Anders</a></p>
|
||||
</div>
|
||||
<div class="top-button">
|
||||
<button class="clickable info" onclick={() => navigate(4)}> Va? </button>
|
||||
</div>
|
||||
<p class="madeby">Skapad av <a href="https://madr.se">Anders</a></p>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.madeby {
|
||||
text-align: center;
|
||||
font-size: 0.75em;
|
||||
.madeby {
|
||||
text-align: center;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
main {
|
||||
background: #222;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
progress {
|
||||
&.cardio {
|
||||
--pcolor: #5dc5f8;
|
||||
}
|
||||
|
||||
main {
|
||||
background: #222;
|
||||
color: #fff;
|
||||
&.diet {
|
||||
--pcolor: #35d450;
|
||||
}
|
||||
|
||||
progress {
|
||||
&.cardio {
|
||||
--pcolor: #5dc5f8;
|
||||
}
|
||||
|
||||
&.diet {
|
||||
--pcolor: #35d450;
|
||||
}
|
||||
|
||||
&.gym {
|
||||
--pcolor: #f62b5a;
|
||||
}
|
||||
&.gym {
|
||||
--pcolor: #f62b5a;
|
||||
}
|
||||
}
|
||||
|
||||
progress,
|
||||
|
|
@ -80,9 +81,9 @@
|
|||
}
|
||||
|
||||
::-webkit-progress-bar {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -101,79 +102,89 @@
|
|||
Sincerely, FUCK YOU, Chrome dev team.
|
||||
*/
|
||||
::-moz-progress-bar {
|
||||
background-color: var(--pcolor);
|
||||
background-image: linear-gradient(rgba(255,255,255,0.25) 0, rgba(255,255,255,0.25) 4px, var(--pcolor) 4px, var(--pcolor));
|
||||
border: 0.25rem solid var(--pcolor);
|
||||
border-width: 0.25rem 0.5rem;
|
||||
border-radius: var(--br);
|
||||
background-color: var(--pcolor);
|
||||
background-image: linear-gradient(
|
||||
rgba(255, 255, 255, 0.25) 0,
|
||||
rgba(255, 255, 255, 0.25) 4px,
|
||||
var(--pcolor) 4px,
|
||||
var(--pcolor)
|
||||
);
|
||||
border: 0.25rem solid var(--pcolor);
|
||||
border-width: 0.25rem 0.5rem;
|
||||
border-radius: var(--br);
|
||||
}
|
||||
|
||||
::-webkit-progress-value {
|
||||
background-color: var(--pcolor);
|
||||
background-image: linear-gradient(rgba(255,255,255,0.25) 0, rgba(255,255,255,0.25) 4px, var(--pcolor) 4px, var(--pcolor));
|
||||
border: 0.25rem solid var(--pcolor);
|
||||
border-width: 0.25rem 0.5rem;
|
||||
border-radius: var(--br);
|
||||
background-color: var(--pcolor);
|
||||
background-image: linear-gradient(
|
||||
rgba(255, 255, 255, 0.25) 0,
|
||||
rgba(255, 255, 255, 0.25) 4px,
|
||||
var(--pcolor) 4px,
|
||||
var(--pcolor)
|
||||
);
|
||||
border: 0.25rem solid var(--pcolor);
|
||||
border-width: 0.25rem 0.5rem;
|
||||
border-radius: var(--br);
|
||||
}
|
||||
|
||||
.progress {
|
||||
--pcolor: #f00;
|
||||
--h: 1.66rem;
|
||||
--br: calc(var(--h) / 2);
|
||||
--mg: 0.75rem;
|
||||
--border: 3px solid #444;
|
||||
margin: 2rem 0;
|
||||
border: var(--border);
|
||||
border-radius: 1rem;
|
||||
padding-bottom: var(--mg);
|
||||
--pcolor: #f00;
|
||||
--h: 1.66rem;
|
||||
--br: calc(var(--h) / 2);
|
||||
--mg: 0.75rem;
|
||||
--border: 3px solid #444;
|
||||
margin: 2rem 0;
|
||||
border: var(--border);
|
||||
border-radius: 1rem;
|
||||
padding-bottom: var(--mg);
|
||||
|
||||
> h2 {
|
||||
padding: 0 1rem;
|
||||
margin: var(--mg) 0;
|
||||
font-size: 1em;
|
||||
line-height: 1.25;
|
||||
> h2 {
|
||||
padding: 0 1rem;
|
||||
margin: var(--mg) 0;
|
||||
font-size: 1em;
|
||||
line-height: 1.25;
|
||||
|
||||
* + & {
|
||||
border-top: var(--border);
|
||||
padding-top: var(--mg);
|
||||
}
|
||||
* + & {
|
||||
border-top: var(--border);
|
||||
padding-top: var(--mg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-row {
|
||||
position: relative;
|
||||
position: relative;
|
||||
|
||||
> i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-style: normal;
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
pointer-events: none;
|
||||
> i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-style: normal;
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
> button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0.5rem;
|
||||
transform: translateY(-50%);
|
||||
color: #fff;
|
||||
background-color: var(--btn-bg);
|
||||
padding: 0.25em 0.66em;
|
||||
|
||||
&.cardio {
|
||||
--btn-bg: #5dc5f8;
|
||||
}
|
||||
|
||||
> button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0.5rem;
|
||||
transform: translateY(-50%);
|
||||
color: #fff;
|
||||
background-color: var(--btn-bg);
|
||||
padding: 0.25em 0.66em;
|
||||
|
||||
&.cardio {
|
||||
--btn-bg: #5dc5f8;
|
||||
}
|
||||
|
||||
&.diet {
|
||||
--btn-bg: #35d450;
|
||||
}
|
||||
|
||||
&.gym {
|
||||
--btn-bg: #f62b5a;
|
||||
}
|
||||
&.diet {
|
||||
--btn-bg: #35d450;
|
||||
}
|
||||
|
||||
&.gym {
|
||||
--btn-bg: #f62b5a;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue