swap scrollbar side; chasecar disabled on desktops

Author: rossengeorgiev

cache.manifest

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# version 45
+# version 46
 
 # gogole maps files
 http://maps.google.com/maps/api/js?v=3.10&sensor=false&key=AIzaSyCOqkcNey4CCyG4X0X5qxHAhCgD8g5DwXg

css/main.css

@@ -1,6 +1,6 @@
 /* Habitat Mobile Tracker
  * Main style sheet
- * 
+ *
  */
 
 html, body {
@@ -11,6 +11,25 @@ html, body {
     overflow: hidden;
 }
 
+.scrollStyleV {
+    z-index: 100;
+    width: 5px;
+    bottom: 6px;
+    top: 6px;
+    left: 1px;
+    position: absolute;
+}
+
+.scrollStyleV > div {
+    position: absolute;
+    background: none repeat scroll 0 0 padding-box rgba(0, 0, 0, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.9);
+    border-radius: 3px 3px 3px 3px;
+    position: absolute;
+    width: 100%;
+    z-index: 100;
+}
+
 #map img {
     max-width: none;
 }
@@ -34,7 +53,7 @@ html, body {
 #loading .bar {
     position: relative;
     width: 200px;
-    height: 5px; 
+    height: 5px;
     border-radius: 3px;
     background: #005C76;
 }
@@ -80,7 +99,7 @@ header > div {
 }
 
 .nav {
-    list-style: none outside none;    
+    list-style: none outside none;
     margin: 0;
     padding: 0;
     height: 40px;
@@ -111,8 +130,8 @@ header > div {
     color: #fff;
     line-height: 45px;
     font-size: 35px;
-} 
-.nav > li.last { border: 0; } 
+}
+.nav > li.last { border: 0; }
 .nav > li:active { background-color: #33b5e5; }
 .nav > li:hover { border-bottom: 5px solid #fff; }
 
@@ -142,7 +161,7 @@ header > div {
     border: 0;
 }
 #main .header span {
-    overflow: hidden; 
+    overflow: hidden;
     display: block;
     width: 90%;
     float: left;
@@ -166,24 +185,24 @@ header > div {
     position: relative;
     z-index: 4;
 }
-#main .row .data img { 
+#main .row .data img {
     position: absolute;
     z-index: 2;
     bottom: 40%;
     right: 25%;
     opacity: 0.6;
 }
-#main .row .header .graph { 
+#main .row .header .graph {
     position: absolute;
     bottom: -1px;
     right: 25px;
     width: 60px;
     height: 40px;
 }
-#main .row .data dt > i { 
+#main .row .data dt > i {
     font-size: 12px;
 }
-#main .row .data a { 
+#main .row .data a {
     text-decoration: none;
     color: #00A3D3;
 }
@@ -314,7 +333,7 @@ header > div {
     position: absolute;
     right: -28px;
     top: 3px;
-} 
+}
 
 @media only screen and (min-width: 321px) {
     .portrait { display: none; }
@@ -340,25 +359,25 @@ header > div {
         width: 160px;
         padding-left: 10px;
     }
-    #main .data dl > dt { 
+    #main .data dl > dt {
         color: #000;
         line-height: 11px;
         margin-top: 5px;
         font-weight: bold;
         font-size: 14px;
     }
-    #main .data dl > dd { 
+    #main .data dl > dd {
         padding: 0;
         margin: 0;
         text-transform:uppercase;
         line-height: 11px;
         font-size: 11px;
     }
-    #main .data dl > dt.receivers { 
+    #main .data dl > dt.receivers {
         font-size: 10px;
         font-weight: normal;
     }
-    #main .data dl > dd.receivers { 
+    #main .data dl > dd.receivers {
         font-size: 10px;
     }
     #main .row .data img {
@@ -389,28 +408,28 @@ header > div {
         padding-right: 10px;
         width: 20%;
     }
-    #main .data dl > dt { 
+    #main .data dl > dt {
         color: #000;
         line-height: 11px;
         margin-top: 15px;
         font-weight: bold;
         font-size: 14px;
     }
-    #main .data dl > dd { 
+    #main .data dl > dd {
         padding: 0;
         margin: 0;
         text-transform:uppercase;
         line-height: 11px;
         font-size: 11px;
     }
-    #main .data dl > dt.receivers { 
+    #main .data dl > dt.receivers {
         font-size: 10px;
         font-weight: normal;
     }
-    #main .data dl > dd.receivers { 
+    #main .data dl > dd.receivers {
         font-size: 10px;
     }
-    #main .row .header .graph { 
+    #main .row .header .graph {
         width: 150px;
     }
 }

js/app.js

@@ -74,6 +74,21 @@ function checkSize() {
 window.onresize = checkSize;
 window.onchangeorientation = checkSize;
 
+// detect if mobile
+var is_mobile = false;
+
+if(
+ navigator.userAgent.match(/Android/i)
+ || navigator.userAgent.match(/iPhone/i)
+ || navigator.userAgent.match(/iPod/i)
+ || navigator.userAgent.match(/iPad/i)
+ || navigator.userAgent.match(/Windows Phone/i)
+ || navigator.userAgent.match(/webOS/i)
+ || navigator.userAgent.match(/BlackBerry/i)
+ ) is_mobile = true;
+
+
+
 // functions
 
 var positionUpdateHandle = function() {
@@ -164,7 +179,7 @@ $(window).ready(function() {
     checkSize();
 
     // add inline scroll to vehicle list
-    listScroll = new iScroll('main', { hScrollbar: false, hScroll: false, snap: false });
+    listScroll = new iScroll('main', { hScrollbar: false, hScroll: false, snap: false, scrollbarClass: 'scrollStyle' });
 
     // confirm dialog when launchnig a native map app with coordinates
     $('#main').on('click', '#launch_mapapp', function() {
@@ -355,7 +370,7 @@ $(window).ready(function() {
     // The position is displayed in top right corner of the screen
     // This should be very handly for in the field tracking
     //setTimeout(function() {updateCurrentPosition(50.27533, 3.335166);}, 5000);
-    if(navigator.geolocation) {
+    if(navigator.geolocation && is_mobile) {
         // if we have geolocation services, show the locate me button
         // the button pants the map to the user current location
         $("#locate-me,.chasecar").show();