JKuijperM
c371e4cdc3
- 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>
65 lines
2.0 KiB
HTML
65 lines
2.0 KiB
HTML
{% extends "expenses/base.html" %}
|
||
|
||
{% load l10n %}
|
||
|
||
{% block title %}
|
||
Objetivos
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<h1>Objetivos</h1>
|
||
|
||
<a class="btn btn-primary" href="{% url 'goal_create' %}">➕ Nuevo objetivo</a>
|
||
|
||
<div class="table-wrap">
|
||
<table>
|
||
<tr>
|
||
<th>Nombre</th>
|
||
<th>Tipo</th>
|
||
<th>Progreso</th>
|
||
<th></th>
|
||
</tr>
|
||
|
||
{% for goal in goals %}
|
||
<tr>
|
||
<td>{{ goal.name }}</td>
|
||
<td>
|
||
{{ goal.get_kind_display }}
|
||
{% if goal.kind == "budget" %}
|
||
<small>({{ goal.get_period_display|lower }})</small>
|
||
{% endif %}
|
||
</td>
|
||
<td>
|
||
<div class="progress-container">
|
||
<span class="progress-label">
|
||
{{ goal.progress|floatformat:1 }}€ / {{ goal.target_amount|floatformat:1 }}€
|
||
</span>
|
||
<div class="progress-bar"
|
||
role="progressbar"
|
||
aria-valuemin="0"
|
||
aria-valuemax="100"
|
||
aria-valuenow="{{ goal.percentage|unlocalize }}"
|
||
aria-label="Progreso de {{ goal.name }}"
|
||
aria-valuetext="{{ goal.progress|floatformat:1 }}€ de {{ goal.target_amount|floatformat:1 }}€ ({{ goal.percentage|floatformat:1 }}%)">
|
||
<div class="progress-fill {{ goal.progress_state }}"
|
||
style="width: {{ goal.bar_width|unlocalize }}%"></div>
|
||
</div>
|
||
<span class="progress-label">
|
||
{{ goal.percentage|floatformat:1 }}%
|
||
</span>
|
||
{% if goal.is_exceeded %}
|
||
<span class="badge badge-inactive">Excedido</span>
|
||
{% endif %}
|
||
</div>
|
||
</td>
|
||
|
||
<td>
|
||
<a href="{% url 'goal_edit' goal.id %}">Editar</a>
|
||
<a href="{% url 'goal_delete' goal.id %}" class="danger">Eliminar</a>
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</table>
|
||
</div>
|
||
|
||
{% endblock %} |