Improve stats footer on mobile #296

nrenner · May 24, 2020 · d8b3a21 · d8b3a21
1 parent 52be57f
commit d8b3a21
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 26 deletions.
diff --git 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;
 }
+
+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 {

diff --git a/index.html b/index.html
@@ -772,63 +772,75 @@ <h1 class="leaflet-sidebar-header">
         <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
                             >
                         </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
@@ -1,6 +1,8 @@
 BR.TrackStats = L.Class.extend({
     update: function(polyline, segments) {
         if (segments.length == 0) {
+            $('#stats-container').hide();
+            $('#stats-info').show();
             $('#distance').html('-');
             $('#distance').attr('title', '');
             $('#ascend').html('-');
@@ -13,6 +15,8 @@ BR.TrackStats = L.Class.extend({
             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
@@ -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"
   },