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

Improve design

Browse source
This commit is contained in:
Anders Englöf Ytterström 2025-02-06 11:34:06 +01:00
parent 2c52b9c266
commit 1fd4b6794a
7 changed files with 289 additions and 228 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/App.svelte
View file

@ -1,41 +1,31 @@
<script lang="ts">
// import svelteLogo from "./assets/svelte.svg";
// import viteLogo from "/vite.svg";
import { currentView } from "./lib/store";
import Summary from "./lib/Summary.svelte";
import GymProgress from "./lib/GymProgress.svelte";
import CardioProgress from "./lib/CardioProgress.svelte";
import DietProgress from "./lib/DietProgress.svelte";
// import svelteLogo from "./assets/svelte.svg";
// import viteLogo from "/vite.svg";
import { currentView } from "./lib/store";
import Summary from "./lib/Summary.svelte";
import GymProgress from "./lib/GymProgress.svelte";
import CardioProgress from "./lib/CardioProgress.svelte";
import DietProgress from "./lib/DietProgress.svelte";
import Info from "./lib/Info.svelte"
</script>
<div class="chrome">
<main>
{#if $currentView === 0}
<Summary />
{/if}
{#if $currentView === 1}
<GymProgress />
{/if}
{#if $currentView === 2}
<CardioProgress />
{/if}
{#if $currentView === 3}
<DietProgress />
{/if}
</main>
{#if $currentView === 0}
<Summary />
{/if}
{#if $currentView === 1}
<GymProgress />
{/if}
{#if $currentView === 2}
<CardioProgress />
{/if}
{#if $currentView === 3}
<DietProgress />
{/if}
{#if $currentView === 4}
<Info />
{/if}
</div>
<style>
.chrome {
height: 100vh;
display: flex;
flex-direction: column-reverse;
main {
flex: 1;
overflow: auto;
text-align: center;
padding: 0.5em;
}
}
</style>

129
src/app.css
View file

@ -1,11 +1,9 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
font-family: "Open Sans", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
color-scheme: light dark;
font-synthesis: none;
text-rendering: optimizeLegibility;
@ -13,56 +11,109 @@
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
main {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: #e0e0e0;
box-sizing: border-box;
padding: 1em;
}
.card {
padding: 2em;
h1 {
font-size: 3em;
line-height: 1.1;
margin: 1.25em 0;
text-wrap: balance;
padding-left: 0.5em;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
appearance: none;
border-radius: 0;
border: 0;
padding: 0;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
article {
opacity: 0.8;
label {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "name name" "date input";
padding: 1em;
input {
grid-area: input;
}
strong {
grid-area: name;
}
small {
grid-area: date;
}
}
}
article:has(:checked) {
opacity: 0.25;
+ article:not(:has(:checked)) {
opacity: 1;
}
}
a:hover {
color: #747bff;
.clickable {
box-shadow: 0 3px 0 rgba(0, 0, 0, .75);
border: 2px solid #222;
border-radius: 8px;
background-color: #f1f1f1;
display: block;
&:hover, &:focus {
background-color: #e1e1e1;
}
button {
background-color: #f9f9f9;
&:active {
transform: translateY(1px);
}
}
.back {
background-color: #e0e0e0;
color: #000;
&:hover, &:focus {
background-color: #d0d0d0;
}
}
.calendar {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1.75em 0.5em;
}
header {
display: flex;
padding: 1em;
gap: 0.5em;
align-items: center;
button {
padding: 0.5em 1em;
}
h1 {
font-size: 1.25em;
flex: 1;
margin: 0;
}
}

48
src/lib/CardioProgress.svelte
View file

@ -9,15 +9,17 @@
};
</script>
<div>
<button onclick={() => back()}>&lt;-</button>
<header>
<button class="clickable back" onclick={() => back()}>←</button>
<h1>
Cardio {done}/{remaining}
</h1>
<progress max={remaining} value={done}></progress>
</header>
<main>
<progress hidden max={remaining} value={done}></progress>
<div class="calendar">
{#each $cardio as col, i}
<article>
<article class="clickable">
<label>
<input type="checkbox" bind:checked={col.completed} />
<strong
@ -30,42 +32,14 @@
</article>
{/each}
</div>
</div>
</main>
<style>
.calendar {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5em 0.25em;
main {
background-color: #5dc5f8;
border-top: 4px solid rgba(0, 0, 0, 0.2)
}
article {
border: 2px solid #aaa;
border-radius: 7px;
label {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "input name" "input date";
padding: 1.5em;
input {
grid-area: input;
}
strong {
grid-area: name;
}
small {
grid-area: date;
}
}
}
article:has(:checked) {
border-color: #080;
background-color: #afa;
}
article:nth-child(1) {
grid-column: 2;
}

71
src/lib/DietProgress.svelte
View file

@ -6,13 +6,22 @@
const back = () => {
currentView.update((_) => 0);
};
const M = ["jan", "feb", "mar", "apr", "maj", "jun", "jul", "aug", "sep", "okt", "nov", "dec"]
const dm = (date) => {
const d = new Date(date)
return `${d.getDate()} ${M[d.getMonth()]}`
}
</script>
<div>
<button onclick={() => back()}>&lt;-</button>
<header>
<button class="clickable back" onclick={() => back()}>←</button>
<h1>
Diet {done}/{dayscount}
</h1>
</header>
<main>
<ul>
<li title="Nothing except meals.">Stop snacking.</li>
<li
@ -33,11 +42,11 @@
<p>
-- <a href="https://www.youtube.com/watch?v=fB_ESE2XwOU">Alan Thrall</a>
</p>
<progress max={dayscount} value={done}></progress>
<progress max={dayscount} hidden value={done}></progress>
<div class="calendar">
{#each $diet.days as day, i}
<article>
<article class="clickable">
{#if day.date in $diet.reds}
<div class="red">
{$diet.reds[day.date]}
@ -45,25 +54,35 @@
{:else}
<label>
<input type="checkbox" bind:checked={day.completed} />
{day.date}
{dm(day.date)}
</label>
{/if}
</article>
{/each}
</div>
</div>
</main>
<style>
main {
background-color: #35d450;
border-top: 4px solid rgba(0, 0, 0, 0.2)
}
.calendar {
display: flex;
flex-direction: column;
gap: 0.5em 0.25em;
grid-template-columns: repeat(7, 1fr);
}
.red {
background: #ddd;
color: #888;
padding: 1.5em;
padding: 0.75em;
overflow: hidden;
font-size: 6px;
}
article:has(.red) {
pointer-events: none;
opacity: 0.5;
}
ul {
@ -76,33 +95,21 @@
}
article {
border: 2px solid #aaa;
border-radius: 7px;
> * {
padding: 0.75em;
text-align: center;
label {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "input name" "input date";
padding: 1.5em;
&:first-word {
font-size: 2em;
display: block;
}
input {
grid-area: input;
}
strong {
grid-area: name;
}
small {
grid-area: date;
position: absolute;
opacity: 0;
pointer-events: none;
}
}
}
article:has(:checked) {
border-color: #080;
background-color: #afa;
}
article:nth-child(1) {
grid-column: 3;
}
</style>

46
src/lib/GymProgress.svelte
View file

@ -8,15 +8,17 @@
};
</script>
<div>
<button onclick={() => back()}>&lt;-</button>
<header>
<button class="clickable back" onclick={() => back()}>←</button>
<h1>
Gym {done}/{remaining}
</h1>
<progress max={remaining} value={done}></progress>
</header>
<main>
<progress hidden max={remaining} value={done}></progress>
<div class="calendar">
{#each $gym as col}
<article>
<article class="clickable">
<label>
<input type="checkbox" bind:checked={col.completed} />
<strong>{col.name}</strong>
@ -25,40 +27,12 @@
</article>
{/each}
</div>
</div>
</main>
<style>
.calendar {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5em 0.25em;
}
article {
border: 2px solid #aaa;
border-radius: 7px;
label {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "input name" "input date";
padding: 1.5em;
input {
grid-area: input;
}
strong {
grid-area: name;
}
small {
grid-area: date;
}
}
}
article:has(:checked) {
border-color: #080;
background-color: #afa;
main {
background-color: #f62b5a;
border-top: 4px solid rgba(0, 0, 0, 0.2)
}
article:nth-child(1) {

51
src/lib/Info.svelte Normal file
View file

@ -0,0 +1,51 @@
<script lang="ts">
import { currentView } from "./store";
const back = () => {
currentView.update((_) => 0);
};
</script>
<main>
<div class="infobox">
<h1>Hej, Jag har en 40-årskris.</h1>
<p><em>Dessutom hägrar en vecka på Sweden rock festival.</em></p>
<p>Ryggen och benen behöver vara i form.</p>
<p>
För att göra träningen litet mer belönande skapades denna app för att ge mig
möjlighet att bocka i allt jag gör. Jag planerar att göra nedanstående:
</p>
<ul>
<li>Börja löpträna. Mål: 5km löpning efter 7 veckor.</li>
<li>
Återuppta styrkelyft. Mål: 11 veckors träning, med avslutande toppning och
maxsinglar.
</li>
<li>
Inleda diet. Äta fasta måltider och skippa fika, snacks, godis och
sockerläsk.
</li>
</ul>
</div>
<button class="clickable" on:click={back()}>
Tillbaka
</button>
</main>
<style>
main {
background-color: #ff0;
}
.infobox {
margin: 1em 0;
background-color: #fff;
border: 2px solid #aaa;
border-radius: 8px;
padding: 0.5em 1.5em;
}
button {
padding: 1em;
margin: 2em auto;
}
</style>

116
src/lib/Summary.svelte
View file

@ -1,62 +1,76 @@
<script lang="ts">
import { gym, cardio, diet, currentView } from "./store";
let gymProgress = $derived($gym.filter((c) => c.completed).length);
let cardioProgress = $derived($cardio.filter((c) => c.completed).length);
let dietProgress = $derived($diet.days.filter((c) => c.completed).length);
import { gym, cardio, diet, currentView } from "./store";
let gymProgress = $derived($gym.filter((c) => c.completed).length);
let cardioProgress = $derived($cardio.filter((c) => c.completed).length);
let dietProgress = $derived($diet.days.filter((c) => c.completed).length);
const navigate = (v: 0 | 1 | 2 | 3) => {
currentView.update((_) => v);
};
const navigate = (v: 0 | 1 | 2 | 3 | 4) => {
currentView.update((_) => v);
};
</script>
<div>
<h1>Summary</h1>
<ul class="cards">
<li>
<button onclick={() => navigate(1)}>
<i>{gymProgress}</i> / {$gym.length} <span>gympass gjorda</span>
</button>
</li>
<li>
<button onclick={() => navigate(2)}>
<i>{cardioProgress}</i> / {$cardio.length}
<span>löppass lufsade</span>
</button>
</li>
<li>
<button onclick={() => navigate(3)}>
<i>{dietProgress}</i> / {$diet.days.length}
<span>dagar på diet</span>
</button>
</li>
</ul>
<main>
<h1>Dags att komma i form!</h1>
<div class="cards">
<button class="clickable gym" onclick={() => navigate(1)}>
<i>{gymProgress}</i> / {$gym.length} <span>gympass gjorda</span>
</button>
<button class="clickable cardio" onclick={() => navigate(2)}>
<i>{cardioProgress}</i> / {$cardio.length}
<span>löppass lufsade</span>
</button>
<button class="clickable diet" onclick={() => navigate(3)}>
<i>{dietProgress}</i> / {$diet.days.length}
<span>dagar på diet</span>
</button>
<button class="clickable info" onclick={() => navigate(4)}>
<i>?</i>
</button>
</div>
</main>
<style>
.cards {
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
.cards {
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
> li {
flex: 1;
border: 2px solid #aaa;
border-radius: 5px;
padding: 0;
button {
padding: 1.5em;
button {
padding: 1em;
}
i {
font-size: 2em;
font-style: normal;
}
span {
display: block;
}
}
&:hover {
filter: brightness(95%);
}
}
.gym {
background-color: #f62b5a;
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 {
display: block;
}
}
</style>