jaume/recordalexia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): respuesta táctil y áreas de toque según guía de fluidez

Browse Source 
Tokens de movimiento centralizados (duraciones y curvas únicas), feedback
de pulsación visible e inmediato en tarjeta de tarea, TTS, chips, teclado
y navegación; áreas táctiles mínimas de 44-48px en controles pequeños;
tracking positivo en etiquetas en mayúsculas; touch-action manipulation
para eliminar el retardo de doble-tap en la tablet kiosko.
This commit is contained in:
Jaume Garriga Maestre
2026-07-12 21:35:28 +02:00
parent 08c7289f25
commit 5421080b04
5 changed files with 60 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/app/features/home/task-card.component.ts
View File

@@ -48,9 +48,11 @@ export interface ToggleEvent {
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
cursor: pointer;
transition: transform 0.15s, border-color 0.25s, background 0.25s;
transition: transform var(--dur-press) var(--ease-out),
border-color var(--dur-settle) var(--ease-out), background var(--dur-settle) var(--ease-out);
}
.card:active { transform: scale(0.99); }
/* Respuesta al toque: visible e inmediata (es el control que el niño más pulsa). */
.card:active { transform: scale(0.97); }
.card__tile {
width: var(--tile-size);
height: var(--tile-size);
@@ -68,16 +70,25 @@ export interface ToggleEvent {
font-weight: 700;
font-size: 1.15rem;
text-transform: uppercase;
/* Las mayúsculas necesitan tracking positivo para respirar (legibilidad). */
letter-spacing: 0.03em;
color: var(--text-strong);
}
.card__tts {
all: unset;
cursor: pointer;
font-size: 26px;
padding: 6px;
width: var(--touch-min);
height: var(--touch-min);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
flex: none;
transition: transform var(--dur-press) var(--ease-out),
background var(--dur-settle) var(--ease-out);
}
.card__tts:active { transform: scale(0.9); background: var(--surface-softer); }
.card__check {
width: var(--touch-check);
height: var(--touch-check);