diff options
| author | Martin Kagamino Lehoux <martin@lehoux.net> | 2026-09-08 10:08:39 +0200 |
|---|---|---|
| committer | Martin Kagamino Lehoux <martin@lehoux.net> | 2026-09-08 10:08:39 +0200 |
| commit | e56aeac93bfd8cc05ddf229b7e51939fde41effd (patch) | |
| tree | cc875e408299bfbdb5417fff8ff2388c5cfc3985 | |
| parent | f6687db926e03eb44e5d72d321021f7738600357 (diff) | |
Replace routine status text chip with fixed-width glyph chip
Status becomes a 1.5rem rounded-square chip (ok=check, due=clock,
late=!, veryLate=double !) keeping the green-to-red colors, moved to
the start of each routine row; label and overdue stay in title.
| -rw-r--r-- | src/app.css | 14 | ||||
| -rw-r--r-- | src/lib/components/StatusBadge.svelte | 15 | ||||
| -rw-r--r-- | src/routes/projects/[id]/+page.svelte | 8 |
3 files changed, 24 insertions, 13 deletions
diff --git a/src/app.css b/src/app.css index 1c25c93..a55fdcc 100644 --- a/src/app.css +++ b/src/app.css @@ -394,11 +394,15 @@ button { .status { flex-shrink: 0; - padding: 0.25rem 0.5rem; - border-radius: 9999px; - font-size: 0.75rem; - font-weight: 600; - white-space: nowrap; + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.5rem; + height: 1.5rem; + border-radius: 0.375rem; + font-size: 0.875rem; + font-weight: 700; + line-height: 1; } /* Shared route scaffolding */ diff --git a/src/lib/components/StatusBadge.svelte b/src/lib/components/StatusBadge.svelte index babcbfa..3747270 100644 --- a/src/lib/components/StatusBadge.svelte +++ b/src/lib/components/StatusBadge.svelte @@ -18,9 +18,16 @@ ? 'status bg-accent text-white' : 'status bg-danger text-white', ); + + const icon = $derived( + status === 'ok' ? '✓' : status === 'due' ? '◷' : status === 'late' ? '!' : '‼', + ); + + const label = $derived( + overdueDays > 0 + ? `${STATUS_LABELS[status]} (${overdueDays} j)` + : STATUS_LABELS[status], + ); </script> -<span class={className}> - {STATUS_LABELS[status]}{#if overdueDays > 0} - ({overdueDays} j){/if} -</span> +<span class={className} role="img" aria-label={label} title={label}>{icon}</span> diff --git a/src/routes/projects/[id]/+page.svelte b/src/routes/projects/[id]/+page.svelte index 345f35f..b67ff45 100644 --- a/src/routes/projects/[id]/+page.svelte +++ b/src/routes/projects/[id]/+page.svelte @@ -156,6 +156,10 @@ > </form> {:else} + <StatusBadge + status={routine.status} + overdueDays={routine.overdueDays} + /> <div class="routine-info"> <a class="routine-name" @@ -171,10 +175,6 @@ {/if} </span> </div> - <StatusBadge - status={routine.status} - overdueDays={routine.overdueDays} - /> <form method="POST" action="?/complete" use:enhance> <input type="hidden" name="id" value={routine.id} /> <button class="btn-done" type="submit">Fait</button> |