Skip to content

Fix: unifica anchos, spinner de carga y etiquetas de los formularios

Agustín Cantero requested to merge fix/ajustes-generales into dev

Qué

  • Las páginas usan tres anchos según su tipo: listados 1200 px, detalles 980 px y formularios 720 px.
  • Al navegar entre secciones, el fallback de carga muestra solo el spinner, sin tarjeta.
  • Los campos de texto muestran siempre su nombre. Donde el placeholder era un ejemplo, ahora es el nombre del campo y el ejemplo pasa a una ayuda debajo (Instancia asociada, Estudiante, Canal, Título y Canal del diálogo de seguimiento).
  • Teléfono, comentario (nuevo y al editar) y nombre del involucrado pasan a etiqueta flotante, así que el nombre no se pierde al escribir.
  • El archivo del informe médico tiene nombre accesible para lectores de pantalla.

Por qué

  • Anchos: había siete medidas distintas (600, 700, 720, 900, 980, 1160 y 1200 px), así que el contenido cambiaba de tamaño al pasar de una pantalla a otra, incluso entre pantallas del mismo tipo.
  • Spinner: la tarjeta tenía un ancho propio (720 px) y un spinner celeste distinto de todos los demás, y el contenido saltaba de tamaño al aparecer.
  • Etiquetas: con la etiqueta flotante, un campo vacío muestra solo el placeholder. En los selectores y el canal el placeholder era un ejemplo, así que el nombre real no se veía hasta enfocar el campo. Los teléfonos, los comentarios de instancia e incidencia y el involucrado no tenían ninguna etiqueta visible, y al escribir quedaban sin nombre.
  • Nombre accesible: el teléfono del estudiante, el involucrado, el comentario y el archivo del informe médico no tenían nombre para un lector de pantalla.

Cambios

  • AuditListView, RolesListView: ancho de 1200 px. IncidenciaDetalle, InstanciaDetalle, RecordatorioDetalle: 980 px. Formularios de instancia, incidencia y recordatorio (y sus páginas de alta y edición): 720 px. CatalogoFormLayout y la edición de catálogos: 720 px centrado.
  • PantallaCargando.tsx: la variante de secciones usa el mismo contenedor y tamaño que el spinner de los detalles. La variante de login conserva su tarjeta.
  • EstudianteSelector, InstanciaSelector: el placeholder pasa a ser el nombre del campo y se agrega una ayuda de búsqueda enlazada con aria-describedby. La ayuda y el error salen del contenedor posicionado, para que la "X" de limpiar y la lista de resultados queden pegadas al campo.
  • IncidenciaForm, InstanciaForm: el Field local admite una ayuda opcional, y Canal pasa a placeholder "Canal" con su ejemplo debajo.
  • InstanciaDesdeRecordatorioDialog: Título y Canal con el nombre como placeholder y la ayuda debajo.
  • StudentForm, ContactoCard: el teléfono pasa a etiqueta flotante "Teléfono", con aria-label numerado.
  • InstanciaComentarios: el comentario nuevo y el de edición pasan a etiqueta flotante.
  • InvolucradosPanel: el campo pasa a etiqueta flotante. El campo y el botón "Agregar" ya no van pegados (join), sino en una fila con separación.
  • MedicalReportsPanel: aria-label en el archivo del informe.
  • RecordatorioForm: la frase "tiene que estar asociado a una instancia" se muestra solo cuando la instancia está fija.
Edited by Agustín Cantero

Merge request reports

Loading