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

Merge pull request #298 from nrenner/improve-mobile-stats

Browse source 
Improve mobile stats
This commit is contained in:
Norbert Renner 2020-05-25 18:50:09 +02:00 • committed by GitHub
commit f077124f66
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 101 additions and 44 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>

15
js/Map.js
View file

@ -12,12 +12,15 @@ BR.Map = {
minZoom: 0, minZoom: 0,
maxZoom: maxZoom maxZoom: maxZoom
}); });
L.control
.zoom({ if (BR.Util.getResponsiveBreakpoint() >= '3md') {
zoomInTitle: i18next.t('map.zoomInTitle'), L.control
zoomOutTitle: i18next.t('map.zoomOutTitle') .zoom({
}) zoomInTitle: i18next.t('map.zoomInTitle'),
.addTo(map); zoomOutTitle: i18next.t('map.zoomOutTitle')
})
.addTo(map);
}
if (!map.restoreView()) { if (!map.restoreView()) {
map.setView(BR.conf.initialMapLocation || [50.99, 9.86], BR.conf.initialMapZoom || 5); map.setView(BR.conf.initialMapLocation || [50.99, 9.86], BR.conf.initialMapZoom || 5);
} }

19
js/Util.js
View file

@ -48,5 +48,24 @@ BR.Util = {
} catch (e) { } catch (e) {
return false; return false;
} }
},
// see https://stackoverflow.com/a/37141090/1906123
getResponsiveBreakpoint: function() {
var envs = { '1xs': 'd-none', '2sm': 'd-sm-none', '3md': 'd-md-none', '4lg': 'd-lg-none', '5xl': 'd-xl-none' };
var env = '';
var $el = $('<div>');
$el.appendTo($('body'));
for (var i = Object.keys(envs).length - 1; i >= 0; i--) {
env = Object.keys(envs)[i];
$el.addClass(envs[env]);
if ($el.is(':hidden')) {
break; // env detected
}
}
$el.remove();
return env;
} }
}; };

17
js/control/TrackStats.js
View file

@ -1,21 +1,18 @@
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(), length3 = L.Util.formatNum(stats.trackLength / 1000, 3).toLocaleString(undefined, {
minimumFractionDigits: 3
}),
formattedAscend = stats.filteredAscend.toLocaleString(), formattedAscend = stats.filteredAscend.toLocaleString(),
formattedPlainAscend = stats.plainAscend.toLocaleString(), formattedPlainAscend = stats.plainAscend.toLocaleString(),
formattedCost = stats.cost.toLocaleString(), formattedCost = stats.cost.toLocaleString(),

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"
}, },