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

35
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,8 +12,9 @@
</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>
@ -21,7 +23,8 @@
</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}
></progress>
<i>{cardioProgress} / {$cardio.length}</i> <i>{cardioProgress} / {$cardio.length}</i>
<button class="clickable cardio" onclick={() => navigate(2)}>+</button> <button class="clickable cardio" onclick={() => navigate(2)}>+</button>
</div> </div>
@ -31,13 +34,11 @@
<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>
@ -102,7 +103,12 @@
*/ */
::-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(
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: 0.25rem solid var(--pcolor);
border-width: 0.25rem 0.5rem; border-width: 0.25rem 0.5rem;
border-radius: var(--br); border-radius: var(--br);
@ -110,7 +116,12 @@
::-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(
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: 0.25rem solid var(--pcolor);
border-width: 0.25rem 0.5rem; border-width: 0.25rem 0.5rem;
border-radius: var(--br); border-radius: var(--br);