Closes rossengeorgiev#5, closes rossengeorgiev#7, closes rossengeorgiev#8

* round numbers displayed on Chase Car view, issue rossengeorgiev#7
* hide overflow of the vehicle name (when they are long), issue rossengeorgiev#5
* start up the app with a line saying 'no vehicles', which disapperas
  as soon as anything appears on the list, issue rossengeorgiev#8
* updated TODO

Author: rossengeorgiev

TODO

@@ -10,14 +10,6 @@
 
 * in the field tracking view, distance to target vehicle
 
-Optimizations
------------------------
-
-* minimize footprint
-
-* combine+minify JS into a single file
-  (Google Closure? Requires rewritting)
-
 known bugs
 ------------------------
 

css/main.css

@@ -94,11 +94,20 @@ header > div {
     font-weight: normal;
     float: right;
     color: #aaa;
+    }
+#main .header span {
+    overflow: hidden; 
+    display: block;
+    width: 90%;
+    float: left;
+}
+#main .header span.center {
+    text-align: center;
 }
 .row .header .arrow:after { content: "▲"; }
 .row.active .header .arrow:after { content: "▼"; }
 
-#main .row { margin: 0; padding: 0; position: relative; }
+#main .row { background-color: #f4f4f4; margin: 0; padding: 0; position: relative; }
 #main .row  .header {
     position: relative;
     z-index: 4;
@@ -264,9 +273,8 @@ header > div {
         border-bottom: 2px solid #33b5e5;
     }
     #main .data {
-        background-color: #f4f4f4;
         height: 100%;
-        padding-bottom: 10px;
+        padding-bottom: 5px;
     }
     #main .data .left {
         float: left;
@@ -314,7 +322,6 @@ header > div {
         border-bottom: 2px solid #33b5e5;
     }
     #main .data {
-        background-color: #f4f4f4;
         height: 140px;
     }
     #main .data .left {

css/mobile.css

@@ -87,8 +87,12 @@ <h2>Chase car mode</h2>
     <div id="map" style="dispaly: none"></div>
     <div id="main" style="dispaly: none">
         <div class="scrollwrapper">
-        <div class="portrait"></div>
-        <div class="landscape"></div>
+        <div class="portrait">
+            <div class="row active vehicle0"><div class="header"><span class="center">No vehicles :(</span></div></div>
+        </div>
+        <div class="landscape">
+            <div class="row active vehicle0"><div class="header"><span class="center">No vehicles :(</span></div></div>
+        </div>
     </div>
     </div>
     <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=AIzaSyCOqkcNey4CCyG4X0X5qxHAhCgD8g5DwXg" type="text/javascript"></script>

index.html

@@ -238,8 +238,11 @@ $(window).ready(function() {
                 updateCurrentPosition(lat, lon);
 
                 // round the coordinates
-                lat = parseInt(lat * 1000000)/1000000;
-                lon = parseInt(lon * 1000000)/1000000;
+                lat = parseInt(lat * 1000000)/1000000;  // 6 decimal places
+                lon = parseInt(lon * 1000000)/1000000;  // 6 decimal places
+                speed = parseInt(speed * 10)/10;        // 1 decimal place
+                accuracy = parseInt(accuracy);
+                alt = parseInt(alt);
 
                 // dispaly them in the top right corner
                 $('#app_name b').html(lat + '<br/>' + lon);

js/app.js

@@ -503,7 +503,7 @@ function updateVehicleInfo(index, position) {
 
   ascent_text = position.gps_alt != 0 ? vehicles[index].ascent_rate.toFixed(1) + ' m/s' : '';
   // start
-  var a    = '<div class="header">' + vehicle_names[index] + '<i class="arrow"></i></div>'
+  var a    = '<div class="header"><span>' + vehicle_names[index] + '</span><i class="arrow"></i></div>'
            + '<div class="data">'
            + '<img src="'+image+'" />'
            + '<div class="left">'