closes rossengeorgiev#6

* on mobile devices the coordinates for each vehicle are
  now clickable. Upon which they laucnh the native maps app
  (should be useful for getting nav directions to balloon)
* tiny changes in the style sheets

Author: rossengeorgiev

css/main.css

@@ -101,8 +101,10 @@ header > div {
     width: 90%;
     float: left;
 }
-#main .header span.center {
+#main .header.empty {
     text-align: center;
+    width: 100%;
+    border: 0;
 }
 .row .header .arrow:after { content: "▲"; }
 .row.active .header .arrow:after { content: "▼"; }
@@ -129,6 +131,13 @@ header > div {
     right: 25%;
     opacity: 0.6;
 }
+#main .row .data dt > i { 
+    font-size: 12px;
+}
+#main .row .data a { 
+    text-decoration: none;
+    color: #00A3D3;
+}
 
 #chasecarbox,
 #aboutbox {

css/mobile.css

@@ -88,10 +88,10 @@ <h2>Chase car mode</h2>
     <div id="main" style="dispaly: none">
         <div class="scrollwrapper">
         <div class="portrait">
-            <div class="row active vehicle0"><div class="header"><span class="center">No vehicles :(</span></div></div>
+            <div class="row active vehicle0"><div class="header empty"><span>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 class="row active vehicle0"><div class="header empty"><span>No vehicles :(</span></div></div>
         </div>
     </div>
     </div>

index.html

@@ -53,6 +53,11 @@ $(window).ready(function() {
     // add inline scroll to vehicle list
     listScroll = new iScroll('main', { hScrollbar: false, hScroll: false, snap: false });
 
+    // confirm dialog when launchnig a native map app with coordinates
+    $('#main').on('click', '#launch_mapapp', function() {
+        return confirm("Launch your maps app?");
+    });
+
     // expand list items
     $('#main').on('click', '.row .header', function() {
         var e = $(this).parent();

js/app.js

@@ -501,7 +501,21 @@ function updateVehicleInfo(index, position) {
 
   }
 
-  ascent_text = position.gps_alt != 0 ? vehicles[index].ascent_rate.toFixed(1) + ' m/s' : '';
+  var ascent_text = position.gps_alt != 0 ? vehicles[index].ascent_rate.toFixed(1) + ' m/s' : '';
+  
+  var coords_text;
+  var ua =  navigator.userAgent.toLowerCase();
+  if(ua.indexOf('iphone') > -1) { 
+      coords_text = '<a id="launch_mapapp" href="http://maps.google.com/?q='+position.gps_lat+','+position.gps_lon+'">'
+                    + roundNumber(position.gps_lat, 6) + ',' + roundNumber(position.gps_lon, 6) +'</a>'
+                    + ' <i class="icon-location"></i>';
+  } else if(ua.indexOf('android') > -1) { 
+      coords_text = '<a id="launch_mapapp" href="geo:0,0?q='+position.gps_lat+','+position.gps_lon+'">'
+                    + roundNumber(position.gps_lat, 6) + ',' + roundNumber(position.gps_lon, 6) +'</a>'
+                    + ' <i class="icon-location"></i>';
+  } else {
+      coords_text = roundNumber(position.gps_lat, 6) + ',' + roundNumber(position.gps_lon, 6);
+  }
   // start
   var a    = '<div class="header"><span>' + vehicle_names[index] + '</span><i class="arrow"></i></div>'
            + '<div class="data">'
@@ -515,7 +529,7 @@ function updateVehicleInfo(index, position) {
            + '';
   // mid for portrait
   var p    = '<dt>'+position.gps_time+'</dt><dd>time</dd>'
-           + '<dt>'+ roundNumber(position.gps_lat, 6) + ',' + roundNumber(position.gps_lon, 6) +'</dt><dd>time</dd>'
+           + '<dt>'+coords_text+'</dt><dd>time</dd>'
            + '<dt class="recievers">Recieved by:</dt><dd class="recievers">'
            + position.callsign.split(",").join(", ")
            + '</dd></dl>'
@@ -530,7 +544,7 @@ function updateVehicleInfo(index, position) {
   var l    = '<dt>'+ascent_text+'</dt><dd>rate</dd>'
            + '<dt>'+position.gps_alt+'m ('+vehicles[index].max_alt+'m)</dt><dd>altitude (max)</dd>'
            + '<dt>'+position.gps_time+'</dt><dd>time</dd>'
-           + '<dt>'+ roundNumber(position.gps_lat, 6) + ', ' + roundNumber(position.gps_lon, 6) +'</dt><dd>coordinates</dd>'
+           + '<dt>'+coords_text+'</dt><dd>coordinates</dd>'
            + '<dt class="recievers">Recieved by:</dt><dd class="recievers">'
            + position.callsign.split(",").join(", ")
            + '</dd>';