diff --git a/apps/web/src/lib/styles/base.css b/apps/web/src/lib/styles/base.css index 5481929..56a1205 100644 --- a/apps/web/src/lib/styles/base.css +++ b/apps/web/src/lib/styles/base.css @@ -1,63 +1,89 @@ /* Reset/normalización ligera */ *, *::before, -*::after { box-sizing: border-box; } -html, body { height: 100%; } +*::after { + box-sizing: border-box; +} + +html, body { - margin: 0; - font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji"; - font-size: 16px; - line-height: 1.5; - background: var(--color-bg); - color: var(--color-text); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -img, svg, video { display: block; max-width: 100%; } -a { color: inherit; text-decoration: none; } -button { font: inherit; } + height: 100%; +} + +body { + margin: 0; + font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji"; + font-size: 16px; + line-height: 1.5; + background: var(--color-bg); + color: var(--color-text); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +img, +svg, +video { + display: block; + max-width: 100%; +} + +a { + color: inherit; + text-decoration: none; +} + +button { + font: inherit; +} /* Accesibilidad: foco visible */ :focus-visible { - outline: 2px solid var(--color-primary); - outline-offset: 2px; + outline: 2px solid var(--color-primary); + outline-offset: 2px; } /* Utilidades */ .container { - max-width: 960px; - margin: 0 auto; - padding: 0 var(--space-4); + max-width: 960px; + margin: 0 auto; + padding: 0 var(--space-4); } .sr-only { - position: absolute !important; - width: 1px; height: 1px; - padding: 0; margin: -1px; - overflow: hidden; clip: rect(0,0,0,0); - white-space: nowrap; border: 0; + position: absolute !important; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; } /* Controles base */ button, input[type="submit"] { - display: inline-flex; - align-items: center; - justify-content: center; - min-height: 44px; - padding: 0 12px; - border: 1px solid var(--color-border); - border-radius: var(--radius-sm); - background: var(--color-surface); - color: var(--color-text); - cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 36px; + padding: 0 12px; + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + background: var(--color-surface); + color: var(--color-text); + cursor: pointer; } + button.primary { - background: var(--color-primary); - border-color: var(--color-primary); - color: white; + background: var(--color-primary); + border-color: var(--color-primary); + color: white; } + button:disabled { - opacity: 0.6; - cursor: not-allowed; + opacity: 0.6; + cursor: not-allowed; } diff --git a/apps/web/src/lib/ui/data/TaskItem.svelte b/apps/web/src/lib/ui/data/TaskItem.svelte index dbf6863..fce5f16 100644 --- a/apps/web/src/lib/ui/data/TaskItem.svelte +++ b/apps/web/src/lib/ui/data/TaskItem.svelte @@ -23,7 +23,11 @@ const code = display_code ?? id; const codeStr = String(code).padStart(4, "0"); - $: isAssigned = !!currentUserId && assignees.some((a) => normalizeDigits(a) === normalizeDigits(currentUserId)); + $: isAssigned = + !!currentUserId && + assignees.some( + (a) => normalizeDigits(a) === normalizeDigits(currentUserId), + ); $: today = todayYmdUTC(); $: overdue = !!due_date && compareYmd(due_date, today) < 0; $: imminent = !!due_date && (isToday(due_date) || isTomorrow(due_date)); @@ -94,7 +98,9 @@ if (busy || !completed) return; busy = true; try { - const res = await fetch(`/api/tasks/${id}/uncomplete`, { method: "POST" }); + const res = await fetch(`/api/tasks/${id}/uncomplete`, { + method: "POST", + }); if (res.ok) { success("Tarea reabierta"); location.reload(); @@ -264,6 +270,19 @@
{groupLabel} + {#if due_date} + + 📅 {dateDmy}{#if overdue} + ⚠{/if} + + {/if} +
+
{#if completed} - {#if due_date} - - 📅 {dateDmy}{#if overdue} - ⚠{/if} - - {/if} {/if}
-
+
{#if assigneesCount === 0} {/if} +
+
{#if !completed} {#if !isAssigned} +
@@ -424,7 +444,7 @@ .task { display: grid; grid-template-columns: 1fr max-content; - grid-template-rows: min-content max-content max-content; + grid-template-rows: min-content max-content max-content max-content; grid-gap: 2px; padding: 4px 0 8px 0; border-bottom: 2px dashed var(--color-border); @@ -498,27 +518,28 @@ .date-badge.soon { border-color: var(--color-warning); } - .assignee { - display: inline-flex; - align-items: center; - justify-content: center; - width: 20px; - height: 20px; + .assignees-container { + grid-row: 4/5; + grid-column: 1/2; } .task.completed { opacity: 0.7; } - + .complete { + grid-row: 3/4; + grid-column: 2/3; + justify-self: end; + } .actions { justify-self: stretch; grid-column: 1/3; - grid-row: 3/4; + grid-row: 4/5; margin: 2px 0 4px 0; display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; - justify-content: flex-start; + justify-content: flex-end; } .btn { padding: 4px 8px; @@ -578,7 +599,7 @@ justify-self: end; } .actions { - grid-row: 3/4; + grid-row: 4/5; grid-column: 1/3; justify-self: stretch; } @@ -591,6 +612,7 @@ .assignees-badge { display: inline-flex; align-items: center; + justify-self: start; gap: 6px; padding: 2px 8px; border-radius: 999px;