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

Improvements in the mobile view

Browse Source
This commit is contained in:
JKuijperM 2026-07-29 16:41:35 +02:00
parent bc1a957292
commit 176f9d075c
11 changed files with 228 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,6 +40,25 @@ a.danger {
text-decoration: underline;
}
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 4px;
background: none;
border: none;
padding: 8px;
cursor: pointer;
}
.nav-toggle-bar {
display: block;
width: 24px;
height: 3px;
background: #e5e7eb;
border-radius: 2px;
}
.nav-item.active {
font-weight: bold;
border-bottom: 2px solid white;
@ -108,9 +127,20 @@ a.danger {
margin-bottom: 4rem;
}
.charts-container > section {
flex: 1 1 320px;
min-width: 280px;
}
.chart-box {
height: 300px;
margin-bottom: 3rem;
position: relative;
height: 320px;
width: 100%;
margin-top: 0.5rem;
}
.chart-box canvas {
max-width: 100%;
}
.canvas-wrapper {
@ -177,6 +207,16 @@ table {
margin-top: 1rem;
}
.table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-wrap table {
white-space: nowrap;
}
th, td {
padding: 0.6rem 0.75rem;
text-align: left;
@ -277,9 +317,24 @@ tbody tr:hover {
.dashboard-presets {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.clear-filters-row {
margin-top: 0.5rem;
}
.clear-filters {
color: #b91c1c;
text-decoration: none;
font-size: 0.85rem;
}
.clear-filters:hover {
text-decoration: underline;
}
.preset {
padding: 0.35rem 0.6rem;
border-radius: 6px;
@ -354,6 +409,16 @@ tbody tr:hover {
.dropdown-toggle {
padding: 10px;
display: inline-block;
background: none;
border: none;
font: inherit;
color: inherit;
cursor: pointer;
}
.dropdown-toggle:focus-visible {
outline: 2px solid #93c5fd;
outline-offset: 2px;
}
.dropdown-menu {
@ -379,7 +444,7 @@ tbody tr:hover {
background-color: #f5f5f5;
}
.dropdown:hover .dropdown-menu {
.dropdown.dropdown--open .dropdown-menu {
display: block;
}
@ -536,4 +601,89 @@ tbody tr:hover {
.auth-help {
margin-top: 16px;
font-size: 0.9em;
}
@media (max-width: 768px) {
.content {
padding: 16px;
}
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.nav-toggle {
display: flex;
}
.nav {
display: none;
flex-direction: column;
align-items: stretch;
gap: 8px;
width: 100%;
margin-top: 12px;
}
.nav.nav--open {
display: flex;
}
.nav .spacer {
display: none;
}
.dropdown-menu {
display: none;
position: static;
border: none;
box-shadow: none;
background: transparent;
min-width: 0;
padding-left: 12px;
}
.dropdown-menu a {
color: #e5e7eb;
}
.dropdown-menu a:hover {
background-color: transparent;
text-decoration: underline;
}
.dashboard-grid {
grid-template-columns: 1fr;
}
.card-chart {
height: 320px;
}
}
@media (max-width: 480px) {
.content {
padding: 12px;
}
.topbar {
padding: 10px 12px;
}
.kpi-grid,
.goals-widget,
.settings-grid {
grid-template-columns: 1fr;
}
.chart-box {
height: 240px;
}
.card-chart {
height: 260px;
}
}

30
expenses_manager/expenses/static/expenses/js/nav.js Normal file
View File

@ -0,0 +1,30 @@
document.addEventListener('DOMContentLoaded', function () {
var toggle = document.getElementById('navToggle');
var nav = document.getElementById('mainNav');
if (!toggle || !nav) {
return;
}
toggle.addEventListener('click', function () {
var isOpen = nav.classList.toggle('nav--open');
toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
});
var dropdownToggle = document.getElementById('dropdownToggle');
var dropdown = document.getElementById('settingsDropdown');
if (dropdownToggle && dropdown) {
dropdownToggle.addEventListener('click', function () {
var isOpen = dropdown.classList.toggle('dropdown--open');
dropdownToggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
});
document.addEventListener('click', function (event) {
if (!dropdown.contains(event.target)) {
dropdown.classList.remove('dropdown--open');
dropdownToggle.setAttribute('aria-expanded', 'false');
}
});
}
});

4
expenses_manager/expenses/templates/categories/list.html
View File

@ -18,6 +18,7 @@
<hr>
<h3>Listado</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
@ -37,6 +38,7 @@
</tr>
{% endfor %}
</tbody>
</table>
</table>
</div>
{% endblock %}

2
expenses_manager/expenses/templates/expenses/account_list.html
View File

@ -6,6 +6,7 @@
<a class="btn" href="{% url 'account_create' %}">➕ Nueva cuenta</a>
<div class="table-wrap">
<table>
<thead>
<tr>
@ -46,4 +47,5 @@
{% endfor %}
</tbody>
</table>
</div>
{% endblock %}

14
expenses_manager/expenses/templates/expenses/base.html
View File

@ -13,7 +13,12 @@
<body>
{% if user.is_authenticated %}
<header class="topbar">
<nav class="nav">
<button type="button" class="nav-toggle" id="navToggle" aria-label="Abrir menú" aria-expanded="false" aria-controls="mainNav">
<span class="nav-toggle-bar"></span>
<span class="nav-toggle-bar"></span>
<span class="nav-toggle-bar"></span>
</button>
<nav class="nav" id="mainNav">
<a href="{% url 'home' %}" class="nav-item {% if active_menu == 'home' %}active{% endif %} ">Home</a>
<a href="{% url 'dashboard' %}" class="nav-item {% if active_menu == 'dashboard' %}active{% endif %} ">Dashboard</a>
<a href="{% url 'expense_list' %}" class="nav-item {% if active_menu == 'expenses' %}active{% endif %} ">Gastos</a>
@ -22,10 +27,10 @@
<!-- <a href="{% url 'tag_list' %}" class="nav-item {% if active_menu == 'tags' %}active{% endif %} ">Etiquetas</a> -->
<a href="{% url 'fuel_list' %}" class="nav-item {% if active_menu == 'fuel' %}active{% endif %} ">Repostajes</a>
<!-- <a href="{% url 'category_list' %}" class="nav-item {% if active_menu == 'categories' %}active{% endif %} ">Categorías</a> -->
<div class="nav-item dropdown {% if active_menu == 'settings' %}active{% endif %}">
<span class="dropdown-toggle">Configuraciones ▼</span>
<div class="nav-item dropdown {% if active_menu == 'settings' %}active{% endif %}" id="settingsDropdown">
<button type="button" class="dropdown-toggle" id="dropdownToggle" aria-haspopup="true" aria-expanded="false" aria-controls="dropdownMenu">Configuraciones ▼</button>
<div class="dropdown-menu">
<div class="dropdown-menu" id="dropdownMenu">
<a href="{% url 'category_list' %}">Categorías</a>
<a href="{% url 'tag_list' %}">Etiquetas</a>
<a href="{% url 'goal_list' %}">Objetivos</a>
@ -59,5 +64,6 @@
</main>
{% block extra_js %}{% endblock %}
<script src="{% static 'expenses/js/nav.js' %}" defer></script>
</body>
</html>

25
expenses_manager/expenses/templates/expenses/dashboard.html
View File

@ -41,11 +41,14 @@
<a href="{% url 'dashboard' %}?period=this_year" class="preset {% if period == 'this_year' %}active{% endif %}">
Este año
</a>
{% if period %}
<a href="{% url 'dashboard' %}" style="color: red; margin-left: 10px;">❌ Quitar filtros temporales</a>
{% endif %}
</div>
{% if period %}
<div class="clear-filters-row">
<a href="{% url 'dashboard' %}" class="clear-filters">❌ Quitar filtros temporales</a>
</div>
{% endif %}
<br>
<form method="get" action="{% url 'dashboard' %}" id="filtered_form">
@ -173,6 +176,7 @@
</p>
<h3>Desglose de cambios por categoría</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
@ -195,6 +199,7 @@
{% endfor %}
</tbody>
</table>
</div>
</section>
{% endif %}
@ -203,22 +208,23 @@
<!-- ========================= -->
<div class="charts-container">
<section class="chart-box" style="width: 45%; min-width: 300px; max-width: 550px;">
<section>
<h3>Evolución de Gastos ({% if chart_type == 'day' %}Por día {% else %} Por Meses{% endif %})</h3>
<div style="position: relative; width: 100%; height: 350px; padding-bottom: 20px;">
<div class="chart-box">
<canvas id="mainChart"></canvas>
</div>
</section>
<section class="chart-box" style="width: 30%; min-width: 280px; max-width: 400px;">
<h3>Distribución por Categorías</h3>
<div style="position: relative; width: 100%; height: 350px; display: flex; align-items: center; justify-content: center">
<section>
<h3>Distribución por Categorías</h3>
<div class="chart-box">
<canvas id="categoryChart"></canvas>
</div>
</section>
<section>
<h3>Gastos Recientes</h3>
<div class="table-wrap">
<table class="table">
<thead>
<tr>
@ -243,6 +249,7 @@
{% endfor %}
</tbody>
</table>
</div>
</section>
</div>
@ -398,6 +405,7 @@
<!-- ========================= -->
<!-- Categories -->
<!-- ========================= -->
<div class="table-wrap">
<table>
<thead>
<tr>
@ -414,5 +422,6 @@
{% endfor %}
</tbody>
</table>
</div>
{% endblock %}

4
expenses_manager/expenses/templates/expenses/expense_list.html
View File

@ -100,6 +100,7 @@
<strong>Categorías:</strong> {{ kpi_categories }}
</section>
<div class="table-wrap">
<table>
<thead>
<tr>
@ -147,7 +148,8 @@
{% endfor %}
</tbody>
</table>
</div>
<div class="pagination">
<span class="step-links">
{% if page_obj.has_previous %}

6
expenses_manager/expenses/templates/expenses/home.html
View File

@ -33,8 +33,10 @@
<section>
<div class="dashboard-grid">
<div class="card card-chart">
<h2>Últimos meses</h2>
<canvas id="miniChart"></canvas>
<h2>Últimos meses</h2>
<div class="canvas-wrapper">
<canvas id="miniChart"></canvas>
</div>
</div>
</div>

2
expenses_manager/expenses/templates/expenses/income_list.html
View File

@ -5,6 +5,7 @@
<a class="btn" href="{% url 'income_create' %}">➕ Nuevo ingreso</a>
<div class="table-wrap">
<table>
<thead>
<tr>
@ -37,5 +38,6 @@
{% endfor %}
</tbody>
</table>
</div>
{% endblock %}

2
expenses_manager/expenses/templates/fuel/list.html
View File

@ -12,6 +12,7 @@
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
@ -41,6 +42,7 @@
{% endfor %}
</tbody>
</table>
</div>
<form method="get">
<select name="year" onchange="this.form.submit()">

2
expenses_manager/expenses/templates/goals/list.html
View File

@ -11,6 +11,7 @@
<a class=btn href="{% url 'goal_create' %}">➕ Nuevo objetivo</a>
<div class="table-wrap">
<table>
<tr>
<th>Nombre</th>
@ -53,5 +54,6 @@
</tr>
{% endfor %}
</table>
</div>
{% endblock %}