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

estilos modernos

Browse Source
webui
borja 2 weeks ago
parent e474387a1a
commit 1e7a4a5122
2 changed files with 125 additions and 71 deletions
Show Stats Download Patch File Download Diff File

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

@ -261,7 +261,7 @@
aria-label="Soltar"
title="Soltar"
on:click|preventDefault={doUnassign}
disabled={busy}>Soltar 🫳</button
disabled={busy}>🫳 Soltar</button
>
{/if}
<button
@ -269,7 +269,9 @@
aria-label="Completar"
title="Completar"
on:click|preventDefault={doComplete}
disabled={busy}>Completar ✅</button
disabled={busy}
>
✅ Completar</button
>
{#if !editingText}
@ -278,7 +280,9 @@
aria-label="Editar texto"
title="Editar texto"
on:click|preventDefault={toggleEditText}
disabled={busy}>Editar ✍️</button
disabled={busy}
>
✍️ Editar</button
>
{:else}
<button
@ -299,7 +303,7 @@
aria-label="Editar fecha"
title="Editar fecha"
on:click|preventDefault={toggleEdit}
disabled={busy}>Mover 🗓️</button
disabled={busy}>🗓️ Mover</button
>
{:else}
<input class="date" type="date" bind:value={dateValue} />
@ -329,8 +333,8 @@
grid-template-columns: 1fr max-content;
grid-template-rows: min-content max-content max-content;
grid-gap: 2px;
padding: 4px;
border-bottom: 1px solid var(--color-border);
padding: 4px 0 8px 0;
border-bottom: 2px dashed var(--color-border);
position: relative;
margin: 0 0 4px 0;
}
@ -338,19 +342,20 @@
border-bottom: 0;
}
.code {
font-weight: 600;
font-weight: 300;
font-size: 0.8rem;
color: var(--color-text-muted);
font-family: monospace;
letter-spacing: 0.5px;
grid-row: 1/2;
grid-column: 1/2;
align-self: center;
}
.completed {
opacity: 0.5;
}
.desc {
padding: 8px;
padding: 8px 4px;
grid-column: 1/3;
grid-row: 2/3;
}
@ -373,7 +378,6 @@
.meta {
justify-self: end;
align-items: start;
gap: 8px;
grid-row: 1/2;
grid-column: 2/3;
}
@ -381,7 +385,7 @@
color: var(--color-text-muted);
}
.date-badge {
padding: 2px 6px;
padding: 4px 6px;
border-radius: 6px;
border: 1px solid transparent;
font-size: 12px;
@ -410,13 +414,12 @@
}
.actions {
display: block;
gap: 6px;
justify-self: end;
align-items: center;
flex-wrap: wrap;
justify-self: center;
justify-content: space-between;
align-content: space-between;
grid-column: 2/3;
grid-row: 3/4;
margin-bottom: 4px;
}
.btn {
padding: 4px 8px;
@ -426,6 +429,7 @@
border-radius: 6px;
font-size: 13px;
cursor: pointer;
font-family: monospace;
}
.btn[disabled] {
opacity: 0.6;
@ -451,11 +455,31 @@
border: 1px solid var(--color-border);
border-radius: 6px;
background: var(--color-surface);
font-size: 16px;
font-size: 12px;
line-height: 1;
font-family: monospace;
}
.date {
padding: 4px 6px;
font-size: 14px;
}
@media (max-width: 480px) {
.task {
grid-template-columns: 1fr;
}
.meta {
justify-self: end;
}
.assignees {
display: none;
}
.actions {
grid-row: 3/4;
grid-column: 1/3;
justify-self: center;
}
.icon-btn {
padding: 2px;
}
}
</style>

140
apps/web/src/routes/app/+page.svelte
Unescape Escape View File

