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 { footer {
flex: none; flex: none;
background-color: #f7f7f9; 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 { #stats {
flex-grow: 1; flex-grow: 1;
margin: 0; margin: 0;
padding: 0; padding: 0;
text-align: center; text-align: center;
} }
#stats li {
margin: 0 1rem; ul#stats {
display: inline-block; 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) { @media (max-width: 767px) {
#stats li {
margin: 0 0.5rem;
}
#stats { #stats {
padding-top: 0.4em; padding-top: 0.4em;
} }
p.stats-label {
margin-bottom: 0.4em;
}
} }
.stats-label { .stats-label {
@ -162,6 +185,8 @@ input#trackname:focus:invalid {
#elevation-btn { #elevation-btn {
align-items: center; align-items: center;
margin-right: 0.5rem; margin-right: 0.5rem;
height: max-content;
align-self: center;
} }
.routing-draw-enabled { .routing-draw-enabled {

48
index.html
View file

@ -772,43 +772,50 @@
<div class="collapse" id="elevation-chart"></div> <div class="collapse" id="elevation-chart"></div>
<footer> <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"> <ul id="stats">
<li> <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 Distance
</div> </div>
<p class="stats-label"> <p class="stats-label">
<span id="distance">-</span> <span id="distance">-</span
<abbr data-i18n="[title]footer.kilometer;footer.kilometer-abbrev" title="kilometers" ><abbr data-i18n="[title]footer.kilometer;footer.kilometer-abbrev" title="kilometers"
>km</abbr >km</abbr
> >
</p> </p>
</li> </li>
<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 Travel time
</div> </div>
<p class="stats-label"> <p class="stats-label">
<span id="totaltime">-</span> <span id="totaltime">-</span
<abbr data-i18n="[title]footer.hours;footer.hours-abbrev" title="hours">h</abbr> ><abbr data-i18n="[title]footer.hours;footer.hours-abbrev" title="hours">h</abbr>
</p> </p>
</li> </li>
<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.total-energy">Total Energy</span>
| |
<span data-i18n="footer.energy-per-100km">Energy per 100 km</span> <span data-i18n="footer.energy-per-100km">Energy per 100 km</span>
</div> </div>
<p class="stats-label"> <p class="stats-label">
<span id="totalenergy">-</span> <span id="totalenergy">-</span
<abbr ><abbr
class="d-none d-md-inline"
data-i18n="[title]footer.kilowatthour;footer.kilowatthour-abbrev" data-i18n="[title]footer.kilowatthour;footer.kilowatthour-abbrev"
title="kilowatt hours" title="kilowatt hours"
>kWh</abbr >kWh</abbr
> >
| <span id="meanenergy">-</span> | <span id="meanenergy">-</span
<abbr ><abbr
data-i18n="[title]footer.kilowatthour;footer.kilowatthour-abbrev" data-i18n="[title]footer.kilowatthour;footer.kilowatthour-abbrev"
title="kilowatt hours" title="kilowatt hours"
>kWh</abbr >kWh</abbr
@ -816,19 +823,24 @@
</p> </p>
</li> </li>
<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.ascend">Ascend</span> |
<span data-i18n="footer.plain-ascend">Plain ascend</span> <span data-i18n="footer.plain-ascend">Plain ascend</span>
</div> </div>
<p class="stats-label"> <p class="stats-label">
<span id="ascend">-</span> <span id="ascend">-</span
<abbr data-i18n="[title]footer.meter;footer.meter-abbrev" title="meters">m</abbr> ><abbr
| <span id="plainascend">-</span> class="d-none d-md-inline"
<abbr data-i18n="[title]footer.meter;footer.meter-abbrev" title="meters">m</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>
</p> </p>
</li> </li>
<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.cost">Cost</span> |
<span data-i18n="footer.mean-cost-factor">Mean cost factor</span> <span data-i18n="footer.mean-cost-factor">Mean cost factor</span>
</div> </div>

13
js/control/TrackStats.js
View file

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

1
locales/en.json
View file

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