Modified the expenses_list filters

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

@@ -105,21 +105,6 @@ a.danger {
     margin-bottom: 2rem;
 }
 
-.tag{
-    display: inline-block;
-    padding: 2px 6px;
-    margin-right: 4px;
-    background: #eef2f7;
-    border-radius: 4px;
-    font-size: 0.85rem;
-    text-decoration: none;
-    color: #333;
-}
-
-.tag:hover {
-    background: #dbe3ee;
-}
-
 .kpi-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
@@ -284,3 +269,45 @@ tbody tr:hover {
     background: #2563eb;
     color: white;
 }
+
+.filters {
+    margin-bottom: 1.5rem;
+}
+
+.filters-main {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.filters-advanced {
+    margin-top: 0.5rem;
+}
+
+.active-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    margin-top: 0.3rem;
+}
+
+.tag{
+    /* display: inline-block; */
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    background: #eee;
+    text-decoration: none;
+    margin-right: 4px;
+    font-size: 0.85rem;
+    color: #333;
+}
+
+.tag.active {
+    background: #333;
+    color: white;
+}
+
+.tag:hover {
+    background: #dbe3ee;
+}

expenses_manager/expenses/templates/expenses/expense_list.html

@@ -8,7 +8,9 @@
 {% block content %}
     <h1>Mis gastos</h1>
 
-    <form method="get">
+    <form method="get" class="filters">
+        <div class="filters-main">
+
             <select name="year">
                 <option value="">Año</option>
                     {% for y in year_list %}
@@ -31,20 +33,6 @@
                 {% endfor %}
             </select>
             
-        <label>
-            Categoría:
-            <select name="category">
-                <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>
-
             <select name="account">
                 <option value="">Cuenta</option>
                 {% for acc in accounts %}
@@ -56,7 +44,36 @@
                 {% endfor %}
             </select>
 
-        <label for="tag">Filtrar por tags:</label>
+            <button type="submit">Filtrar</button>
+            <a href="{% url 'expense_list' %}" class="btn-secondary">Limpiar</a>
+        </div>
+
+        <br>
+
+        <details class="filters-advanced"
+            {% if advanced_filters_open %}
+                open
+            {% endif %}
+        >
+            <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>
                     <div class="active-tags">
                         {% for tag in tags_with_state %}
                         <a href="?{{ tag.query }}"
@@ -64,16 +81,17 @@
                             {{ tag.name }} {% if tag.active %} ✕{% endif %}
                         </a>
                         {% endfor %}
-        </div>>
+                    </div>
-
+                </div>
-        <button type="submit">Filtrar</button>
+            </div>
-        <a href="{% url 'expense_list' %}">Limpiar</a>
+        </details>
     </form>
 
     <br>
 
     <a class="btn" href="{% url 'expense_create' %}">➕ Nuevo gasto</a>
 
+    <br>
     <br>
 
     <section>

expenses_manager/expenses/views.py

@@ -178,6 +178,10 @@ def expense_list(request):
             'query': query,
         })
 
+    advanced_filters_open = bool(
+        category or selected_tags
+    )
+
     return render (
         request,
         'expenses/expense_list.html',
@@ -199,6 +203,7 @@ def expense_list(request):
             'tags_with_state': tags_with_state,
             'accounts': Account.objects.filter(owner=request.user),
             'selected_account': account_id,
+            'advanced_filters_open' : advanced_filters_open
         },
     )