diff options
Diffstat (limited to 'src/routes')
| -rw-r--r-- | src/routes/+page.svelte | 9 | ||||
| -rw-r--r-- | src/routes/groceries/categories/+page.svelte | 6 | ||||
| -rw-r--r-- | src/routes/grocery/[id]/+page.svelte | 5 | ||||
| -rw-r--r-- | src/routes/projects/[id]/+page.svelte | 20 | ||||
| -rw-r--r-- | src/routes/projects/[projectId]/routine/[routineId]/+page.svelte | 10 |
5 files changed, 20 insertions, 30 deletions
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 1adfb6b..66b3259 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -2,6 +2,7 @@ import { enhance } from '$app/forms'; import ScoreBadge from '$lib/components/ScoreBadge.svelte'; import Button from '$lib/components/Button.svelte'; + import Row from '$lib/components/Row.svelte'; let { data, form } = $props(); @@ -32,12 +33,12 @@ <ul class="item-list"> {#each data.projects as entry (entry.project.id)} - <li class="item-row item-row--card project-row"> + <Row style="padding: 0.875rem 1rem;"> <a class="project-link" href="/projects/{entry.project.id}" >{entry.project.name}</a > <ScoreBadge score={entry.healthScore} /> - </li> + </Row> {/each} </ul> @@ -47,10 +48,6 @@ </main> <style> - .project-row { - padding: 0.875rem 1rem; - } - .project-link { flex-grow: 1; font-weight: 500; diff --git a/src/routes/groceries/categories/+page.svelte b/src/routes/groceries/categories/+page.svelte index 3d6d5b3..c2a3684 100644 --- a/src/routes/groceries/categories/+page.svelte +++ b/src/routes/groceries/categories/+page.svelte @@ -2,6 +2,7 @@ import { enhance } from '$app/forms'; import type { Category } from '$lib/server/services/types'; import Button from '$lib/components/Button.svelte'; + import Row from '$lib/components/Row.svelte'; let { data, form } = $props(); let name = $state(''); @@ -72,8 +73,7 @@ <form method="POST" action="?/delete" use:enhance> <ul class="item-list"> {#each localCategories as cat, index (cat.id)} - <li - class="item-row item-row--card" + <Row draggable="true" ondragstart={() => handleDragStart(index)} ondragover={(e) => handleDragOver(e, index)} @@ -85,7 +85,7 @@ <Button variant="ghost" name="id" value={cat.id} ariaLabel="Supprimer" >×</Button > - </li> + </Row> {/each} </ul> </form> diff --git a/src/routes/grocery/[id]/+page.svelte b/src/routes/grocery/[id]/+page.svelte index 8a0a479..54134f0 100644 --- a/src/routes/grocery/[id]/+page.svelte +++ b/src/routes/grocery/[id]/+page.svelte @@ -1,6 +1,7 @@ <script lang="ts"> import { enhance } from '$app/forms'; import Button from '$lib/components/Button.svelte'; + import Row from '$lib/components/Row.svelte'; let { data, form } = $props(); let name = $state(''); @@ -143,7 +144,7 @@ <form method="POST" action="?/delete" use:enhance> <ul class="item-list item-list--wide"> {#each data?.references ?? [] as ref (ref.id)} - <li class="item-row item-row--ref"> + <Row variant="ref"> <div class="ref-info"> <strong>{ref.reference}</strong> {#if ref.price} @@ -158,7 +159,7 @@ <Button variant="ghost" name="id" value={ref.id} ariaLabel="Supprimer" >×</Button > - </li> + </Row> {/each} </ul> </form> diff --git a/src/routes/projects/[id]/+page.svelte b/src/routes/projects/[id]/+page.svelte index 2efe05b..b48a331 100644 --- a/src/routes/projects/[id]/+page.svelte +++ b/src/routes/projects/[id]/+page.svelte @@ -5,6 +5,7 @@ import ScoreBadge from '$lib/components/ScoreBadge.svelte'; import StatusBadge from '$lib/components/StatusBadge.svelte'; import Button from '$lib/components/Button.svelte'; + import Row from '$lib/components/Row.svelte'; import { formatFrequency, parseIntervalToDays, @@ -102,7 +103,7 @@ <ul class="item-list"> {#each sorted(data.routines) as routine (routine.id)} - <li class="item-row item-row--card routine-row"> + <Row style="flex-wrap: wrap; padding: 0.75rem 1rem;"> <form method="POST" action="?/complete" use:enhance> <input type="hidden" name="id" value={routine.id} /> <Button variant="ghost"> @@ -127,7 +128,7 @@ {/if} </span> </div> - </li> + </Row> {/each} </ul> @@ -158,9 +159,9 @@ /> <ul class="item-list"> {#each filteredArchived as routine (routine.id)} - <li class="item-row item-row--card archived-row"> + <Row> <a - class="routine-name" + class="routine-name archived-name" href="/projects/{data.project.id}/routine/{routine.id}" >{routine.name}</a > @@ -168,7 +169,7 @@ {formatFrequency(routine.frequencyDays)} · archivée le {formatDayMonth(routine.archivedAt)} </span> - </li> + </Row> {/each} </ul> {#if filteredArchived.length === 0} @@ -201,11 +202,6 @@ align-items: stretch; } - .routine-row { - flex-wrap: wrap; - padding: 0.75rem 1rem; - } - .routine-info { flex-grow: 1; min-width: 0; @@ -300,12 +296,12 @@ width: 100%; } - .archived-row .routine-name { + .archived-name { flex-grow: 1; color: var(--text-secondary); } - .archived-row .routine-name:hover { + .archived-name:hover { color: var(--accent); } diff --git a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte index 867719a..55185cc 100644 --- a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte +++ b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte @@ -4,6 +4,7 @@ import ScoreBadge from '$lib/components/ScoreBadge.svelte'; import StatusBadge from '$lib/components/StatusBadge.svelte'; import Button from '$lib/components/Button.svelte'; + import Row from '$lib/components/Row.svelte'; import { formatFrequency, parseIntervalToDays, @@ -176,14 +177,14 @@ <ul class="item-list"> {#each data.completions as c (c.id)} - <li class="item-row item-row--card completion-row"> + <Row style="flex-wrap: wrap; gap: 0.25rem 0.75rem;"> <span class="completion-date"> {formatDayMonthYear(c.doneAt)} </span> {#if c.note} <span class="completion-note">{c.note}</span> {/if} - </li> + </Row> {/each} </ul> @@ -259,11 +260,6 @@ flex: 1; } - .completion-row { - flex-wrap: wrap; - gap: 0.25rem 0.75rem; - } - .completion-date { font-weight: 500; } |