dev #32
@ -282,6 +282,19 @@ a.danger:visited,
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Oculta visualmente sin ocultar a lectores de pantalla. */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* ========================= */
|
||||
/* Buttons */
|
||||
/* ========================= */
|
||||
@ -737,12 +750,16 @@ tr:hover {
|
||||
|
||||
.progress-label {
|
||||
min-width: 90px;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: var(--color-progress-track);
|
||||
border-radius: 6px;
|
||||
height: 10px;
|
||||
|
||||
@ -56,6 +56,7 @@
|
||||
<input type="hidden" name="period" value="{{ period }}" id="hiddenPeriod">
|
||||
{% endif %}
|
||||
|
||||
<label class="sr-only" for="account">Cuenta</label>
|
||||
<select name="account" id="account">
|
||||
<option value="">Todas las cuentas</option>
|
||||
{% for acc in accounts %}
|
||||
@ -66,6 +67,7 @@
|
||||
</select>
|
||||
|
||||
{% if not period %}
|
||||
<label class="sr-only" for="yearSelect">Año</label>
|
||||
<select name="year" id="yearSelect">
|
||||
{% for y in year_list %}
|
||||
<option value="{{ y }}" {% if y == selected_year %}selected{% endif %}>
|
||||
@ -73,7 +75,8 @@
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
|
||||
<label class="sr-only" for="monthSelect">Mes</label>
|
||||
<select name="month" id="monthSelect">
|
||||
<option value="">Todo el año</option>
|
||||
{% for m in months %}
|
||||
@ -245,7 +248,7 @@
|
||||
<td style="color: var(--color-danger-accent); font-weight: bold;">{{ exp.amount|floatformat:2 }}</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr><td colspan="7">No hay gastos recientes registrados</td></tr>
|
||||
<tr><td colspan="5">No hay gastos recientes registrados</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
@ -418,13 +421,19 @@
|
||||
<div class="goal-card">
|
||||
<strong>{{ goal.name }}</strong>
|
||||
|
||||
<div class="progress-bar">
|
||||
<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
|
||||
{% if goal.percentage < 50 %} low
|
||||
{% elif goal.percentage < 80 %} medium
|
||||
{% else %} high
|
||||
{% endif %}"
|
||||
style="width: {{ goal.percentage|unlocalize }}%"></div>
|
||||
style="width: {{ goal.bar_width|unlocalize }}%"></div>
|
||||
</div>
|
||||
|
||||
<span class="progress-label">
|
||||
|
||||
@ -11,35 +11,38 @@
|
||||
<form method="get" class="filters">
|
||||
<div class="filters-main">
|
||||
|
||||
<select name="year">
|
||||
<label class="sr-only" for="filterYear">Año</label>
|
||||
<select name="year" id="filterYear">
|
||||
<option value="">Año</option>
|
||||
{% for y in year_list %}
|
||||
<option value="{{ y }}"
|
||||
<option value="{{ y }}"
|
||||
{% if selected_year == y %}selected{% endif %}
|
||||
>
|
||||
{{ y }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
<select name="month">
|
||||
|
||||
<label class="sr-only" for="filterMonth">Mes</label>
|
||||
<select name="month" id="filterMonth">
|
||||
<option value="">Mes</option>
|
||||
{% for m in months %}
|
||||
<option value="{{ m }}"
|
||||
<option value="{{ m }}"
|
||||
{% if selected_month == m %}selected{% endif %}
|
||||
>
|
||||
{{ m }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
<select name="account">
|
||||
|
||||
<label class="sr-only" for="filterAccount">Cuenta</label>
|
||||
<select name="account" id="filterAccount">
|
||||
<option value="">Cuenta</option>
|
||||
{% for acc in accounts %}
|
||||
<option value="{{ acc.id }}"
|
||||
{% if selected_account == acc.id %}selected{% endif %}
|
||||
>
|
||||
{{ acc.name }}
|
||||
{{ acc.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
@ -58,22 +61,20 @@
|
||||
<summary>Filtros avanzados</summary>
|
||||
|
||||
<div class="advanced-content">
|
||||
<label>
|
||||
Categoría:
|
||||
<select name="category" onchange="this.form.submit()">
|
||||
<option value="">Todas</option>
|
||||
{% for cat in categories %}
|
||||
<option value="{{ cat.id }}"
|
||||
{% if selected_category == cat.id %}selected{% endif%}
|
||||
>
|
||||
{{ cat.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<div class="tags-filters">
|
||||
<span>Tags:</span>
|
||||
<label for="filterCategory">Categoría:</label>
|
||||
<select name="category" id="filterCategory" onchange="this.form.submit()">
|
||||
<option value="">Todas</option>
|
||||
{% for cat in categories %}
|
||||
<option value="{{ cat.id }}"
|
||||
{% if selected_category == cat.id %}selected{% endif%}
|
||||
>
|
||||
{{ cat.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
<div class="tags-filters" role="group" aria-label="Filtrar por etiquetas">
|
||||
<span aria-hidden="true">Tags:</span>
|
||||
<div class="active-tags">
|
||||
{% for tag in tags_with_state %}
|
||||
<a href="?{{ tag.query }}"
|
||||
@ -140,7 +141,7 @@
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td colspan="4" class="empty-state">
|
||||
<td colspan="6" class="empty-state">
|
||||
<p>No hay gastos</p>
|
||||
<a href="{% url 'expense_create' %}">Añade el primero</a>
|
||||
</td>
|
||||
@ -150,8 +151,8 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="pagination">
|
||||
<span class="step-links">
|
||||
<nav class="pagination" aria-label="Paginación de gastos">
|
||||
<span class="step-links">
|
||||
{% if page_obj.has_previous %}
|
||||
<a href="?page=1{% if query_params %}&{{ query_params }}{% endif %}">« Primero</a>
|
||||
<a href="?page={{ page_obj.previous_page_number }}{% if query_params %}&{{ query_params }}{% endif %}">Anterior</a>
|
||||
@ -164,6 +165,6 @@
|
||||
<a href="?page={{ page_obj.paginator.num_pages }}{% if query_params %}&{{ query_params }}{% endif %}">Último »</a>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{% endblock %}
|
||||
@ -7,7 +7,7 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h2>Objetivos</h2>
|
||||
<h1>Objetivos</h1>
|
||||
|
||||
<a class="btn btn-primary" href="{% url 'goal_create' %}">➕ Nuevo objetivo</a>
|
||||
|
||||
@ -34,7 +34,13 @@
|
||||
<span class="progress-label">
|
||||
{{ goal.progress|floatformat:1 }}€ / {{ goal.target_amount|floatformat:1 }}€
|
||||
</span>
|
||||
<div class="progress-bar">
|
||||
<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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user