Sustituye {{ form.as_p }} (o el bucle for field in form repetido a
mano en expense_form.html) por {% include "expenses/_form_fields.html" %}
y anade class="app-form" al <form> en:
- categories/form.html, categories/list.html (alta de categoria)
- expenses/account_form.html
- expenses/expense_form.html
- expenses/income_form.html
- expenses/tag_form.html
- fuel/create.html
- goals/form.html
- registration/login.html
De paso:
- categories/list.html: se corrige indentacion de la tabla y las
etiquetas <a> de "Editar"/"Eliminar" (estaban dentro de una celda
sin problema funcional, solo desalineadas) y se anade una <th> vacia
para la columna de acciones.
- goals/form.html: el bloque title y el <h1> tenian "Nuevo objetivo"
fijo aunque la vista goal_edit ya pasa title="Editar objetivo" en el
contexto; ahora la plantilla usa {{ title }}, asi que el formulario
de edicion deja de decir "Nuevo objetivo" por error.
No se toca la logica de las vistas ni los formularios en forms.py.
Los formularios usaban form.as_p (salida generica de Django) o bucles
manuales for field in form repetidos en cada plantilla, sin estilos
propios: inputs/selects/textareas sin padding, borde ni foco visibles,
y cada plantilla resolvia los errores/ayuda de campo a su manera.
Cambios:
- base.css: nuevas clases .app-form, .form-field (label + control en
columna), estilos de input/select/textarea (incluye estado :focus
con el color de foco del tema), .form-field-checkbox para campos
booleanos y .form-help para el help_text de los campos.
- Nuevo parcial expenses/_form_fields.html: itera los campos del
formulario y renderiza label, control, help_text y errores de forma
consistente. Incluye un caso especial para el campo "tags" de gastos
(CheckboxSelectMultiple), que se pinta como lista de chips en vez de
checkboxes sueltos.
Este commit solo anade el estilo y el parcial; las plantillas que lo
adoptan van en el siguiente commit.
Mueve el enlace de Cuentas junto al de Repostajes y elimina los
enlaces comentados a Etiquetas y Categorias del menu principal (ya
estan accesibles desde el desplegable de Configuraciones).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- Anade la utilidad .sr-only en base.css para labels ocultos
visualmente pero accesibles a lectores de pantalla.
- dashboard.html: labels sr-only en los selects de cuenta/ano/mes del
formulario de filtros; ARIA completo (role=progressbar,
aria-valuemin/max/now/label/valuetext) en la barra de progreso del
widget de objetivos; corrige el bug real de esa barra, que usaba
goal.percentage en vez de goal.bar_width y podia desbordar el 100%;
corrige colspan="7" a colspan="5" en la fila vacia de gastos
recientes (la tabla tiene 5 columnas).
- expense_list.html: id + label sr-only en los selects de ano/mes/
cuenta; label explicito para el select de categoria; role="group"
y aria-label en el bloque de filtros por etiquetas (con
aria-hidden en el texto "Tags:" para evitar doble lectura);
paginacion pasada de <div> a <nav aria-label="Paginacion de
gastos">; corrige colspan="4" a colspan="6" en el estado vacio de
la tabla (6 columnas).
- goals/list.html: mismo ARIA de progreso que en dashboard.html;
<h2>Objetivos</h2> a <h1>, para que la pagina empiece en h1 como
el resto.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
- Anade charts.js con getChartColors, applyCartesianColors y
registerThemedChart para centralizar los colores de los graficos segun
el tema activo y refrescarlos en vivo al cambiar de tema (via
MutationObserver sobre data-theme).
- Corrige el bug de renderizado en graficos de tipo 'line'
(TypeError: t.startsWith is not a function): los colores de tema ahora
se fijan en las opciones al crear cada grafico en lugar de mutarlas
despues de new Chart(...).
- Anade variables --chart-grid-color y --chart-fill-color en base.css
(light/dark) e incluye charts.js en base.html.
- Aplica el theming a categoryChart, mainChart y accountChart{id}
(dashboard.html), miniChart (home.html) y monthlyChart/kmChart
(fuel/list.html).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
