Add progress bars to summary page
This commit is contained in:
parent
b34bb19fb8
commit
9cb8a75f74
7 changed files with 256 additions and 181 deletions
6
README
6
README
|
|
@ -14,7 +14,5 @@ Stack
|
|||
-----
|
||||
|
||||
Vanilla Svelte, with a plugin for persistent store using
|
||||
localStorage.
|
||||
|
||||
As an academic exercise, this might as well be ported to a
|
||||
PWA by introducing a webappmanifest and a ServiceWorker.
|
||||
localStorage, as well as some PWA addons for better offline
|
||||
use on mobile devices.
|
||||
|
|
|
|||
|
|
@ -420,7 +420,7 @@ const diet = [
|
|||
{ date: "2025-03-17", completed: false },
|
||||
{ date: "2025-03-18", completed: false },
|
||||
{ date: "2025-03-19", completed: false },
|
||||
{ date: "2025-03-10", completed: false },
|
||||
{ date: "2025-03-20", completed: false },
|
||||
{ date: "2025-03-21", completed: false },
|
||||
{ date: "2025-03-22", completed: false },
|
||||
{ date: "2025-03-23", completed: false },
|
||||
|
|
@ -493,9 +493,7 @@ const diet = [
|
|||
{ date: "2025-05-29", completed: false },
|
||||
{ date: "2025-05-30", completed: false },
|
||||
{ date: "2025-05-31", completed: false },
|
||||
]
|
||||
;
|
||||
|
||||
];
|
||||
export default {
|
||||
cardio,
|
||||
gym,
|
||||
|
|
|
|||
17
src/app.css
17
src/app.css
|
|
@ -14,6 +14,21 @@ body {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.top-button {
|
||||
position: absolute;
|
||||
top: 0.25em;
|
||||
right: 0.25em;
|
||||
button {
|
||||
padding: 1em;
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(95%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
|
|
@ -26,7 +41,7 @@ main {
|
|||
h1 {
|
||||
font-size: 3em;
|
||||
line-height: 1.1;
|
||||
margin: 1.25em 0;
|
||||
margin: 0.2em 0;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
|
||||
article:has(.red) {
|
||||
pointer-events: none;
|
||||
opacity: 0.33;
|
||||
opacity: 0.33 !important;
|
||||
}
|
||||
|
||||
article {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,12 @@
|
|||
</script>
|
||||
|
||||
<main>
|
||||
<div class="top-button">
|
||||
<button class="clickable" on:click={() => back()}>
|
||||
Tillbaka
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="infobox">
|
||||
<h1>Hej, Jag har en 40-årskris xD</h1>
|
||||
<p><em>Dessutom hägrar en vecka på Sweden rock festival.</em>
|
||||
|
|
@ -57,9 +63,6 @@
|
|||
</blockquote>
|
||||
<p><strong>Mål: Följa ovan kostråd 16 veckor, med fördefinierade cheat meals.</strong></p>
|
||||
</div>
|
||||
<button class="clickable" on:click={back()}>
|
||||
Tillbaka
|
||||
</button>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -12,67 +12,128 @@
|
|||
|
||||
<main>
|
||||
<h1>Dags att komma i form!</h1>
|
||||
<div class="cards">
|
||||
<button class="clickable gym" onclick={() => navigate(1)}>
|
||||
<i>{gymProgress}</i> / {$gym.length} <span>Styrketräning</span>
|
||||
</button>
|
||||
<button class="clickable cardio" onclick={() => navigate(2)}>
|
||||
<i>{cardioProgress}</i> / {$cardio.length}
|
||||
<span>Konditionsträning</span>
|
||||
</button>
|
||||
<button class="clickable diet" onclick={() => navigate(3)}>
|
||||
<i>{dietProgress}</i> / {dietTotal}
|
||||
<span>Dietdagar</span>
|
||||
</button>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-button">
|
||||
<button class="clickable info" onclick={() => navigate(4)}>
|
||||
<i>?</i>
|
||||
<span>Va?</span>
|
||||
Va?
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.cards {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1em;
|
||||
|
||||
button {
|
||||
padding: 1.5em;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(95%);
|
||||
}
|
||||
}
|
||||
|
||||
.gym {
|
||||
background-color: #f62b5a;
|
||||
main {
|
||||
background: #222;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cardio {
|
||||
background-color: #5dc5f8;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.diet {
|
||||
background-color: #35d450;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.info {
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 2em;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
span {
|
||||
progress {
|
||||
--pcolor: #f00;
|
||||
--h: 1.5rem;
|
||||
--br: calc(var(--h) / 2);
|
||||
appearance: none;
|
||||
height: var(--h);
|
||||
display: block;
|
||||
width: calc(100% - 2rem);
|
||||
border: none;
|
||||
background-color: rgba(128, 128, 128, 0.25);
|
||||
margin: 0 1rem;
|
||||
border-radius: var(--br);
|
||||
|
||||
&::-webkit-progress-value,
|
||||
&::-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);
|
||||
}
|
||||
|
||||
&.cardio {
|
||||
--pcolor: #5dc5f8;
|
||||
}
|
||||
|
||||
&.diet {
|
||||
--pcolor: #35d450;
|
||||
}
|
||||
|
||||
&.gym {
|
||||
--pcolor: #f62b5a;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
--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;
|
||||
|
||||
* + & {
|
||||
border-top: var(--border);
|
||||
padding-top: var(--mg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-row {
|
||||
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;
|
||||
}
|
||||
|
||||
> 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export default defineConfig({
|
|||
includeAssets: ["icon512_rounded.png", "icon512_maskable.png"],
|
||||
manifest: {
|
||||
theme_color: "#8936FF",
|
||||
background_color: "#2EC6FE",
|
||||
background_color: "#222",
|
||||
icons: [
|
||||
{
|
||||
purpose: "maskable",
|
||||
|
|
@ -28,7 +28,7 @@ export default defineConfig({
|
|||
],
|
||||
orientation: "portrait",
|
||||
display: "standalone",
|
||||
dir: "auto",
|
||||
dir: "ltr",
|
||||
lang: "sv-SE",
|
||||
name: "Strand",
|
||||
short_name: "strand",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue