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, 49 insertions, 44 deletions

diff --git a/templates/payment/create.html b/templates/payment/create.html
index 5bae767..8defad3 100644
--- a/templates/payment/create.html
+++ b/templates/payment/create.html
@@ -6,7 +6,7 @@
 
 {% block main %}
 
-  <div>
+  <section class="g-Section">
     <p class="g-Paragraph">
       <a
         class="g-Link g-Media__Large"
@@ -34,47 +34,51 @@
         <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">
+        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" for="cost">Coût</label>
-      <input
-        name="cost"
-        type="number"
-        class="g-Form__Input"
-        id="cost"
-        value="{{ form.cost | default(value="") }}"
-        required
-      />
+      <label class="g-Form__Label">
+        Coût
+        <input
+          name="cost"
+          type="number"
+          class="g-Form__Input"
+          value="{{ form.cost | default(value="") }}"
+          required
+        />
+      </label>
 
       {% set user_id = form.user_id | default(value="" ~ connected_user.id) %}
 
-      <label class="g-Form__Label" for="user_id">Personne</label>
-      <select name="user_id" id="user_id" class="g-Form__Select" required>
-        {% for user in users %}
-          <option
-            value="{{ user.id }}"
-            {% if "" ~ user.id == user_id %}
-              selected
-            {% endif %}
-          >
-            {{ user.name }}
-          </option>
-        {% endfor %}
-      </select>
+      <label class="g-Form__Label">
+        Personne
+        <select name="user_id" class="g-Form__Select" required>
+          {% for user in users %}
+            <option
+              value="{{ user.id }}"
+              {% if "" ~ user.id == user_id %}
+                selected
+              {% endif %}
+            >
+              {{ user.name }}
+            </option>
+          {% endfor %}
+        </select>
+      </label>
 
       {% set category_id = form.category_id | default(value="") %}
 
-      <label class="g-Form__Label" for="category_id">
+      <label class="g-Form__Label">
         Catégorie
-        <select name="category_id" id="category_id" class="g-Form__Select" required>
+        <select name="category_id" class="g-Form__Select" required>
           {% for category in categories %}
             <option
               value="{{ category.id }}"
@@ -90,15 +94,16 @@
       {% set date = form.date | default(value=now() | date(format="%Y-%m-%d")) %}
 
       {% if query.frequency != "Monthly" %}
-        <label class="g-Form__Label" for="date">Date</label>
-        <input
-          name="date"
-          type="date"
-          class="g-Form__Input"
-          id="date"
-          value="{{ date }}"
-          required
-        />
+        <label class="g-Form__Label">
+          Date
+          <input
+            name="date"
+            type="date"
+            class="g-Form__Input"
+            value="{{ date }}"
+            required
+          />
+        </label>
       {% else %}
         <input
           name="date"
@@ -117,6 +122,6 @@
         <input class="g-Button__Validate" type="submit" value="Créer" />
       </div>
     </form>
-  </div>
+  </section>
 
 {% endblock main %}