ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Improve stats footer on mobile #296

Browse source
This commit is contained in:
Gautier P 2020-05-24 19:20:45 +02:00
parent 52be57f5ba
commit a358aed464
4 changed files with 70 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

45
css/style.css
View file

@ -79,30 +79,53 @@ table.dataTable {
footer {
flex: none;
background-color: #f7f7f9;
}
#stats-container {
display: flex;
}
#stats-info {
align-items: center;
height: 46px;
display: none;
}
#stats-info[style*='display: block'] {
display: flex !important;
}
#stats-info > div {
margin: auto;
}
#stats {
flex-grow: 1;
margin: 0;
padding: 0;
text-align: center;
}
#stats li {
margin: 0 1rem;
display: inline-block;
ul#stats {
display: flex;
align-items: stretch;
justify-content: space-around;
width: 100%;
margin: 0;
padding: 0;
}
#stats li {
display: inline-block;
flex: 0 1 auto;
list-style-type: none;
}
p.stats-label {
margin-bottom: 0.2em;
}
@media (max-width: 767px) {
#stats li {
margin: 0 0.5rem;
}
#stats {
padding-top: 0.4em;
}
p.stats-label {
margin-bottom: 0.4em;
}
}
.stats-label {
@ -162,6 +185,8 @@ input#trackname:focus:invalid {
#elevation-btn {
align-items: center;
margin-right: 0.5rem;
height: max-content;
align-self: center;
}
.routing-draw-enabled {

48
index.html
View file

@ -772,43 +772,50 @@
<div class="collapse" id="elevation-chart"></div>
<footer>
<div class="flexrow">
<div id="stats-info">
<div>
<span class="fa fa-info-circle"></span>
<span data-i18n="footer.stats-info">Start drawing a route to get stats.</span>
</div>
</div>
<div id="stats-container" class="flexrow">
<ul id="stats">
<li>
<div class="text-muted small d-none d-sm-block" data-i18n="footer.distance">
<div class="text-muted small d-none d-md-block" data-i18n="footer.distance">
Distance
</div>
<p class="stats-label">
<span id="distance">-</span>
<abbr data-i18n="[title]footer.kilometer;footer.kilometer-abbrev" title="kilometers"
<span id="distance">-</span
><abbr data-i18n="[title]footer.kilometer;footer.kilometer-abbrev" title="kilometers"
>km</abbr
>
</p>
</li>
<li>
<div class="text-muted small d-none d-sm-block" data-i18n="footer.travel-time">
<div class="text-muted small d-none d-md-block" data-i18n="footer.travel-time">
Travel time
</div>
<p class="stats-label">
<span id="totaltime">-</span>
<abbr data-i18n="[title]footer.hours;footer.hours-abbrev" title="hours">h</abbr>
<span id="totaltime">-</span
><abbr data-i18n="[title]footer.hours;footer.hours-abbrev" title="hours">h</abbr>
</p>
</li>
<li>
<div class="text-muted small d-none d-sm-block">
<div class="text-muted small d-none d-md-block">
<span data-i18n="footer.total-energy">Total Energy</span>
|
<span data-i18n="footer.energy-per-100km">Energy per 100 km</span>
</div>
<p class="stats-label">
<span id="totalenergy">-</span>
<abbr
<span id="totalenergy">-</span
><abbr
class="d-none d-md-inline"
data-i18n="[title]footer.kilowatthour;footer.kilowatthour-abbrev"
title="kilowatt hours"
>kWh</abbr
>
| <span id="meanenergy">-</span>
<abbr
| <span id="meanenergy">-</span
><abbr
data-i18n="[title]footer.kilowatthour;footer.kilowatthour-abbrev"
title="kilowatt hours"
>kWh</abbr
@ -816,19 +823,24 @@
</p>
</li>
<li>
<div class="text-muted small d-none d-sm-block">
<div class="text-muted small d-none d-md-block">
<span data-i18n="footer.ascend">Ascend</span> |
<span data-i18n="footer.plain-ascend">Plain ascend</span>
</div>
<p class="stats-label">
<span id="ascend">-</span>
<abbr data-i18n="[title]footer.meter;footer.meter-abbrev" title="meters">m</abbr>
| <span id="plainascend">-</span>
<abbr data-i18n="[title]footer.meter;footer.meter-abbrev" title="meters">m</abbr>
<span id="ascend">-</span
><abbr
class="d-none d-md-inline"
data-i18n="[title]footer.meter;footer.meter-abbrev"
title="meters"
>m</abbr
>
| <span id="plainascend">-</span
><abbr data-i18n="[title]footer.meter;footer.meter-abbrev" title="meters">m</abbr>
</p>
</li>
<li>
<div class="text-muted small d-none d-sm-block">
<div class="text-muted small d-none d-md-block">
<span data-i18n="footer.cost">Cost</span> |
<span data-i18n="footer.mean-cost-factor">Mean cost factor</span>
</div>

13
js/control/TrackStats.js
View file

@ -1,18 +1,13 @@
BR.TrackStats = L.Class.extend({
update: function(polyline, segments) {
if (segments.length == 0) {
$('#distance').html('-');
$('#distance').attr('title', '');
$('#ascend').html('-');
$('#plainascend').html('-');
$('#cost').html('-');
$('#meancostfactor').html('-');
$('#totaltime').html('-');
$('#totalenergy').html('-');
$('#meanenergy').html('-');
$('#stats-container').hide();
$('#stats-info').show();
return;
}
$('#stats-container').show();
$('#stats-info').hide();
var stats = this.calcStats(polyline, segments),
length1 = L.Util.formatNum(stats.trackLength / 1000, 1).toLocaleString(),
length3 = L.Util.formatNum(stats.trackLength / 1000, 3).toLocaleString(undefined, {

1
locales/en.json
View file

@ -51,6 +51,7 @@
"meter": "meters",
"meter-abbrev": "m",
"plain-ascend": "Plain ascend",
"stats-info": "Start drawing a route to get stats.",
"total-energy": "Total Energy",
"travel-time": "Travel time"
},