From 52be57f5ba9895e5bf997ba3e30eb5547386f72f Mon Sep 17 00:00:00 2001
From: Gautier P <gautier+git@damsy.net>
Date: Sun, 24 May 2020 15:35:56 +0200
Subject: [PATCH 1/3] Always display 3 digits for distance title, even when
 ending with zeros

---
 js/control/TrackStats.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/js/control/TrackStats.js b/js/control/TrackStats.js
index 41c75b0..355b551 100644
--- a/js/control/TrackStats.js
+++ b/js/control/TrackStats.js
@@ -15,7 +15,9 @@ BR.TrackStats = L.Class.extend({
 
         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(),

From a358aed464061e79da35dfb7a42b5f4ae82b6706 Mon Sep 17 00:00:00 2001
From: Gautier P <gautier+git@damsy.net>
Date: Sun, 24 May 2020 19:20:45 +0200
Subject: [PATCH 2/3] Improve stats footer on mobile #296

---
 css/style.css            | 45 ++++++++++++++++++++++++++++---------
 index.html               | 48 +++++++++++++++++++++++++---------------
 js/control/TrackStats.js | 13 ++++-------
 locales/en.json          |  1 +
 4 files changed, 70 insertions(+), 37 deletions(-)

diff --git a/css/style.css b/css/style.css
index ea11721..cf015bd 100644
--- a/css/style.css
+++ b/css/style.css
@@ -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 {
diff --git a/index.html b/index.html
index 50dcf0a..31fb2d2 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/js/control/TrackStats.js b/js/control/TrackStats.js
index 355b551..f5b281b 100644
--- a/js/control/TrackStats.js
+++ b/js/control/TrackStats.js
@@ -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, {
diff --git a/locales/en.json b/locales/en.json
index 364c413..8cd6a5d 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -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"
   },

From 92ad30be17d5e5e9081d565a8219e42653dcbff7 Mon Sep 17 00:00:00 2001
From: Gautier P <gautier+git@damsy.net>
Date: Sun, 24 May 2020 21:23:58 +0200
Subject: [PATCH 3/3] Hide zoom controls on mobile

---
 js/Map.js  | 15 +++++++++------
 js/Util.js | 19 +++++++++++++++++++
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/js/Map.js b/js/Map.js
index a05a762..db29f68 100644
--- a/js/Map.js
+++ b/js/Map.js
@@ -12,12 +12,15 @@ BR.Map = {
             minZoom: 0,
             maxZoom: maxZoom
         });
-        L.control
-            .zoom({
-                zoomInTitle: i18next.t('map.zoomInTitle'),
-                zoomOutTitle: i18next.t('map.zoomOutTitle')
-            })
-            .addTo(map);
+
+        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);
         }
diff --git a/js/Util.js b/js/Util.js
index 8dbbd31..643ae0d 100644
--- a/js/Util.js
+++ b/js/Util.js
@@ -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;
     }
 };