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);

4
frontend/src/app/features/parents/keypad.component.ts
View File

@@ -56,7 +56,9 @@ import { AuthService } from '../../core/auth.service';
justify-content: center;
font-size: 28px;
color: var(--text-2);
transition: transform var(--dur-press) var(--ease-out);
}
.key-screen__back:active { transform: scale(0.94); }
.key-screen__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; }
.dots { display: flex; gap: 18px; }
.dots--error { animation: shake 0.4s ease; }
@@ -79,7 +81,7 @@ import { AuthService } from '../../core/auth.service';
font-weight: 700;
font-size: 1.8rem;
color: var(--text-strong);
transition: transform 0.1s;
transition: transform var(--dur-press) var(--ease-out);
}
.key:active { transform: scale(0.94); }
.key--fn { background: var(--surface-softer); font-size: 1.4rem; }

5
frontend/src/app/features/profiles/profile-select.component.scss
View File

@@ -73,14 +73,15 @@
border: var(--card-border-width) solid color-mix(in srgb, var(--c) 35%, #fff);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
transition: transform 0.15s, box-shadow 0.2s;
transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-settle) var(--ease-out);
animation: slideUp 0.4s ease both;
&:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-soft);
}
&:active { transform: scale(0.98); }
// Mantiene la elevación del hover al pulsar: sin salto entre ambos estados.
&:active { transform: translateY(-2px) scale(0.97); }
&__mascot {
font-size: 84px;