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

32
frontend/src/styles.scss
View File

@@ -81,6 +81,16 @@ button {
font-family: var(--font-display);
}
// Mata el retardo de doble-tap del navegador en la tablet kiosko: la pulsación
// debe responder al instante (se conserva el scroll y el pinch-zoom de página).
button,
a,
select,
input,
[role='button'] {
touch-action: manipulation;
}
// --- Helpers del panel de padres (formularios de administración) ---
.adm-card {
background: var(--surface);
@@ -112,6 +122,7 @@ button {
background: var(--accent-blue);
color: #fff;
cursor: pointer;
transition: transform var(--dur-press) var(--ease-out);
}
.adm-btn:active { transform: scale(0.97); }
.adm-btn:disabled { opacity: 0.4; cursor: default; }
@@ -120,9 +131,17 @@ button {
cursor: pointer;
color: var(--accent-pink);
font-size: 1.2rem;
padding: 4px 8px;
// Área táctil mínima real aunque el glifo sea pequeño.
min-width: var(--touch-min);
min-height: var(--touch-min);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
transition: transform var(--dur-press) var(--ease-out), background var(--dur-settle) var(--ease-out);
}
.adm-del:active { transform: scale(0.9); background: var(--surface-softer); }
.adm-del:disabled { opacity: 0.35; cursor: default; }
.adm-list { display: flex; flex-direction: column; gap: 10px; }
.adm-item {
display: flex;
@@ -136,12 +155,21 @@ button {
.adm-chip {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 4px 12px;
// Los chips actúan como botones (selector de días): área táctil de 44px mínimo.
min-height: 44px;
padding: 8px 16px;
border: 0;
border-radius: var(--radius-pill);
background: var(--surface-softer);
font-family: var(--font-display);
font-size: 0.9rem;
color: var(--text-1);
cursor: pointer;
transition: transform var(--dur-press) var(--ease-out), background var(--dur-settle) var(--ease-out),
color var(--dur-settle) var(--ease-out);
}
.adm-chip:active { transform: scale(0.95); }
.adm-empty { color: var(--text-3); padding: var(--space-4); text-align: center; }
.adm-label { font-weight: 600; color: var(--text-1); }