From 72acde7122a79c5a68a9e9ec1e3885a6f2d443a2 Mon Sep 17 00:00:00 2001
From: Brice Maron <b.maron@whatever-company.com>
Date: Wed, 31 Jul 2019 00:07:29 +0200
Subject: [PATCH] Add footer with links

---
 ihatemoney/static/css/main.css                | 112 ++++++++--
 ihatemoney/static/images/book.svg             |   1 +
 ihatemoney/static/images/cog.svg              |   1 +
 ihatemoney/static/images/github.svg           |   1 +
 ihatemoney/static/images/mobile-alt.svg       |   1 +
 ihatemoney/static/images/plus.svg             |   1 +
 ihatemoney/templates/layout.html              | 191 ++++++++++--------
 .../templates/sidebar_table_layout.html       |   2 +-
 8 files changed, 211 insertions(+), 99 deletions(-)
 create mode 100644 ihatemoney/static/images/book.svg
 create mode 100644 ihatemoney/static/images/cog.svg
 create mode 100644 ihatemoney/static/images/github.svg
 create mode 100644 ihatemoney/static/images/mobile-alt.svg
 create mode 100644 ihatemoney/static/images/plus.svg

diff --git a/ihatemoney/static/css/main.css b/ihatemoney/static/css/main.css
index 47ede778..73ea5136 100644
--- a/ihatemoney/static/css/main.css
+++ b/ihatemoney/static/css/main.css
@@ -7,7 +7,6 @@
 body {
   /* For fixed navbar */
   padding-top: 3.5rem;
-  padding-bottom: 2rem;
 }
 
 /* Navbar */
@@ -130,16 +129,91 @@ body {
 }
 
 footer {
-  margin-left: -15px;
-  margin-right: -15px;
-  margin-top: 30px;
-  position: fixed;
-  bottom: 0px;
-  height: 2em;
   width: 100%;
+  font: normal 16px sans-serif;
+  padding: 45px 50px;
+}
+
+@media (min-width: 768px) {
+  footer {
+    padding-left: calc(25% + 50px);
+  }
+}
+
+footer .footer-limiter {
+  max-width: 880px;
+  margin: 0 auto;
+}
+
+footer .footer-left p {
+  color: #8f9296;
+  font-size: 14px;
+  margin: 0;
+}
+
+/* Footer links */
+footer p.footer-links {
+  font-size: 18px;
+  font-weight: bold;
+  color: #ffffff;
+  margin: 0 0 10px;
+  padding: 0;
+}
+
+footer p.footer-links a {
+  display: inline-block;
+  line-height: 1.8;
+  text-decoration: none;
+  color: inherit;
+}
+
+footer .footer-right {
+  float: right;
+  margin-top: 6px;
+  max-width: 180px;
+}
+
+footer .footer-right a {
+  display: inline-block;
+  width: 35px;
+  height: 35px;
+  background-color: #33383b;
+  border-radius: 2px;
+
+  font-size: 20px;
+  color: #ffffff;
   text-align: center;
-  background-color: #fff;
-  opacity: 0.8;
+  line-height: 35px;
+
+  margin-left: 3px;
+  border-radius: 50%;
+  opacity: 0.5;
+}
+footer .footer-right a:hover {
+  opacity: 1;
+}
+
+footer .footer-left {
+  padding-top: 6px;
+  line-height: 35px;
+}
+
+/* If you don't want the footer to be responsive, remove these media queries */
+
+@media (max-width: 600px) {
+  footer .footer-left,
+  footer .footer-right {
+    text-align: center;
+  }
+
+  footer .footer-right {
+    float: none;
+    margin: 0 auto 20px;
+  }
+
+  footer .footer-left p.footer-links {
+    line-height: 1.8;
+  }
 }
 
 .identifier {
@@ -330,14 +404,22 @@ tr:hover .extra-info {
 }
 
 .globe-europe svg {
-  display: inline-block;
-  border-bottom: 0.2em solid transparent;
-  height: 1.2em;
-  fill: rgba(255,255,255,.5)
+  fill: rgba(255, 255, 255, 0.5);
 }
 .navbar-nav .dropdown-toggle:hover .globe-europe svg {
-  fill: rgba(255,255,255,.75);
+  fill: rgba(255, 255, 255, 0.75);
 }
 .navbar-dark .navbar-nav .show > .nav-link svg {
   fill: white;
-}
\ No newline at end of file
+}
+.icon svg {
+  display: inline-block;
+  border-bottom: 0.2em solid transparent;
+  height: 1.2em;
+}
+.icon.plus svg {
+  margin-right: 3px;
+}
+footer .icon svg {
+  fill: white;
+}
diff --git a/ihatemoney/static/images/book.svg b/ihatemoney/static/images/book.svg
new file mode 100644
index 00000000..d27fdae7
--- /dev/null
+++ b/ihatemoney/static/images/book.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z"/></svg>
\ No newline at end of file
diff --git a/ihatemoney/static/images/cog.svg b/ihatemoney/static/images/cog.svg
new file mode 100644
index 00000000..fb5bd35a
--- /dev/null
+++ b/ihatemoney/static/images/cog.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"/></svg>
\ No newline at end of file
diff --git a/ihatemoney/static/images/github.svg b/ihatemoney/static/images/github.svg
new file mode 100644
index 00000000..7870c06d
--- /dev/null
+++ b/ihatemoney/static/images/github.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>
\ No newline at end of file
diff --git a/ihatemoney/static/images/mobile-alt.svg b/ihatemoney/static/images/mobile-alt.svg
new file mode 100644
index 00000000..e8084596
--- /dev/null
+++ b/ihatemoney/static/images/mobile-alt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v312z"/></svg>
\ No newline at end of file
diff --git a/ihatemoney/static/images/plus.svg b/ihatemoney/static/images/plus.svg
new file mode 100644
index 00000000..95992e1f
--- /dev/null
+++ b/ihatemoney/static/images/plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"/></svg>
\ No newline at end of file
diff --git a/ihatemoney/templates/layout.html b/ihatemoney/templates/layout.html
index 10bb6281..5f61949c 100644
--- a/ihatemoney/templates/layout.html
+++ b/ihatemoney/templates/layout.html
@@ -1,6 +1,6 @@
 {% import "forms.html" as forms %}
 <!DOCTYPE html>
