Improve usability specially for small screen

- add buttons class to fix alignments
- add responsive info to big tables
- use visibility instead of display to avoid jumping rows
- reorganize menu in responsive

ihatemoney/static/css/main.css

@@ -20,7 +20,9 @@ body {
 .navbar .secondary-nav {
     text-align: right;
     flex-direction: row-reverse;
-
+}
+.secondary-nav .nav-link {
+    padding: .5rem 1rem;
 }
 .navbar-brand{ font-family: 'Lobster', arial, serif; }
 
@@ -116,7 +118,7 @@ footer{
     margin-top: 30px;
     position: fixed;
     bottom: 0px;
-    height: 20px;
+    height: 2em;
     width: 100%;
     text-align: center;
     background-color: #fff;
@@ -254,12 +256,12 @@ tr.payer_line .balance-name {
 
 .balance.table .action,
 .extra-info {
-    display: none;
+    visibility: hidden;
 }
 
 .balance.table tr:hover .action,
 tr:hover .extra-info {
-    display: initial;
+    visibility: visible;
 }
 
 /* Fluid Offsets for Boostrap */

ihatemoney/templates/forms.html

@@ -24,10 +24,10 @@
     <div class="actions">
         <button type="submit" class="btn btn-primary">{{ field.name }}</button>
         {% if home %}
-        <a href="{{ url_for(".remind_password") }}">{{ _("Can't remember the password?") }}</a>
+        <a href="{{ url_for(".remind_password") }}" class="btn btn-link">{{ _("Can't remember the password?") }}</a>
         {% endif %}
         {% if cancel %}
-        <button type="reset" class="btn">{{ _("Cancel") }}</button>
+        <button type="reset" class="btn btn-light">{{ _("Cancel") }}</button>
         {% endif %}
       </div>
 {% endmacro %}
@@ -110,7 +110,7 @@
     </fieldset>
     <div class="actions">
         {{ form.submit(class="btn btn-primary") }}
-        {% if not edit %} {{ form.submit2(class="btn") }}{% endif %}
+        {% if not edit %} {{ form.submit2(class="btn btn-light") }}{% endif %}
     </div>
 
 {% endmacro %}
@@ -121,7 +121,9 @@
     <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 class="input-group-append">
+            <button class="btn btn-outline-secondary input-group-addon" type="submit">{{ _("Add") }}</button>
+        </div>
     </div>
 {% endmacro %}
 

ihatemoney/templates/home.html

@@ -35,7 +35,7 @@
                     {{ forms.create_project(project_form, home=True) }}
                 </fieldset>
                 <div class="controls">
-                    <button class="btn" type="submit">{{ _("let's get started") }}</button>
+                    <button class="btn btn-primary" type="submit">{{ _("let's get started") }}</button>
                 </div>
             </form>
             {% else %}

ihatemoney/templates/layout.html

@@ -31,40 +31,51 @@
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
+      <h1><a class="navbar-brand" href="{{ url_for("main.home") }}">#! money?</a></h1>
+      {% if g.project %}<strong class="d-block d-sm-none text-white">{{ g.project.name }}</strong>{% endif %}
+
       <div class="collapse navbar-collapse" id="navbarToggler">
-        <h1><a class="navbar-brand" href="{{ url_for("main.home") }}">#! money?</a></h1>
         <ul class="navbar-nav ml-auto mr-auto">
           {% if g.project %}
+          <li class="nav-item">
+          </li>
+
           {% block navbar %}
           <li class="nav-item{% if current_view == 'list_bills' %} active{% endif %}"><a class="nav-link" href="{{ url_for("main.list_bills") }}">{{ _("Bills") }}</a></li>
           <li class="nav-item{% if current_view == 'settle_bill' %} active{% endif %}"><a class="nav-link" href="{{ url_for("main.settle_bill") }}">{{ _("Settle") }}</a></li>
           <li class="nav-item{% if current_view == 'statistics' %} active{% endif %}"><a class="nav-link" href="{{ url_for("main.statistics") }}">{{ _("Statistics") }}</a></li>
           {% endblock %}
           {% endif %}
-        </ul>
-        <ul class="navbar-nav secondary-nav">
           {% if g.project %}
           <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>
+            <a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              <strong class="d-none d-sm-inline">{{ 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("main.edit_project") }}">{{ _("Project settings") }}</a></li>
               <li class="dropdown-divider"></li>
               {% for id, name in session['projects'] %}
-              {% if id != g.project.id %}
-              <li><a class="dropdown-item" href="{{ url_for("main.list_bills", project_id=id) }}">{{ _("switch to") }} {{ name }}</a></li>
-              {% endif %}
+                {% if id != g.project.id %}
+                <li><a class="dropdown-item" href="{{ url_for("main.list_bills", project_id=id) }}">{{ _("switch to") }} {{ name }}</a></li>
+                {% endif %}
               {% endfor %}
               <li><a class="dropdown-item" href="{{ url_for("main.create_project") }}">{{ _("Start a new project") }}</a></li>
+              {% if g.show_admin_dashboard_link %}
+              <li class="dropdown-divider"></li>
+              <li class="nav-item{% if request.url_rule.endpoint == "main.dashboard" %} active{% endif %}">
+                <a class="dropdown-item" href="{{ url_for("main.dashboard") }}">{{ _("Dashboard") }}</a>
+              </li>
+              {% endif %}
               <li class="dropdown-divider"></li>
               <li><a class="dropdown-item" href="{{ url_for("main.exit") }}">{{ _("Logout") }}</a></li>
             </ul>
           </li>
           {% endif %}
+        </ul>
+        <ul class="navbar-nav secondary-nav">
           <li class="nav-item{% if g.lang == "fr" %} active{% endif %}"><a class="nav-link" href="{{ url_for("main.change_lang", lang="fr") }}">fr</a></li>
           <li class="nav-item{% if g.lang == "en" %} active{% endif %}"><a class="nav-link" href="{{ url_for("main.change_lang", lang="en") }}">en</a></li>
-          {% if g.show_admin_dashboard_link %}
-          <li class="nav-item{% if request.url_rule.endpoint == "main.dashboard" %} active{% endif %}"><a class="nav-link" href="{{ url_for("main.dashboard") }}">{{ _("Dashboard") }}</a></li>
-          {% endif %}
         </ul>
       </div>
     </nav>
@@ -86,7 +97,10 @@
 
 {% block footer %}
 <footer>
-    <p><a href="https://github.com/spiral-project/ihatemoney">{{ _("This is a free software") }}</a>, {{ _("you can contribute and improve it!") }}</p>
+    <p>
+      <a href="https://github.com/spiral-project/ihatemoney">{{ _("This is a free software") }}</a><span class="d-none d-sm-inline">,
+      {{ _("you can contribute and improve it!") }}</span>
+    </p>
 </footer>
 {% endblock %}
 

ihatemoney/templates/list_bills.html

@@ -79,7 +79,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="identifier"><a href="{{ url_for(".invite") }}">{{ _("Invite people to join this project!") }}</a></div>
+<div class="identifier"><a class="btn btn-link" href="{{ url_for(".invite") }}">{{ _("Invite people to join this project!") }}</a></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 fade show" role="dialog">
@@ -97,7 +97,7 @@
     </div>
 
     {% if bills.count() > 0 %}
-    <table id="bill_table" class="col table table-striped table-hover">
+    <table id="bill_table" class="col table table-striped table-hover table-responsive-sm">
         <thead><tr><th>{{ _("Added on") }}</th><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 %}