jkuijperm/expenses_manager
1
0
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects Releases Wiki Activity

Anade panel de ayuda en el formulario de objetivos

Browse Source 
El formulario tiene tres tipos de objetivo y campos que solo aplican a
algunos, sin nada en pantalla que lo explique: no habia forma de saber que
"Account" solo cuenta para ahorro o que "Period" solo cuenta para
presupuesto.

Anade un desplegable, cerrado por defecto, que describe para que sirve cada
tipo y que hace cada campo. Usa <details>/<summary> nativo en vez de
JavaScript, que es accesible por teclado de serie y ya es el patron de los
filtros avanzados de gastos.

El texto esta contrastado con Goal._period_start(), Goal.progress y
Goal.progress_state(), y los nombres de campo son los que el formulario
muestra de verdad. Esas etiquetas salen hoy en ingles porque GoalForm no
define labels y no hay i18n configurada; el panel usa las reales para que
coincida con lo que se ve, no las traducidas.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
JKuijperM 2026-09-09 16:19:30 +02:00
parent f135797d31
commit f154127f9e
2 changed files with 91 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
expenses_manager/expenses/static/expenses/css/base.css
View File

@ -1108,3 +1108,36 @@ tr:hover {
height: 260px; height: 260px;
} }
} }
.info-panel {
margin-bottom: 1.5rem;
border: 1px solid var(--color-border);
border-radius: 6px;
background: var(--color-surface-alt);
}
.info-panel summary {
padding: 0.75rem 1rem;
cursor: pointer;
font-weight: 500;
}
.info-panel-content {
padding: 0 1rem 1rem;
}
.info-panel-content h2 {
margin: 1rem 0 0.25rem;
font-size: 1rem;
}
.info-panel-content p,
.info-panel-content ul {
margin: 0.25rem 0;
font-size: 0.9rem;
color: var(--color-text-muted);
}
.info-panel-content ul {
padding-left: 1.2rem;
}

58
expenses_manager/expenses/templates/goals/form.html
View File

@ -8,6 +8,64 @@
{{ title }} {{ title }}
</h1> </h1>
<details class="info-panel">
<summary>¿Qué tipo de objetivo necesito?</summary>
<div class="info-panel-content">
<h2>Pago / deuda</h2>
<p>
Para algo que quieres terminar de pagar: devolver un préstamo,
costear un viaje a plazos, reunir el importe de una compra grande.
El progreso es la suma de los gastos de la categoría elegida desde
la fecha de inicio, y llegar al 100% es haberlo conseguido.
</p>
<h2>Presupuesto</h2>
<p>
Para ponerte un límite de gasto que no quieres superar. El progreso
se reinicia cada mes o cada año, según el periodo que elijas.
Aquí acercarse al 100% es un aviso, no un logro: la barra pasa a
naranja al llegar al 80% y a rojo si te pasas del límite.
</p>
<h2>Ahorro</h2>
<p>
Para acumular dinero hasta una cantidad. Se mide con el saldo de la
cuenta que asocies, así que necesita una cuenta en vez de una
categoría.
</p>
<h2>Los demás campos</h2>
<ul>
<li>
<strong>Category</strong> — solo para pago y presupuesto: es la
categoría cuyos gastos se cuentan.
</li>
<li>
<strong>Include subcategories</strong> — si se marca, también
cuentan los gastos de las categorías hijas.
</li>
<li>
<strong>Account</strong> — solo para ahorro: la cuenta cuyo saldo
mide el progreso.
</li>
<li>
<strong>Start date</strong> — desde cuándo se cuentan los gastos
en un pago. En un presupuesto no se usa: manda el reinicio del
periodo.
</li>
<li>
<strong>Period</strong> — solo para presupuesto: cada cuánto
vuelve el progreso a cero.
</li>
<li>
<strong>Show on home</strong> — si el objetivo aparece en la
pantalla de inicio.
</li>
</ul>
</div>
</details>
<form method="post" class="app-form"> <form method="post" class="app-form">
{% csrf_token %} {% csrf_token %}
{% include "expenses/_form_fields.html" %} {% include "expenses/_form_fields.html" %}