-<html>
+<html class="h-100">
 <head>
     <title>{{ _("Account manager") }}{% block title %}{% endblock %}</title>
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
@@ -26,100 +26,125 @@
         });
     </script>
 </head>
-<body>
-  <div class="container">
-    <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
-      <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 %}
-      <ul class="navbar-nav mr-auto">
+<body class="d-flex flex-column h-100">
+  <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
+    <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 %}
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item dropdown">
+        <a href="#" class="nav-link dropdown-toggle" id="navbarProjectsLinks" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <strong class="text-white">{{ g.project.name }}</strong>
+          <b class="caret"></b>
+        </a>
+        <ul class="dropdown-menu" aria-labelledby="navbarProjectsLinks">
+          <li>
+            <a class="dropdown-item" href="{{ url_for("main.create_project") }}">
+              <i class="icon plus">{{ static_include("images/plus.svg") | safe }}</i>
+              {{ _("Start a new project") }}
+            </a>
+          </li>
+
+          {% if (session['projects'] | length) > 1 %}
+          <li class="dropdown-divider"></li>
+          <li class="dropdown-header">{{ _('Other projects :') }}</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 %}
+            {% endfor %}
+          {% endif %}
+        </ul>
+      </li>
+    </ul>
+    {% endif %}
+
+    <div class="collapse navbar-collapse" id="navbarToggler">
+      <ul class="navbar-nav ml-auto mr-auto">
+        {% if g.project %}
+          {% 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>
+          <li class="nav-item{% if current_view == 'edit_project' %} active{% endif %}""><a class="nav-link" href="{{ url_for("main.edit_project") }}">{{ _("Settings") }}</a></li>
+          {% endblock %}
+        {% endif %}
+      </ul>
+      <ul class="navbar-nav ml-auto">
         <li class="nav-item dropdown">
-          <a href="#" class="nav-link dropdown-toggle" id="navbarProjectsLinks" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <strong class="text-white">{{ g.project.name }}</strong>
+          <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="langMenuButton">
+            <i class="icon globe-europe">{{ static_include("images/globe.svg") | safe }}</i>
+            {% if g.lang %}
+              {{ locale_from_iso(g.lang).display_name | capitalize }}
+            {% else %}
+              {{ _('Languages') }}
+            {% endif %}
             <b class="caret"></b>
           </a>
-          <ul class="dropdown-menu" aria-labelledby="navbarProjectsLinks">
-            <li><a class="dropdown-item" href="{{ url_for("main.create_project") }}">{{ _("Start a new project") }}</a></li>
-
-            {% if (session['projects'] | length) > 1 %}
-            <li class="dropdown-divider"></li>
-            <li class="dropdown-header">{{ _('Other projects :') }}</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>
+          <div class="dropdown-menu" aria-labelledby="langMenuButton">
+              <h6 class="dropdown-header">{{ _('Languages') }}</h6>
+              {% for lang in config['SUPPORTED_LANGUAGES'] %}
+                {% if g.lang != lang %}
+                  <a class="dropdown-item" href="{{ url_for("main.change_lang", lang=lang)}}">{{ locale_from_iso(lang).display_name | capitalize }}</a>
                 {% endif %}
               {% endfor %}
-            {% endif %}
-          </ul>
+          </div>
         </li>
+        {% if (session['projects'] | length) > 0 or session['is_admin'] %}
+        <li class="nav-item">
+          <a class="nav-link" href="{{ url_for("main.exit") }}">{{ _("Logout") }}</a>
+        </li>
+        {% endif %}
       </ul>
-      {% endif %}
+    </div>
+  </nav>
 
-      <div class="collapse navbar-collapse" id="navbarToggler">
-        <ul class="navbar-nav ml-auto mr-auto">
-          {% if g.project %}
-            {% 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>
-            <li class="nav-item{% if current_view == 'edit_project' %} active{% endif %}""><a class="nav-link" href="{{ url_for("main.edit_project") }}">{{ _("Settings") }}</a></li>
-            {% endblock %}
-          {% endif %}
-        </ul>
-        <ul class="navbar-nav ml-auto">
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="langMenuButton">
-              <i class="globe-europe">{{ static_include("images/globe.svg") | safe }}</i>
-              {% if g.lang %}
-                {{ locale_from_iso(g.lang).display_name | capitalize }}
-              {% else %}
-                {{ _('Languages') }}
-              {% endif %}
-              <b class="caret"></b>
-            </a>
-            <div class="dropdown-menu" aria-labelledby="langMenuButton">
-                <h6 class="dropdown-header">{{ _('Languages') }}</h6>
-                {% for lang in config['SUPPORTED_LANGUAGES'] %}
-                  {% if g.lang != lang %}
-                    <a class="dropdown-item" href="{{ url_for("main.change_lang", lang=lang)}}">{{ locale_from_iso(lang).display_name | capitalize }}</a>
-                  {% endif %}
-                {% endfor %}
-            </div>
-          </li>
-          {% if (session['projects'] | length) > 0 or session['is_admin'] %}
-          <li class="nav-item">
-            <a class="nav-link" href="{{ url_for("main.exit") }}">{{ _("Logout") }}</a>
-          </li>
-          {% endif %}
-        </ul>
-      </div>
-    </nav>
+  <div class="container-fluid flex-shrink-0">
+  {% block body %}
+      <main class="content offset-1 col-10">
+      {% block content %}{% endblock %}
+      </main>
+  {% endblock %}
   </div>
 
-<div class="container-fluid">
-{% block body %}
-    <main class="content offset-1 col-10">
-    {% block content %}{% endblock %}
-    </main>
-</div>
-{% endblock %}
+  <div class="messages">
+      {% for message in get_flashed_messages() %}
+      <div class="flash alert alert-success">{{ message }}</div>
+      {% endfor %}
+  </div>
 
-<div class="messages">
-    {% for message in get_flashed_messages() %}
-    <div class="flash alert alert-success">{{ message }}</div>
-    {% endfor %}
-</div>
+  {% block footer %}
+  <footer class="footer mt-auto py-3">
+      <div class="footer-limiter">
 
-{% block footer %}
-<footer>
-    <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 %}
+          <div class="footer-right">
+            <a target="_blank" rel="noopener" n data-toggle="tooltip" data-placement="top" title="{{ _('Code') }}" href="https://github.com/spiral-project/ihatemoney">
+              <i class="icon github">{{ static_include("images/github.svg") | safe }}</i>
+            </a>
+            <a target="_blank" rel="noopener" n data-toggle="tooltip" data-placement="top" title="{{ _('Mobile Application') }}" href="https://gitlab.com/eneiluj/moneybuster">
+              <i class="icon mobile">{{ static_include("images/mobile-alt.svg") | safe }}</i>
+            </a>
+            <a target="_blank" rel="noopener" n data-toggle="tooltip" data-placement="top" title="{{ _('Documentation') }}" href="https://ihatemoney.readthedocs.io/en/latest/">
+              <i class="icon book">{{ static_include("images/book.svg") | safe }}</i>
+            </a>
+            {% if g.show_admin_dashboard_link %}
+            <a target="_blank" rel="noopener" n data-toggle="tooltip" data-placement="top" title="{{ _('Administation Dashboard') }}" href="{{ url_for("main.dashboard") }}">
+              <i class="icon admin">{{ static_include("images/cog.svg") | safe }}</i>
+            </a>
+            {% endif %}
+          </div>
+
+          <div class="footer-left">
+            <p>
+              <a href="https://github.com/spiral-project/ihatemoney">{{ _("\"I hate money\" is a free software") }}</a><span class="d-none d-sm-inline"></span>,
+              {{ _("you can contribute and improve it!") }}</span>
+            </p>
+          </div>
+        </div>
+  </footer>
+  {% endblock %}
 
 </body>
 </html>
diff --git a/ihatemoney/templates/sidebar_table_layout.html b/ihatemoney/templates/sidebar_table_layout.html
index 239acb3b..9d588a31 100644
--- a/ihatemoney/templates/sidebar_table_layout.html
+++ b/ihatemoney/templates/sidebar_table_layout.html
@@ -1,7 +1,7 @@
 {% extends "layout.html" %}
 
 {% block body %}
-<div class="row" style="height: 100%">
+<div class="row">
 <aside id="sidebar" class="sidebar col-xs-12 col-md-3 " style="height: 100%">
   {% block sidebar %}{% endblock %}
 </aside>