* Tweaked some minor aspects of browser presentation.

diff --git a/dash.html b/dash.html
index 87c07375c117d35e36d1fdc50db3ebea77e64ea9..a959e9759f5a0871dbe7694b2ef464811c8672d0 100644 (file)
--- a/dash.html
+++ b/dash.html
@@ -23,14 +23,17 @@ x-boxleft, x-boxright {
 }
 x-boxleft { float:left; }
 x-boxright { float:right; }
-.clear { clear:both; }
+
+.clear {
+  clear:both;
+}
 .cont {
   min-width:14.5em;
-  padding: 0.2em;
-  border: solid 2px grey;
+  padding: 2px;
+  border: solid 1px grey;
 }
 .bar {
-  min-width:15em;
+  min-width:14.5em;
 }
 
 table, caption, tbody, tfoot, thead, tr, th, td {
@@ -44,6 +47,7 @@ table, caption, tbody, tfoot, thead, tr, th, td {
   vertical-align: baseline;
   background: transparent;
 }
+table { width: 100%; }
 
 .aright { text-align: right; }
 .aleft { text-align: left; }
@@ -54,7 +58,8 @@ table, caption, tbody, tfoot, thead, tr, th, td {
 .medium { font-size: 4em; }
 .small { font-size: 2.5em; }
 .smaller { font-size: 1.8em; }
-.tiny { font-size: 1.2em; }
+.tiny { font-size: 1em; }
+.tinyb { font-size: 1em; font-weight: bold; }
 
 .warn1 { color:#fd0; }
 .warn2 { color:#f20; }
@@ -66,9 +71,7 @@ x-bar {
   display: block;
   clear: both;
   width: 100%;
-  padding: 0.2em;
-  margin: 0.1em;
-  border: none;
+  padding: 3px;
   font-size: 150%;
 }
 .pause {
@@ -82,7 +85,12 @@ x-bar {
   display: none;
 }
 .nosleep {
-  font-size: 80%;
+  background-color: #000;
+  color: #ff8;
+  font-size: 90%;
+}
+.nosleepon {
+  color: #af8;
 }
 
 </style>
@@ -92,33 +100,33 @@ x-bar {
 <x-page id="page">
 
 <x-boxleft id="speedo" class="cont">
-  <table style="width:100%;">
-    <tr><td colspan="2" class="aright"><span class="big" id="speed">--</span></td><td><span class="tiny"> km/h</span></td></tr>
+  <table>
+    <tr><td colspan="2" class="aright"><span class="big" id="speed">--</span></td><td><span class="tinyb"> km/h</span></td></tr>
     <tr>
       <td class="small"><svg width="50" height="50">
         <circle cx="25" cy="25" r="22" stroke="red" stroke-width="6" fill="white" id="nav_slimitsign"/>
         <text fill="#000" font-size="24" font-family="sans-serif" font-weight="normal" x="10" y="34" id="nav_slimit">&nbsp;–</text>
       </svg>&nbsp;&nbsp;</td>
-      <td class="aright"><span class="medium setval" id="cctrl">-</span></td><td><span class="tiny"> km/h</span></td>
+      <td class="aright"><span class="medium setval" id="cctrl">-</span></td><td><span class="tinyb"> km/h</span></td>
     </tr>
     <tr><td><span class="small setval" id="gear">-</span></td>
-        <td class="aright"><span class="small" id="rpm">-</span></td><td><span class="tiny"> rpm</span></td></tr>
+        <td class="aright"><span class="small" id="rpm">-</span></td><td><span class="tinyb"> rpm</span></td></tr>
   </table>
 </x-boxleft>
 
 <x-boxleft id="range" class="cont">
-  <table style="width:100%;">
-    <tr><td class="tiny">Fuel</td><td class="aright"><span class="small" id="fuel">-</span></td><td><span class="tiny"> l</span></td></tr>
-    <tr><td class="tiny">Range</td><td class="aright"><span class="small" id="fuel_range">-</span></td><td><span class="tiny"> km</span></td></tr>
-    <tr><td class="tiny">Current</td><td class="aright" colspan="2"><span class="smaller" id="fuel_cons">-</span><span class="tiny"> l/100km</span></td></tr>
-    <tr><td class="tiny">Average</td><td class="aright" colspan="2"><span class="smaller" id="fuel_avg">-</span><span class="tiny"> l/100km</span></td></tr>
-    <tr><td class="tiny">Mileage</td><td class="aright" colspan="2"><span class="smaller" id="odometer">-</span><span class="tiny">km</span></td></tr>
+  <table>
+    <tr><td class="tiny">Fuel</td><td class="aright"><span class="small" id="fuel">-</span></td><td><span class="tinyb"> l</span></td></tr>
+    <tr><td class="tiny">Range</td><td class="aright"><span class="small" id="fuel_range">-</span></td><td><span class="tinyb"> km</span></td></tr>
+    <tr><td class="tiny">Current</td><td class="aright" colspan="2"><span class="smaller" id="fuel_cons">-</span><span class="tinyb"> l/100km</span></td></tr>
+    <tr><td class="tiny">Average</td><td class="aright" colspan="2"><span class="smaller" id="fuel_avg">-</span><span class="tinyb"> l/100km</span></td></tr>
+    <tr><td class="tiny">Mileage</td><td class="aright" colspan="2"><span class="smaller" id="odometer">-</span><span class="tinyb">km</span></td></tr>
   </table>
 </x-boxleft>
 
 <x-boxleft id="nav" class="cont">
-  <table style="width:100%;">
-    <tr><td class="tiny">Distance</td><td><span class="small" id="nav_dist">-</span><span class="tiny"> km</span></td></tr>
+  <table>
+    <tr><td class="tiny">Distance</td><td><span class="small" id="nav_dist">-</span><span class="tinyb"> km</span></td></tr>
     <tr><td class="tiny">ETA</td><td><span class="small" id="nav_eta">-</span></td></tr>
     <tr><td class="tiny">Next rest</td><td><span class="small" id="next_rest">-</span></td></tr>
     <tr><td class="tiny">Deadline</td><td><span class="small" id="job_ttd">-</span></td></tr>
@@ -126,21 +134,21 @@ x-bar {
 </x-boxleft>
 
 <x-boxleft id="job" class="cont">
-  <table style="width:100%;">
-    <tr><td class="tiny">Vehicle&nbsp;</td><td><span class="tiny" id="vehicle">-</span></td></tr>
-    <tr><td class="tiny">Trailers&nbsp;</td><td><span class="tiny" id="trailer">-</span></td></tr>
-    <tr><td class="tiny">Cargo&nbsp;</td><td><span class="tiny" id="cargo">-</span></td></tr>
-    <tr><td class="tiny">Mass&nbsp;</td><td><span class="tiny" id="cargomass">-</span></td></tr>
-    <tr><td class="tiny">From&nbsp;</td><td><span class="tiny" id="source">-</span></td></tr>
-    <tr><td class="tiny">To&nbsp;</td><td><span class="tiny" id="destination">-</span></td></tr>
-    <tr><td class="tiny">Reward&nbsp;</td><td><span class="tiny" id="reward">-</span></td></tr>
+  <table>
+    <tr><td class="tiny">Vehicle&nbsp;</td><td><span class="tinyb" id="vehicle">-</span></td></tr>
+    <tr><td class="tiny">Trailers&nbsp;</td><td><span class="tinyb" id="trailer">-</span></td></tr>
+    <tr><td class="tiny">Cargo&nbsp;</td><td><span class="tinyb" id="cargo">-</span></td></tr>
+    <tr><td class="tiny">Mass&nbsp;</td><td><span class="tinyb" id="cargomass">-</span></td></tr>
+    <tr><td class="tiny">From&nbsp;</td><td><span class="tinyb" id="source">-</span></td></tr>
+    <tr><td class="tiny">To&nbsp;</td><td><span class="tinyb" id="destination">-</span></td></tr>
+    <tr><td class="tiny">Reward&nbsp;</td><td><span class="tinyb" id="reward">-</span></td></tr>
   </table>
 </x-boxleft>
 
 <x-boxleft id="range" class="bar clear">
   <x-bar class="pause" id="pausebar">Paused</x-bar>
-  <x-bar class="error" id="errbar"></x-bar>
-  <x-bar class="nosleep" id="nsbar">---</x-bar>
+  <x-bar class="error" id="errbar">&nbsp;</x-bar>
+  <x-bar class="nosleep" id="nsbar">&nbsp;</x-bar>
 </x-boxleft>
 
 </x-page>
@@ -306,8 +314,10 @@ function update_cb() {
 
     // current fuel consumption:
     if ( last_fuel != tele.fuel && last_odometer != tele.odometer ) {
-      if ( last_fuel > 0 && last_odometer > 0 )
-        fuel_cons.innerHTML = ((last_fuel-tele.fuel)*100 / (tele.odometer-last_odometer)).toFixed(1);
+      if ( last_fuel > 0 && last_odometer > 0 ) {
+        var fc = (last_fuel-tele.fuel)*100 / (tele.odometer-last_odometer);
+        fuel_cons.innerHTML = fc > 999 ? '∞' : fc.toFixed(1);
+      }
       last_fuel = tele.fuel;
       last_odometer = tele.odometer;
     }
@@ -345,7 +355,7 @@ function update_cb() {
       ? tele.job_deltime != 4294967295
         ? m2hm(tele.job_deltime - tele.game_time)
         : '<span class="special">[external]</span>'
-      : '<span class="special">[none]</span>'
+      : '-'
 
     //// "job" box
 
@@ -476,8 +486,8 @@ function installNoSleepHandler() {
     function enableNoSleep() {
       document.removeEventListener('click', enableNoSleep, false);
       noSleep.enable();
-      nsbar.innerHTML = "NoSleep enabled!";
-      nsbar.style.color = "#a00";
+      nsbar.innerHTML = "NoSleep enabled.";
+      nsbar.classList.add("nosleepon");
     },
     false
   );
@@ -487,8 +497,8 @@ function installNoSleepHandler() {
 function disableNoSleep() {
   noSleep.disable();
   installNoSleepHandler();
-  nsbar.innerHTML = "NoSleep disabled.<br>Click to enable.";
-  nsbar.style.color = "#0a0";
+  nsbar.innerHTML = "Click page to enable NoSleep.";
+  nsbar.classList.remove("nosleepon");
 }
 
 disableNoSleep();