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

41
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;
}
ul#stats {
display: flex;
align-items: stretch;
justify-content: space-around;
width: 100%;
margin: 0;
padding: 0;
}
#stats li {
margin: 0 1rem;
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>

3
js/Map.js
View file

@ -12,12 +12,15 @@ BR.Map = {
minZoom: 0,
maxZoom: maxZoom
});
if (BR.Util.getResponsiveBreakpoint() >= '3md') {
L.control
.zoom({
zoomInTitle: i18next.t('map.zoomInTitle'),
zoomOutTitle: i18next.t('map.zoomOutTitle')
})
.addTo(map);
}
if (!map.restoreView()) {
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) {
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({
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(),
length3 = L.Util.formatNum(stats.trackLength / 1000, 3).toLocaleString(undefined, {
minimumFractionDigits: 3
}),
formattedAscend = stats.filteredAscend.toLocaleString(),
formattedPlainAscend = stats.plainAscend.toLocaleString(),
formattedCost = stats.cost.toLocaleString(),

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