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 */
*,
*::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;
}

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

@ -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 @@
<div class="meta">
<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}
<button
class="btn primary primary-action"
@ -284,20 +303,9 @@
>
✅ Completar
</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}
</div>
<div class="actions">
<div class="assignees-container">
{#if assigneesCount === 0}
<button
class="assignees-badge empty"
@ -327,6 +335,8 @@
<span class="count">{assigneesCount}</span>
</button>
{/if}
</div>
<div class="actions">
{#if !completed}
{#if !isAssigned}
<button
@ -396,7 +406,11 @@
{/if}
{/if}
</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>
{#if assigneesCount === 0}
<p class="muted">No hay responsables asignados.</p>
@ -404,7 +418,11 @@
<ul class="assignees-list">
{#each assignees as a}
<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)}
</a>
{#if currentUserId && normalizeDigits(a) === normalizeDigits(currentUserId)}
@ -415,7 +433,9 @@
</ul>
{/if}
<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>
</Popover>
</li>
@ -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;

Write Preview
Loading…
Cancel
Save