Better tooltips and icons

static/js/base.js

@@ -86,7 +86,7 @@ function getMatchedNotes(pattern, fun) {
  * Generate a <li> entry with a given id and text
  */
 function li(id, text, extra_css) {
-    return "<li class=\"list-group-item py-1 d-flex justify-content-between align-items-center " + extra_css + "\"" +
+    return "<li class=\"list-group-item p-1 text-truncate " + extra_css + "\"" +
         " id=\"" + id + "\">" + text + "</li>\n";
 }
 

templates/base.html

@@ -32,7 +32,8 @@ SPDX-License-Identifier: GPL-3.0-or-later
           integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
           crossorigin="anonymous">
     <link rel="stylesheet"
-          href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+          href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
+          crossorigin="anonymous">
 
     {# JQuery, Bootstrap and Turbolinks JavaScript #}
     <script src="https://code.jquery.com/jquery-3.4.1.min.js"
@@ -61,8 +62,13 @@ SPDX-License-Identifier: GPL-3.0-or-later
         .tooltip-inner {
             background-color: #fff;
             box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
-            border: 1px solid #000;
+            border: 1px solid rgba(0,0,0,.250);
             color: #000;
+            margin: 0 .5rem .25rem .5rem;
+            padding: 0;
+        }
+        .bs-tooltip-bottom .arrow::before {
+            border-bottom-color: rgba(0,0,0,.250);
         }
     </style>
 

templates/note/conso_form.html

@@ -127,10 +127,12 @@
                     <div class="btn-group btn-group-toggle float-right" data-toggle="buttons">
                         <label for="single_conso" class="btn btn-sm btn-outline-primary active">
                             <input type="radio" name="conso_type" id="single_conso" checked>
+                            <i class="fa fa-long-arrow-left" aria-hidden="true"></i>
                             {% trans "Single consumptions" %}
                         </label>
                         <label for="double_conso" class="btn btn-sm btn-outline-primary">
                             <input type="radio" name="conso_type" id="double_conso">
+                            <i class="fa fa-arrows-h" aria-hidden="true"></i>
                             {% trans "Double consumptions" %}
                         </label>
                     </div>