brobert
/
taskbot
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

cambios de estilos y cosas

Browse Source
webui
borja 2 weeks ago
parent 3ec413c863
commit d0651aa713
2 changed files with 115 additions and 67 deletions
Show Stats Download Patch File Download Diff File

104
apps/web/src/lib/styles/base.css
Unescape Escape View File

@ -1,63 +1,89 @@
/* Reset/normalización ligera */ /* Reset/normalización ligera */
*, *,
*::before, *::before,
*::after { box-sizing: border-box; } *::after {
html, body { height: 100%; } box-sizing: border-box;
}
html,
body { body {
margin: 0; height: 100%;
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; body {
background: var(--color-bg); margin: 0;
color: var(--color-text); 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";
-webkit-font-smoothing: antialiased; font-size: 16px;
-moz-osx-font-smoothing: grayscale; line-height: 1.5;
} background: var(--color-bg);
img, svg, video { display: block; max-width: 100%; } color: var(--color-text);
a { color: inherit; text-decoration: none; } -webkit-font-smoothing: antialiased;
button { font: inherit; } -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 */ /* Accesibilidad: foco visible */
:focus-visible { :focus-visible {
outline: 2px solid var(--color-primary); outline: 2px solid var(--color-primary);
outline-offset: 2px; outline-offset: 2px;
} }
/* Utilidades */ /* Utilidades */
.container { .container {
max-width: 960px; max-width: 960px;
margin: 0 auto; margin: 0 auto;
padding: 0 var(--space-4); padding: 0 var(--space-4);
} }
.sr-only { .sr-only {
position: absolute !important; position: absolute !important;
width: 1px; height: 1px; width: 1px;
padding: 0; margin: -1px; height: 1px;
overflow: hidden; clip: rect(0,0,0,0); padding: 0;
white-space: nowrap; border: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} }
/* Controles base */ /* Controles base */
button, button,
input[type="submit"] { input[type="submit"] {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 44px; min-height: 36px;
padding: 0 12px; padding: 0 12px;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: var(--color-surface); background: var(--color-surface);
color: var(--color-text); color: var(--color-text);
cursor: pointer; cursor: pointer;
} }
button.primary { button.primary {
background: var(--color-primary); background: var(--color-primary);
border-color: var(--color-primary); border-color: var(--color-primary);
color: white; color: white;
} }
button:disabled { button:disabled {
opacity: 0.6; opacity: 0.6;
cursor: not-allowed; cursor: not-allowed;
} }

78
apps/web/src/lib/ui/data/TaskItem.svelte
Unescape Escape View File

@ -23,7 +23,11 @@
const code = display_code ?? id; const code = display_code ?? id;
const codeStr = String(code).padStart(4, "0"); 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(); $: today = todayYmdUTC();
$: overdue = !!due_date && compareYmd(due_date, today) < 0; $: overdue = !!due_date && compareYmd(due_date, today) < 0;
$: imminent = !!due_date && (isToday(due_date) || isTomorrow(due_date)); $: imminent = !!due_date && (isToday(due_date) || isTomorrow(due_date));
@ -94,7 +98,9 @@
if (busy || !completed) return; if (busy || !completed) return;
busy = true; busy = true;
try { try {
const res = await fetch(`/api/tasks/${id}/uncomplete`, { method: "POST" }); const res = await fetch(`/api/tasks/${id}/uncomplete`, {
method: "POST",
});
if (res.ok) { if (res.ok) {
success("Tarea reabierta"); success("Tarea reabierta");
location.reload(); location.reload();
@ -264,6 +270,19 @@
<div class="meta"> <div class="meta">
<span class="group-badge" title="Grupo">{groupLabel}</span> <span class="group-badge" title="Grupo">{groupLabel}</span>
{#if due_date}
<span
class="date-badge"
class:overdue
class:soon={imminent}
title={overdue ? "Vencida" : imminent ? "Próxima" : "Fecha"}
>
📅 {dateDmy}{#if overdue}
⚠{/if}
</span>
{/if}
</div>
<div class="complete">
{#if completed} {#if completed}
<button <button
class="btn primary primary-action" class="btn primary primary-action"
@ -284,20 +303,9 @@
> >
✅ Completar ✅ Completar
</button> </button>
{#if due_date}
<span
class="date-badge"
class:overdue
class:soon={imminent}
title={overdue ? "Vencida" : imminent ? "Próxima" : "Fecha"}
>
📅 {dateDmy}{#if overdue}
⚠{/if}
</span>
{/if}
{/if} {/if}
</div> </div>
<div class="actions"> <div class="assignees-container">
{#if assigneesCount === 0} {#if assigneesCount === 0}
<button <button
class="assignees-badge empty" class="assignees-badge empty"
@ -327,6 +335,8 @@
<span class="count">{assigneesCount}</span> <span class="count">{assigneesCount}</span>
</button> </button>
{/if} {/if}
</div>
<div class="actions">
{#if !completed} {#if !completed}
{#if !isAssigned} {#if !isAssigned}
<button <button
@ -396,7 +406,11 @@
{/if} {/if}
{/if} {/if}
</div> </div>
<Popover bind:open={showAssignees} ariaLabel="Responsables" id={"assignees-popover-" + id}> <Popover
bind:open={showAssignees}
ariaLabel="Responsables"
id={"assignees-popover-" + id}
>
<h3 class="popover-title">Responsables</h3> <h3 class="popover-title">Responsables</h3>
{#if assigneesCount === 0} {#if assigneesCount === 0}
<p class="muted">No hay responsables asignados.</p> <p class="muted">No hay responsables asignados.</p>
@ -404,7 +418,11 @@
<ul class="assignees-list"> <ul class="assignees-list">
{#each assignees as a} {#each assignees as a}
<li> <li>
<a href={buildWaMeUrl(normalizeDigits(a))} target="_blank" rel="noopener noreferrer nofollow"> <a
href={buildWaMeUrl(normalizeDigits(a))}
target="_blank"
rel="noopener noreferrer nofollow"
>
{normalizeDigits(a)} {normalizeDigits(a)}
</a> </a>
{#if currentUserId && normalizeDigits(a) === normalizeDigits(currentUserId)} {#if currentUserId && normalizeDigits(a) === normalizeDigits(currentUserId)}
@ -415,7 +433,9 @@
</ul> </ul>
{/if} {/if}
<div class="popover-actions"> <div class="popover-actions">
<button class="btn ghost" on:click={() => (showAssignees = false)}>Cerrar</button> <button class="btn ghost" on:click={() => (showAssignees = false)}
>Cerrar</button
>
</div> </div>
</Popover> </Popover>
</li> </li>
@ -424,7 +444,7 @@
.task { .task {
display: grid; display: grid;
grid-template-columns: 1fr max-content; 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; grid-gap: 2px;
padding: 4px 0 8px 0; padding: 4px 0 8px 0;
border-bottom: 2px dashed var(--color-border); border-bottom: 2px dashed var(--color-border);
@ -498,27 +518,28 @@
.date-badge.soon { .date-badge.soon {
border-color: var(--color-warning); border-color: var(--color-warning);
} }
.assignee { .assignees-container {
display: inline-flex; grid-row: 4/5;
align-items: center; grid-column: 1/2;
justify-content: center;
width: 20px;
height: 20px;
} }
.task.completed { .task.completed {
opacity: 0.7; opacity: 0.7;
} }
.complete {
grid-row: 3/4;
grid-column: 2/3;
justify-self: end;
}
.actions { .actions {
justify-self: stretch; justify-self: stretch;
grid-column: 1/3; grid-column: 1/3;
grid-row: 3/4; grid-row: 4/5;
margin: 2px 0 4px 0; margin: 2px 0 4px 0;
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
gap: 6px; gap: 6px;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-end;
} }
.btn { .btn {
padding: 4px 8px; padding: 4px 8px;
@ -578,7 +599,7 @@
justify-self: end; justify-self: end;
} }
.actions { .actions {
grid-row: 3/4; grid-row: 4/5;
grid-column: 1/3; grid-column: 1/3;
justify-self: stretch; justify-self: stretch;
} }
@ -591,6 +612,7 @@
.assignees-badge { .assignees-badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-self: start;
gap: 6px; gap: 6px;
padding: 2px 8px; padding: 2px 8px;
border-radius: 999px; border-radius: 999px;

Write Preview
Loading…
Cancel
Save