Search payments by categories explicitely

It was already possible to search by categories in the full text input,
but it could have matched other fields as well.

Explicitely add a select to search by categories.

Also put the search form in a left aside. The mobile view is not done
for the moment.

1 files changed, 37 insertions, 36 deletions

diff --git a/templates/income/table.html b/templates/income/table.html
index efd82a7..60cd6e0 100644
--- a/templates/income/table.html
+++ b/templates/income/table.html
@@ -8,48 +8,49 @@
 
 {% block main %}
 
-  <div class="g-Paragraph g-Payments__Header">
+  <section class="g-Section">
+
+    {% if not incomes %}
+      <div class="g-Table__NoResults">
+        Il n’y a aucun revenu.
+      </div>
+    {% endif %}
+
     <a
-      class="g-Button__Validate"
+      class="g-Paragraph g-Button__Validate"
       href="/income?page={{ page | default(value=1) }}"
     >
-      Nouveau
+      Ajouter un revenu
     </a>
-  </div>
 
-  {% if not incomes %}
+    {% if incomes %}
+      <div class="g-Table">
+        <div class="g-Table__Row g-Table__Row--Header">
+          <span class="g-Table__Cell">Montant</span>
+          <span class="g-Table__Cell">Personne</span>
+          <span class="g-Table__Cell">Mois</span>
+        </div>
+        {% for income in incomes %}
+          <a
+            class="g-Table__Row {% if highlight == income.id %} g-Table__Row--Highlight {% endif %}"
+            href="/income/{{ income.id }}?page={{ page | default(value=1) }}"
+          >
+            <span class="g-Table__Cell g-Table__NumericCell">
+              {{ income.amount | euros() }}
+            </span>
+            <span class="g-Table__Cell">{{ income.user }}</span>
+            <span class="g-Table__Cell">{{ income.date }}</span>
+          </a>
+        {% endfor %}
+      </div>
 
-    <div class="g-Payments__NoResults">
-      Il n’y a aucun revenu.
-    </div>
+      {{ paging::paging(
+        url="/incomes",
+        page=page,
+        max_page=max_page
+      ) }}
+    {% endif %}
 
-  {% else %}
+  </section>
 
-    <div class="g-Table">
-      <div class="g-Table__Row g-Table__Row--Header">
-        <span class="g-Table__Cell">Montant</span>
-        <span class="g-Table__Cell">Personne</span>
-        <span class="g-Table__Cell">Mois</span>
-      </div>
-      {% for income in incomes %}
-        <a
-          class="g-Table__Row {% if highlight == income.id %} g-Table__Row--Highlight {% endif %}"
-          href="/income/{{ income.id }}?page={{ page | default(value=1) }}"
-        >
-          <span class="g-Table__Cell g-Table__NumericCell">
-            {{ income.amount | euros() }}
-          </span>
-          <span class="g-Table__Cell">{{ income.user }}</span>
-          <span class="g-Table__Cell">{{ income.date }}</span>
-        </a>
-      {% endfor %}
-    </div>
-
-    {{ paging::paging(
-      url="/incomes",
-      page=page,
-      max_page=max_page
-    ) }}
-
-  {% endif %}
 {% endblock main %}