diff --git a/expenses_manager/expenses/static/expenses/css/base.css b/expenses_manager/expenses/static/expenses/css/base.css index 8672703..a704d0b 100644 --- a/expenses_manager/expenses/static/expenses/css/base.css +++ b/expenses_manager/expenses/static/expenses/css/base.css @@ -909,6 +909,115 @@ tr:hover { color: var(--color-text-muted); } +/* ========================= */ +/* Home widgets */ +/* ========================= */ + +.home-section { + margin-bottom: 2.5rem; +} + +.home-section > h2 { + margin-bottom: 0.75rem; +} + +.section-actions { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-top: 1.25rem; +} + +.balance-total { + font-size: 2rem; + font-weight: 600; + color: var(--color-success-accent); + margin: 0 0 1rem; +} + +.balance-total.negative, +.balance-amount.negative { + color: var(--color-danger-accent); +} + +.balance-breakdown { + list-style: none; + margin: 0; + padding: 0; + max-width: 420px; +} + +.balance-breakdown li { + display: flex; + justify-content: space-between; + padding: 0.4rem 0; + border-bottom: 1px solid var(--color-border); +} + +.balance-amount { + font-variant-numeric: tabular-nums; + white-space: nowrap; +} + +.movements-list { + list-style: none; + margin: 0; + padding: 0; +} + +.movement { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.5rem 0; + border-bottom: 1px solid var(--color-border); +} + +.movement-date { + flex-shrink: 0; + font-size: 0.85rem; + color: var(--color-text-muted); + font-variant-numeric: tabular-nums; +} + +.movement-label { + flex: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.movement-account { + flex-shrink: 0; + font-size: 0.85rem; + color: var(--color-text-muted); +} + +.movement-amount { + flex-shrink: 0; + font-variant-numeric: tabular-nums; + white-space: nowrap; +} + +.amount-positive { + color: var(--color-success-accent); +} + +.amount-negative { + color: var(--color-danger-accent); +} + +.comparison { + margin-top: 1rem; +} + +@media (max-width: 480px) { + .movement-account { + display: none; + } +} + /* ========================= */ /* Responsive */ /* ========================= */ diff --git a/expenses_manager/expenses/templates/expenses/home.html b/expenses_manager/expenses/templates/expenses/home.html index 835415b..06ff6ca 100644 --- a/expenses_manager/expenses/templates/expenses/home.html +++ b/expenses_manager/expenses/templates/expenses/home.html @@ -8,29 +8,111 @@
Total: {{ kpi_total|floatformat:2 }}
-Gastos: {{ kpi_count }}
-Categorías: {{ kpi_categories }}
-+ {{ total_balance|floatformat:2 }}€ +
+ +
+ {% if diff_pct is None %}
+ Sin gastos el mes pasado para comparar.
+ {% else %}
+ Mes anterior: {{ prev_total|floatformat:2 }}€ —
+ {% if diff_amount > 0 %}
+
+ +{{ diff_amount|floatformat:2 }}€ ({{ diff_pct|floatformat:1 }}%)
+
+ {% elif diff_amount < 0 %}
+
+ {{ diff_amount|floatformat:2 }}€ ({{ diff_pct|floatformat:1 }}%)
+
+ {% else %}
+ sin variación
+ {% endif %}
+ {% endif %}
+
+
+ El mes en curso está incompleto: la comparación no es equivalente
+ hasta que termine.
+
+