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

4 files changed, 17 insertions, 13 deletions

diff --git a/budget/templates/display_errors.html b/budget/templates/display_errors.html
index bc65a3a..9e19605 100644
--- a/budget/templates/display_errors.html
+++ b/budget/templates/display_errors.html
@@ -1,5 +1,5 @@
 {% for field_name, field_errors in form.errors.items() if field_errors %}
     {% for error in field_errors %}
-        <p class="error">{{ form[field_name].label.text }}: {{ error }}</p>
+        <p class="alert alert-danger"><strong>{{ form[field_name].label.text }}:</strong> {{ error }}</p>
     {% endfor %}
 {% endfor %}
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") }}
diff --git a/budget/templates/home.html b/budget/templates/home.html
index b9a2b46..e6d7932 100644
--- a/budget/templates/home.html
+++ b/budget/templates/home.html
@@ -20,7 +20,7 @@
     <div class="row-fluid home">
         <div class="span4 offset2">
             <form id="authentication-form" class="form-horizontal" action="{{ url_for(".authenticate") }}" method="post">
-                <fieldset>
+                <fieldset class="form-group">
                     <legend>{{ _("Log to an existing project") }}...</legend>
                     {{ forms.authenticate(auth_form, home=True) }}
                 </fieldset>
@@ -32,7 +32,7 @@
         </div>
         <div class="span4">
             <form id="creation-form" class="form-horizontal" action="{{ url_for(".create_project") }}" method="post">
-                <fieldset>
+                <fieldset class="form-group">
                     <legend>...{{ _("or create a new one") }}</legend>
                     {{ forms.create_project(project_form, home=True) }}
                 </fieldset>
diff --git a/budget/templates/list_bills.html b/budget/templates/list_bills.html
index 72b9032..aacc128 100644
--- a/budget/templates/list_bills.html
+++ b/budget/templates/list_bills.html
@@ -58,7 +58,7 @@
 {% block sidebar %}
 <div id="sidebar" class="sidebar">
 
-    <form id="add-member-form" action="{{ url_for(".add_member") }}" method="post" class="form-inline input-append">
+    <form id="add-member-form" action="{{ url_for(".add_member") }}" method="post" class="form-inline">
         {{ forms.add_member(member_form) }}
     </form>