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.

3 files changed, 74 insertions, 68 deletions

diff --git a/templates/category/create.html b/templates/category/create.html
index e206898..af95e16 100644
--- a/templates/category/create.html
+++ b/templates/category/create.html
@@ -6,7 +6,7 @@
 
 {% block main %}
 
-  <div>
+  <section class="g-Section">
     <p class="g-Paragraph">
       <a class="g-Link g-Media__Large" href="/categories">
         Retour aux categories
@@ -22,30 +22,32 @@
         <div class="g-Form__Error">{{ error }}</div>
       {% endif %}
 
-      <label class="g-Form__Label" for="name">Nom</label>
-      <input
-        name="name"
-        class="g-Form__Input"
-        id="name"
-        value="{{ form.name | default(value="") }}"
-        required
-        {% if not form %} autofocus {% endif %}
-      />
-
-      <label class="g-Form__Label" for="color">Couleur</label>
-      <input
-        name="color"
-        type="color"
-        class="g-Form__Input g-Form__InputColor"
-        id="color"
-        value="{{ form.color | default(value="") }}"
-        required
-      />
+      <label class="g-Form__Label">
+        Nom
+        <input
+          name="name"
+          class="g-Form__Input"
+          value="{{ form.name | default(value="") }}"
+          required
+          {% if not form %} autofocus {% endif %}
+        />
+      </label>
+
+      <label class="g-Form__Label">
+        Couleur
+        <input
+          name="color"
+          type="color"
+          class="g-Form__Input g-Form__InputColor"
+          value="{{ form.color | default(value="") }}"
+          required
+        />
+      </label>
 
       <div>
         <input class="g-Button__Validate" type="submit" value="Créer" />
       </div>
     </form>
-  </div>
+  </section>
 
 {% endblock main %}
diff --git a/templates/category/table.html b/templates/category/table.html
index 896304a..ad42258 100644
--- a/templates/category/table.html
+++ b/templates/category/table.html
@@ -6,33 +6,36 @@
 
 {% block main %}
 
-  <div class="g-Paragraph g-Payments__Header">
-    <a class="g-Button__Validate" href="/category">Nouveau</a>
-  </div>
+  <section class="g-Section">
 
-  {% if not categories %}
+    {% if not categories %}
+      <div class="g-Payments__NoResults">
+        Il n’y a aucune catégorie.
+      </div>
+    {% endif %}
 
-    <div class="g-Payments__NoResults">
-      Il n’y a aucune catégorie.
+    <div class="g-Paragraph">
+      <a class="g-Button__Validate" href="/category">Ajouter une catégorie</a>
     </div>
 
-  {% else %}
-
-    <div class="g-Table">
-      {% for category in categories %}
-        <a
-          class="g-Table__Row {% if highlight == category.id %} g-Table__Row--Highlight {% endif %}"
-          href="/category/{{ category.id }}"
-        >
-          <span
-            class="g-Table__Cell"
-            style="color: {{ category.color }}"
+    {% if categories %}
+      <div class="g-Table">
+        {% for category in categories %}
+          <a
+            class="g-Table__Row {% if highlight == category.id %} g-Table__Row--Highlight {% endif %}"
+            href="/category/{{ category.id }}"
           >
-            {{ category.name }}
-          </span>
-        </a>
-      {% endfor %}
-    </div>
+            <span
+              class="g-Table__Cell"
+              style="color: {{ category.color }}"
+            >
+              {{ category.name }}
+            </span>
+          </a>
+        {% endfor %}
+      </div>
+    {% endif %}
+
+  </section>
 
-  {% endif %}
 {% endblock main %}
diff --git a/templates/category/update.html b/templates/category/update.html
index a4c1481..48dda06 100644
--- a/templates/category/update.html
+++ b/templates/category/update.html
@@ -6,7 +6,7 @@
 
 {% block main %}
 
-  <div>
+  <section class="g-Section">
     <p class="g-Paragraph">
       <a class="g-Link g-Media__Large" href="/categories">
         Retour aux catégories
@@ -30,24 +30,26 @@
       >
         <h1 class="g-H1">Modification</h1>
 
-        <label class="g-Form__Label" for="name">Nom</label>
-        <input
-          name="name"
-          class="g-Form__Input"
-          id="name"
-          value="{{ form.name | default(value=category.name) }}"
-          required
-        />
-
-        <label class="g-Form__Label" for="color">Couleur</label>
-        <input
-          name="color"
-          type="color"
-          class="g-Form__Input g-Form__InputColor"
-          id="color"
-          value="{{ form.color | default(value=category.color) }}"
-          required
-        />
+        <label class="g-Form__Label">
+          Nom
+          <input
+            name="name"
+            class="g-Form__Input"
+            value="{{ form.name | default(value=category.name) }}"
+            required
+          />
+        </label>
+
+        <label class="g-Form__Label">
+          Couleur
+          <input
+            name="color"
+            type="color"
+            class="g-Form__Input g-Form__InputColor"
+            value="{{ form.color | default(value=category.color) }}"
+            required
+          />
+        </label>
 
         <div>
           <input class="g-Button__Validate" type="submit" value="Modifier" />
@@ -67,19 +69,18 @@
             utilisée.
           </p>
         {% else %}
-          <label class="g-Form__Label" for="remove-input">
+          <label class="g-Form__Label">
             Veuillez recopier le nom de la catégorie : « {{ category.name }} ».
+            <input name="remove-input" class="g-Form__Input" data-name="{{ category.name }}" />
           </label>
 
-          <input name="remove-input" class="g-Form__Input" id="remove-input" data-name="{{ category.name }}" />
-
           <div>
-            <input class="g-Button__Danger" type="submit" value="Supprimer" id="remove-button" disabled />
+            <input id="remove-button" class="g-Button__Danger" type="submit" value="Supprimer" disabled />
           </div>
         {% endif %}
       </form>
 
     {% endif %}
-  </div>
+  </section>
 
 {% endblock main %}