aey/strand
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Display Arc on summary

Browse source
This commit is contained in:
Anders Englöf Ytterström 2025-04-16 00:22:04 +02:00
parent 35366651ea
commit 82475127ed
1 changed files with 108 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

205
src/lib/Summary.svelte
View file

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