spencer/baby-tracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

dismiss modal; calendar icons; moved counters css

Browse source
This commit is contained in:
Spencer Flagg 2024-01-30 23:09:21 +01:00
parent 9144206832
commit c6ebb13d30
9 changed files with 101 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/lib/components/Action.svelte
View file

@ -27,6 +27,13 @@
const closeDialog = () => {
dialog.close();
};
const onDismiss = (event) => {
if (event.target === dialog) {
dialog.close();
}
}
</script>
<style lang="scss">
@ -57,6 +64,7 @@
dialog {
width: 50vw;
min-width: 16ch;
height: 50vh;
border-radius: 3rem;
border: none;
@ -83,7 +91,7 @@
action.timestamp
).toLocaleTimeString('en-NL', { hour: '2-digit', minute: '2-digit' })}
<dialog bind:this={dialog}>
<dialog bind:this={dialog} on:click={onDismiss}>
<div class="dialog__content">
<div class="">
<h3>
@ -98,7 +106,7 @@
<button class="button--edit-time" on:click={() => adjustTime(-1)}>-1</button>
<button class="button--edit-time" on:click={() => adjustTime(1)}>+1</button>
<button class="button--edit-time" on:click={() => adjustTime(5)}>+5</button>
<button class="button--edit-time" on:click={deleteAction}>Delete</button>
<button class="button button-outline button--edit-time" on:click={deleteAction}>Delete</button>
</div>
<div class=""><button class="button--close" on:click={closeDialog}>Done Editing</button></div>
</div>

32
src/lib/components/counters.svelte
View file

@ -56,6 +56,38 @@
});
</script>
<style>
.counters {
position: absolute;
top: 0;
right: 0;
width: max-content;
outline: 1px solid var(--c-border);
background-color: var(--c-border);
padding: 2rem;
border-radius: 2rem;
font-size: 2.5rem;
box-shadow: -10px 10px 20px -10px #00000030;
}
@media screen and (max-width: 600px) {
.counters {
margin-right: -2rem;
border-radius: 2rem 0 0 2rem;
}
}
@media screen and (max-width: 500px) {
.counters {
margin-right: -2rem;
border-radius: 2rem 0 0 2rem;
position: fixed;
bottom: 2rem;
top:auto;
}
}
</style>
<div class="counters">
{#if $awakeMinutes !== null && $awakeMinutes < $asleepMinutes}<div>Awake for <strong>{convertMinutes($awakeMinutes)}</strong></div>{/if}
{#if $asleepMinutes !== null && $asleepMinutes < $awakeMinutes}<div>Sleeping for <strong>{convertMinutes($asleepMinutes)}</strong></div>{/if}

6
src/lib/components/svgs/Milk.svelte Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-baby-bottle" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--c-event)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M5 10h14" />
<path d="M12 2v2" />
<path d="M12 4a5 5 0 0 1 5 5v11a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2v-11a5 5 0 0 1 5 -5z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 444 B

4
src/lib/components/svgs/Moon.svelte Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-moon" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--c-event)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 388 B

7
src/lib/components/svgs/Poop.svelte Normal file
View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-poo" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--c-event)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M10 12h.01" />
<path d="M14 12h.01" />
<path d="M10 16a3.5 3.5 0 0 0 4 0" />
<path d="M11 4c2 0 3.5 1.5 3.5 4l.164 0a2.5 2.5 0 0 1 2.196 3.32a3 3 0 0 1 1.615 3.063a3 3 0 0 1 -1.299 5.607l-.176 0h-10a3 3 0 0 1 -1.474 -5.613a3 3 0 0 1 1.615 -3.062a2.5 2.5 0 0 1 2.195 -3.32l.164 0c1.5 0 2.5 -2 1.5 -4z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 620 B

5
src/lib/components/svgs/Sun.svelte Normal file
View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--c-event)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
<path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 457 B

8
src/lib/components/svgs/ToiletPaper.svelte Normal file
View file

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-toilet-paper" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--c-event)" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M6 10m-3 0a3 7 0 1 0 6 0a3 7 0 1 0 -6 0" />
<path d="M21 10c0 -3.866 -1.343 -7 -3 -7" />
<path d="M6 3h12" />
<path d="M21 10v10l-3 -1l-3 2l-3 -3l-3 2v-10" />
<path d="M6 10h.01" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 511 B

28
src/routes/calendar/+page.svelte
View file

@ -1,6 +1,11 @@
<script lang="ts">
import { onMount } from 'svelte';
import { onMount } from 'svelte';
import { pb } from '$lib/pocketbase';
import Sun from '$lib/components/svgs/Sun.svelte';
import Moon from '$lib/components/svgs/Moon.svelte';
import Milk from '$lib/components/svgs/Milk.svelte';
import ToiletPaper from '$lib/components/svgs/ToiletPaper.svelte';
import Poop from '$lib/components/svgs/Poop.svelte';
type Action = {
type: string;
@ -98,7 +103,7 @@ import { onMount } from 'svelte';
display: flex;
align-items: center;
justify-content: space-between;
color: rgba(255,255,255,.5);
--c-event: rgba(255,255,255,.5);
}
.event__title {
@ -106,13 +111,14 @@ import { onMount } from 'svelte';
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: .2em;
color: rgba(255,255,255,.5);
}
.event__time {
line-height: 1;
font-size: 1.2rem;
font-weight: 300;
color: rgba(255,255,255,.75);
color: var(--c-event);
}
</style>
@ -133,7 +139,21 @@ import { onMount } from 'svelte';
<div class="hour">
{#each actions as action (action.id)}
{#if getDayOfWeek(action.timestamp) === dayIndex && getHourOfDay(action.timestamp) === hour}
<div class="event event--{action.type}"><span class="event__title">{action.type}</span><span class="event__time">{formatTime(action.timestamp)}</span></div>
<div class="event event--{action.type}">
{#if action.type == 'awake'}
<Sun />
{:else if action.type == 'asleep'}
<Moon />
{:else if action.type == 'food'}
<Milk />
{:else if action.type == 'diaper'}
<ToiletPaper />
{:else if action.type == 'poop'}
<Poop />
{/if}
<!-- <span class="event__title">{action.type}</span> -->
<span class="event__time">{formatTime(action.timestamp)}</span>
</div>
{/if}
{/each}
</div>

35
src/styles/app.css
View file

@ -1,5 +1,5 @@
:root {
--c-primary: darkorange; /* Replace #yourColor with your desired color */
--c-primary: #ff5500; /* Replace #yourColor with your desired color */
}
/* https://coolors.co/palette/5f0f40-9a031e-fb8b24-e36414-0f4c5c */
@ -72,9 +72,11 @@ svg path {
nav ul {
list-style: circle inside;
display: flex;
flex-wrap: wrap;
list-style: none;
gap: 1em;
justify-content: end;
margin-bottom: 0;
}
nav ul li {
@ -133,34 +135,3 @@ section {
min-width: 10ch;
text-align: center;
}
.counters {
position: absolute;
top: 0;
right: 0;
width: max-content;
outline: 1px solid var(--c-border);
background-color: var(--c-border);
padding: 2rem;
border-radius: 2rem;
font-size: 2.5rem;
}
@media screen and (max-width: 600px) {
.counters {
margin-right: -2rem;
border-radius: 2rem 0 0 2rem;
}
}
@media screen and (max-width: 500px) {
.counters {
margin-right: -2rem;
border-radius: 2rem 0 0 2rem;
position: fixed;
bottom: 2rem;
top:auto;
}
}