From 286213026982435e6e87cdbbd5dddcd80e925b91 Mon Sep 17 00:00:00 2001
From: Jocelyn Delalande <jocelyn@crapouillou.net>
Date: Wed, 1 Feb 2017 19:41:55 +0100
Subject: Adapt to bootstrap 4 forms

- Adapt to BS4 class names and hierarchy
- Redesign some forms to have the label above the input (mobile-friendly)
- For the remaining inline form (add bill), use the grid, as BS no longer
  provides inline form alignment helpers
---
 budget/templates/forms.html | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

(limited to 'budget/templates/forms.html')

diff --git a/budget/templates/forms.html b/budget/templates/forms.html
index 07e5b3d..cf599a9 100644
--- a/budget/templates/forms.html
+++ b/budget/templates/forms.html
@@ -1,9 +1,13 @@
-{% macro input(field, multiple=False, class=None) -%}
-    <div class="control-group">
+{% macro input(field, multiple=False, class='form-control', inline=False) -%}
+    <div class="form-group{% if inline %} row{% endif %}">
     {% if field.type != "SubmitField" %}
-        {{ field.label(class="control-label") }}
+        {% if inline %}
+          {{ field.label(class="col-3") }}
+        {% else %}
+          {{ field.label() }}
+        {% endif %}
     {% endif %}
-        <div class="controls">
+        <div class="controls{% if inline %} col-9{% endif %}">
         {% if multiple == True %}
             {{ field(multiple=True, class=class) }}
         {% else %}
@@ -77,11 +81,11 @@
         {% if title %}<legend>{% if edit %}{{ _("Edit this bill") }} {% else %}{{ _("Add a bill") }} {% endif %}</legend>{% endif %}
     {% include "display_errors.html" %}
     {{ form.hidden_tag() }}
-    {{ input(form.date, class="datepicker") }}
-    {{ input(form.what) }}
-    {{ input(form.payer) }}
-    {{ input(form.amount) }}
-    {{ input(form.payed_for) }}
+    {{ input(form.date, class="form-control datepicker", inline=True) }}
+    {{ input(form.what, inline=True) }}
+    {{ input(form.payer, inline=True, class="form-control custom-select") }}
+    {{ input(form.amount, inline=True) }}
+    {{ input(form.payed_for, inline=True, class="form-check-input") }}
     </fieldset>
     <div class="actions">
         {{ form.submit(class="btn btn-primary") }}
-- 
cgit v1.1


From e148d19e9640a4bf3ebea8010db82c6f24fffc9a Mon Sep 17 00:00:00 2001
From: Jocelyn Delalande <jocelyn@crapouillou.net>
Date: Thu, 2 Feb 2017 11:46:08 +0100
Subject: Add a label for screen-readers on user add form

There was no label, which is bad for accessibility.
---
 budget/templates/forms.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'budget/templates/forms.html')

diff --git a/budget/templates/forms.html b/budget/templates/forms.html
index cf599a9..af24fe2 100644
--- a/budget/templates/forms.html
+++ b/budget/templates/forms.html
@@ -96,7 +96,11 @@
 
 {% macro add_member(form) %}
 {{ form.hidden_tag() }}
-{{ form.name(placeholder=_("Type user name here")) }}<button class="btn">{{ _("Add") }}</button>
+    <div class="input-group">
+        <label class="sr-only" for="name">_("Type user name here")</label>
+        {{ form.name(placeholder=_("Type user name here"), class="form-control") }}
+        <button class=" input-group-addon btn">{{ _("Add") }}</button>
+    </div>
 {% endmacro %}
 
 {% macro edit_member(form, title=True) %}
-- 
cgit v1.1