Improvements in the mobile view

expenses_manager/expenses/static/expenses/css/base.css

@@ -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;
+    position: relative;
-    margin-bottom: 3rem;
+    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;
+    }
 }

expenses_manager/expenses/static/expenses/js/nav.js

@@ -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');
+            }
+        });
+    }
+});

expenses_manager/expenses/templates/categories/list.html

@@ -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 %}

expenses_manager/expenses/templates/expenses/account_list.html

@@ -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 %}

expenses_manager/expenses/templates/expenses/base.html

@@ -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 %}">
+                    <div class="nav-item dropdown {% if active_menu == 'settings' %}active{% endif %}" id="settingsDropdown">
-                        <span class="dropdown-toggle">Configuraciones ▼</span>
+                        <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>

expenses_manager/expenses/templates/expenses/dashboard.html

@@ -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;">
+        <section>
-            <h3>Distribución por Categorías</h3>    
+            <h3>Distribución por Categorías</h3>
-            <div style="position: relative; width: 100%; height: 350px; display: flex; align-items: center; justify-content: center">
+            <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 %}

expenses_manager/expenses/templates/expenses/expense_list.html

@@ -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 %}

expenses_manager/expenses/templates/expenses/home.html

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

expenses_manager/expenses/templates/expenses/income_list.html

@@ -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 %}

expenses_manager/expenses/templates/fuel/list.html

@@ -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()">

expenses_manager/expenses/templates/goals/list.html

@@ -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 %}