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/forms.py

@@ -19,14 +19,14 @@ def select_multi_checkbox(field, ul_class='', **kwargs):
     choice_id = u'toggleField'
     js_function = u'toggle();'
     options = dict(kwargs, id=choice_id, onclick=js_function)
-    html.append(u'<p><a id="selectall" onclick="selectall()">%s</a> | <a id="selectnone" onclick="selectnone()">%s</a></p>'% (_("Select all"), _("Select none")))
+    html.append(u'<p><a href="#" id="selectall" onclick="selectall()">%s</a> | <a href="#" id="selectnone" onclick="selectnone()">%s</a></p>'% (_("Select all"), _("Select none")))
 
     for value, label, checked in field.iter_choices():
         choice_id = u'%s-%s' % (field_id, value)
         options = dict(kwargs, name=field.name, value=value, id=choice_id)
         if checked:
             options['checked'] = 'checked'
-        html.append(u'<p><label for="%s">%s<span>%s</span></label></p>'
+        html.append(u'<p class="form-check"><label for="%s" class="form-check-label">%s<span>%s</span></label></p>'
             % (choice_id, '<input %s /> ' % html_params(**options), label))
     html.append(u'</ul>')
     return u''.join(html)

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 %}

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") }}

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>

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>