@ -1,8 +1,8 @@
<script lang="ts">
import Card from '$lib/ui/layout/Card.svelte';
import TextField from '$lib/ui/inputs/TextField.svelte';
import TaskItem from '$lib/ui/data/TaskItem.svelte';
import Pagination from '$lib/ui/layout/Pagination.svelte';
import Card from "$lib/ui/layout/Card.svelte";
import TextField from "$lib/ui/inputs/TextField.svelte";
import TaskItem from "$lib/ui/data/TaskItem.svelte";
import Pagination from "$lib/ui/layout/Pagination.svelte";
export let data: {
userId: string;
@ -31,73 +31,103 @@
};
</script>
<h1 class="title">Panel</h1>
<p class="subtle">Sesión: <strong>{data.userId}</strong></p>
<form method="GET" action="/app" class="filters">
<div class="grow">
<TextField name="q" placeholder="Buscar tareas..." value={data.q ?? ''} />
</div>
<select name="soonDays">
<option value="" selected={String(data.soonDays ?? '') === ''}>Todas las fechas</option>
<option value="3" selected={String(data.soonDays ?? '') === '3'}>Próximos 3 días</option>
<option value="7" selected={String(data.soonDays ?? '') === '7'}>Próximos 7 días</option>
<option value="14" selected={String(data.soonDays ?? '') === '14'}>Próximos 14 días</option>
</select>
<button type="submit">Filtrar</button>
</form>
<h2 class="section-title">Mis tareas (abiertas)</h2>
{#if data.openTasks.length === 0}
<p>No tienes tareas abiertas.</p>
{:else}
<Card>
<ul class="list">
{#each data.openTasks as t}
<TaskItem {...t} currentUserId={data.userId} />
{/each}
</ul>
</Card>
<Card>
<ul class="list">
{#each data.openTasks as t}
<TaskItem {...t} currentUserId={data.userId} />
{/each}
</ul>
</Card>
{/if}
{#if (data.page ?? 1) > 1 || data.hasMore}
<Pagination
prevHref={(data.page ?? 1) > 1
? `/app?${new URLSearchParams({ q: data.q ?? '', soonDays: data.soonDays != null ? String(data.soonDays) : '', page: String((data.page ?? 1) - 1) }).toString()}`
: null}
nextHref={data.hasMore
? `/app?${new URLSearchParams({ q: data.q ?? '', soonDays: data.soonDays != null ? String(data.soonDays) : '', page: String((data.page ?? 1) + 1) }).toString()}`
: null}
/>
<Pagination
prevHref={(data.page ?? 1) > 1
? `/app?${new URLSearchParams({ q: data.q ?? "", soonDays: data.soonDays != null ? String(data.soonDays) : "", page: String((data.page ?? 1) - 1) }).toString()}`
: null}
nextHref={data.hasMore
? `/app?${new URLSearchParams({ q: data.q ?? "", soonDays: data.soonDays != null ? String(data.soonDays) : "", page: String((data.page ?? 1) + 1) }).toString()}`
: null}
/>
{/if}
<h2 class="section-title">Completadas (últimas 24 h)</h2>
{#if data.recentTasks.length === 0}
<p>No hay tareas completadas recientemente.</p>
<p>No hay tareas completadas recientemente.</p>
{:else}
<Card>
<ul class="list">
{#each data.recentTasks as t}
<TaskItem {...t} currentUserId={data.userId} completed={true} completed_at={t.completed_at ?? null} />
{/each}
</ul>
</Card>
<Card>
<ul class="list">
{#each data.recentTasks as t}
<TaskItem
{...t}
currentUserId={data.userId}
completed={true}
completed_at={t.completed_at ?? null}
/>
{/each}
</ul>
</Card>
{/if}
<p class="footnote">La cookie de sesión se renueva con cada visita (idle timeout).</p>
<form method="GET" action="/app" class="filters">
<div class="grow">
<TextField name="q" placeholder="Buscar tareas..." value={data.q ?? ""} />
</div>
<select name="soonDays">
<option value="" selected={String(data.soonDays ?? "") === ""}
>Todas las fechas</option
>
<option value="3" selected={String(data.soonDays ?? "") === "3"}
>Próximos 3 días</option
>
<option value="7" selected={String(data.soonDays ?? "") === "7"}
>Próximos 7 días</option
>
<option value="14" selected={String(data.soonDays ?? "") === "14"}
>Próximos 14 días</option
>
</select>
<button type="submit">Filtrar</button>
</form>
<p class="footnote">
La cookie de sesión se renueva con cada visita (idle timeout).
</p>
<style>
.title { margin-bottom: .5rem; }
.subtle { color: var(--color-text-muted); margin: 0 0 1rem 0; }
.filters {
margin: 0 0 1rem 0;
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.grow { flex: 1 1 260px; min-width: 200px; }
.section-title { margin: .5rem 0; }
.list { margin: 0; padding: 0; list-style: none; }
.footnote { margin-top: .75rem; color: var(--color-text-muted); }
.title {
margin-bottom: 0.5rem;
}
.subtle {
color: var(--color-text-muted);
margin: 0 0 1rem 0;
}
.filters {
margin: 0 0 1rem 0;
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.grow {
flex: 1 1 260px;
min-width: 200px;
}
.section-title {
margin: 0.5rem 0;
}
.list {
margin: 0;
padding: 0;
list-style: none;
}
.footnote {
margin-top: 0.75rem;
color: var(--color-text-muted);
}
</style>

Write Preview
Loading…
Cancel
Save