Merge pull request #172 from JocelynDelalande/jd-bootstrap-4

WIP: Upgrade to bootstrap 4

7 files changed, 91 insertions, 93 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..af24fe2 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") }}
@@ -92,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) %}
diff --git a/budget/templates/home.html b/budget/templates/home.html
index b9a2b46..399343a 100644
--- a/budget/templates/home.html
+++ b/budget/templates/home.html
@@ -1,26 +1,21 @@
 {% extends "layout.html" %}
 
 
-{% block header %}
-<div id="header" class="container-fluid">
-    <div class="row-fluid">
-        <div class="span5 offset2">
+{% block body %}
+    <header id="header" class="row">
+      <div class="col-5  offset-md-2">
             <h2>{{ _("Manage your shared <br>expenses, easily") }}</h2>
-            <a href="{{ url_for(".demo") }}" class="tryout btn btn-inverse pull-right">{{ _("Try out the demo")  }}</a>
+            <a href="{{ url_for(".demo") }}" class="tryout btn">{{ _("Try out the demo")  }}</a>
         </div>
-        <div class="span4">
+        <div class="col-4">
             <p class="additional-content">{{ _("You're sharing a house?") }}<br /> {{ _("Going on holidays with friends?") }}<br /> {{ _("Simply sharing money with others?") }} <br /><strong>{{ _("We can help!") }}</strong></p>
         </div>
-    </div>
-</div>
-{% endblock %}
+    </header>
 
-{% block body %}
-<div class="container-fluid">
-    <div class="row-fluid home">
-        <div class="span4 offset2">
+    <main class="row home">
+        <div class="col-4 offset-md-2">
             <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>
@@ -30,9 +25,9 @@
                 </div>
             </form>
         </div>
-        <div class="span4">
+        <div class="col-3 offset-md-1">
             <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>
@@ -40,9 +35,8 @@
                     <button class="btn" type="submit">{{ _("let's get started") }}</button>
                 </div>
             </form>
-        </div>
+        </main>
     </div>
-</div>
 {% endblock %}
 
 {% block js %}
diff --git a/budget/templates/layout.html b/budget/templates/layout.html
index 543bcb3..979f994 100644
--- a/budget/templates/layout.html
+++ b/budget/templates/layout.html
@@ -5,15 +5,15 @@
     <title>{{ _("Account manager") }}{% block title %}{% endblock %}</title>
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <link rel=stylesheet type=text/css href="{{ url_for("static", filename='css/main.css') }}">
-    <script src="{{ url_for("static", filename="js/jquery-1.7.2.min.js") }}"></script>
+    <script src="{{ url_for("static", filename="js/jquery-3.1.1.min.js") }}"></script>
     <script src="{{ url_for("static", filename="js/ihatemoney.js") }}"></script>
+    <script src="{{ url_for("static", filename="js/tether.min.js") }}"></script>
     <script src="{{ url_for("static", filename="js/bootstrap.min.js") }}"></script>
