From 92ce7d4d4806fa4b707334d1179e156570e3cde9 Mon Sep 17 00:00:00 2001
From: Brice Maron <b.maron@whatever-company.com>
Date: Wed, 24 Jul 2019 15:45:57 +0200
Subject: 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/templates/layout.html | 36 +++++++++++++++++++++++++-----------
 1 file changed, 25 insertions(+), 11 deletions(-)

(limited to 'ihatemoney/templates/layout.html')

diff --git a/ihatemoney/templates/layout.html b/ihatemoney/templates/layout.html
index f96e8b2..2cb17da 100644
--- a/ihatemoney/templates/layout.html
+++ b/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 %}
 
-- 
cgit v1.1