Better tooltips and icons

This commit is contained in:
Alexandre Iooss 2020-04-10 22:22:07 +02:00
parent 57226a0733
commit 64499b65bb
No known key found for this signature in database
GPG Key ID: 6C79278F3FCDCC02
3 changed files with 11 additions and 3 deletions

View File

@ -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";
}

View File

@ -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>

View File

@ -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>