-    <script src="{{ url_for("static", filename="js/bootstrap-datepicker.js") }}"></script>
     {% block head %}{% endblock %}
     <script type="text/javascript" charset="utf-8">
         $(document).ready(function(){
             var left = window.innerWidth/2-$('.flash').width()/2;
-            $(".flash").css({ "left": left+"px", "top":"45px" });
+            $(".flash").css({ "left": left+"px", "top":"0.6rem" });
             setTimeout(function(){
                 $(".flash").fadeOut("slow", function () {
                     $(".flash").remove();
@@ -35,62 +35,58 @@
 </head>
 <body>
 
-<div class="navbar navbar-fixed-top">
-    <div class="navbar-inner">
-        <div class="container-fluid">
-            <h1><a class="brand" href="{{ url_for(".home") }}">#! money?</a></h1>
+  <nav class="navbar navbar-toggleable-md navbar fixed-top navbar-inverse bg-inverse">
+  <h1 class="col-2"><a class="navbar-brand" href="{{ url_for(".home") }}">#! money?</a></h1>
+            <ul class="navbar-nav col-5 offset-md-1">
             {% if g.project %}
-            <ul class="nav primary-nav">
                 {% block navbar %}
-                <li class="active"><a href="{{ url_for(".list_bills") }}">{{ _("Bills") }}</a></li>
-                <li><a href="{{ url_for(".settle_bill") }}">{{ _("Settle") }}</a></li>
+                <li class="nav-item{% if current_view == 'list_bills' %} active{% endif %}"><a class="nav-link" href="{{ url_for(".list_bills") }}">{{ _("Bills") }}</a></li>
+                <li class="nav-item{% if current_view == 'settle_bill' %} active{% endif %}"><a class="nav-link" href="{{ url_for(".settle_bill") }}">{{ _("Settle") }}</a></li>
                 {% endblock %}
-            </ul>
             {% endif %}
-            <ul class="nav pull-right secondary-nav">
+            </ul>
+            <ul class="navbar-nav secondary-nav col-4">
             {% if g.project %}
-                <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><strong>{{ g.project.name }}</strong> {{ _("options") }} <b class="caret"></b></a>
-                    <ul class="dropdown-menu">
-                        <li><a href="{{ url_for(".edit_project") }}">{{ _("Project settings") }}</a></li>
-                        <li class="divider"></li>
+                <li class="nav-item dropdown">
+                    <a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><strong>{{ g.project.name }}</strong> {{ _("options") }} <b class="caret"></b></a>
+                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+                        <li><a class="dropdown-item" href="{{ url_for(".edit_project") }}">{{ _("Project settings") }}</a></li>
+                        <li class="dropdown-divider"></li>
                         {% for id, name in session['projects'] %}
                         {% if id != g.project.id %}
-                        <li><a href="{{ url_for(".list_bills", project_id=id) }}">{{ _("switch to") }} {{ name }}</a></li>
+                        <li><a class="dropdown-item" href="{{ url_for(".list_bills", project_id=id) }}">{{ _("switch to") }} {{ name }}</a></li>
                         {% endif %}
                         {% endfor %}
-                        <li><a href="{{ url_for(".create_project") }}">{{ _("Start a new project") }}</a></li>
-                        <li class="divider"></li>
-                        <li><a href="{{ url_for(".exit") }}">{{ _("Logout") }}</a></li>
+                        <li><a class="dropdown-item" href="{{ url_for(".create_project") }}">{{ _("Start a new project") }}</a></li>
+                        <li class="dropdown-divider"></li>
+                        <li><a class="dropdown-item" href="{{ url_for(".exit") }}">{{ _("Logout") }}</a></li>
                     </ul>
                 </li>
             {% endif %}
-                <li{% if g.lang == "fr" %} class="active"{% endif %}><a href="{{ url_for(".change_lang", lang="fr") }}">fr</a></li>
-                <li{% if g.lang == "en" %} class="active"{% endif %}><a href="{{ url_for(".change_lang", lang="en") }}">en</a></li>
+                <li class="nav-item{% if g.lang == "fr" %} active{% endif %}"><a class="nav-link" href="{{ url_for(".change_lang", lang="fr") }}">fr</a></li>
+                <li class="nav-item{% if g.lang == "en" %} active{% endif %}"><a class="nav-link" href="{{ url_for(".change_lang", lang="en") }}">en</a></li>
             </ul>
-        </div>
-    </div>
-</div>
 
-{% block header %}{% endblock %}
 
-{% block body %}
+</nav>
+
 <div class="container-fluid">
+{% block body %}
     {% block sidebar %}{% endblock %}
-    <div class="content">
+    <main class="content offset-1 col-10">
     {% block content %}{% endblock %}
-    </div>
+    </main>
 </div>
 {% endblock %}
 
 {% for message in get_flashed_messages() %}
-<div class="flash alert alert-success"><p>{{ message }}</p></div>
+<div class="flash alert alert-success">{{ message }}</div>
 {% endfor %}
 
 {% block footer %}
-<div id="footer">
+<footer>
     <p><a href="https://github.com/spiral-project/ihatemoney">{{ _("This is a free software") }}</a>, {{ _("you can contribute and improve it!") }}</p>
-</div>
+</footer>
 {% endblock %}
 
 </body>
diff --git a/budget/templates/list_bills.html b/budget/templates/list_bills.html
index 72b9032..9421650 100644
--- a/budget/templates/list_bills.html
+++ b/budget/templates/list_bills.html
@@ -1,16 +1,11 @@
-{% extends "layout.html" %}
+{% extends "sidebar_table_layout.html" %}
 
 {% block title %} - {{ g.project.name }}{% endblock %}
 {% block head %}
     <script src="{{ url_for("static", filename="js/bootstrap-datepicker.js") }}"></script>
+    <script src="{{ url_for("static", filename="js/locales/bootstrap-datepicker.fr.min.js") }}" charset="utf-8"></script>
 {% endblock %}
 {% block js %}
-
-    $(window).resize(function() {
-        $("#sidebar").height( window.innerHeight-50 );
-        $("#table_overflow").height( $("#sidebar").height()-120 );
-    });
-
     {% if add_bill %} $('#new-bill').click(); {% endif %}
 
     // Hide all members actions
@@ -56,9 +51,7 @@
 {% endblock %}
 
 {% 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>
 
@@ -89,30 +82,32 @@
     {% endfor %}
     </table>
     </div>
-
-</div>
 {% endblock %}
 
 {% block content %}
 <div class="identifier">{{ _("The project identifier is") }} <a href="{{ url_for(".list_bills") }}">{{ g.project.id }}</a>, {{ _("remember it!") }}</div>
 <a id="new-bill" href="{{ url_for(".add_bill") }}" class="btn btn-primary" data-toggle="modal" data-target="#bill-form">{{ _("Add a new bill") }}</a>
 
-    <div id="bill-form" class="modal hide">
-        <div class="modal-header">
-            <a href="#" class="close" data-dismiss="modal">&times;</a>
-            <h3>{{ _('Add a bill') }}</h3>
+    <div id="bill-form" class="modal fade show" role="dialog">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h3 class="modal-title">{{ _('Add a bill') }}</h3>
+                    <a href="#" class="close" data-dismiss="modal">&times;</a>
+                </div>
+                <form action="{{ url_for(".add_bill") }}" method="post" class="modal-body container">
+                {{ forms.add_bill(bill_form, title=False) }}
+                </form>
+            </div>
         </div>
-        <form action="{{ url_for(".add_bill") }}" method="post" class="modal-body form-horizontal">
-            {{ forms.add_bill(bill_form, title=False) }}
-        </form>
     </div>
 
     {% if bills.count() > 0 %}
-    <table id="bill_table" class="table table-striped">
+    <table id="bill_table" class="col table table-striped table-hover">
         <thead><tr><th>{{ _("When?") }}</th><th>{{ _("Who paid?") }}</th><th>{{ _("For what?") }}</th><th>{{ _("For whom?") }}</th><th>{{ _("How much?") }}</th><th>{{ _("Actions") }}</th></tr></thead>
     <tbody>
     {% for bill in bills %}
-    <tr class="{{ loop.cycle("odd", "even") }}" owers={{bill.owers|join(',','id')}} payer={{bill.payer.id}}>
+    <tr owers={{bill.owers|join(',','id')}} payer={{bill.payer.id}}>
             <td>{{ bill.date }}</td>
             <td>{{ bill.payer }}</td>
             <td>{{ bill.what }}</td>
diff --git a/budget/templates/settle_bills.html b/budget/templates/settle_bills.html
index 16c60b3..b67a9b8 100644
--- a/budget/templates/settle_bills.html
+++ b/budget/templates/settle_bills.html
@@ -1,13 +1,6 @@
-{% extends "layout.html" %}
-
-{% block navbar %}
-<li><a href="{{ url_for(".list_bills") }}">{{ _("Bills") }}</a></li>
-<li class="active"><a href="{{ url_for(".settle_bill") }}">{{ _("Settle") }}</a></li>
-{% endblock %}
+{% extends "sidebar_table_layout.html" %}
 
 {% block sidebar %}
-<div id="sidebar" class="sidebar">
-
     <div id="table_overflow">
     <table class="balance table">
     {% set balance = g.project.balance %}
@@ -21,8 +14,6 @@
     {% endfor %}
     </table>
     </div>
-
-</div>
 {% endblock %}
 
 
diff --git a/budget/templates/sidebar_table_layout.html b/budget/templates/sidebar_table_layout.html
new file mode 100644
index 0000000..7c831f4
--- /dev/null
+++ b/budget/templates/sidebar_table_layout.html
@@ -0,0 +1,14 @@
+{% extends "layout.html" %}
+
+{% block body %}
+<div class="row" style="height: 100%">
+<aside id="sidebar" class="sidebar col-3 " style="height: 100%">
+  {% block sidebar %}{% endblock %}
+</aside>
+
+<main class="offset-md-3 col-9">
+  {% block content %}{% endblock %}
+</main>
+
+</div>
+{% endblock %}