Merge 'beta', hash url + search bar

c73bd25 - update gmap static; removed console.log
c22909f - hide home menu button when using panels
f392993 - added search box
95f786e - removed leftover console.log; fix lookangles clear
bd1a870 - fix focus param in hash url not working properly
b654512 - lowered width of time&angles boxes by 30px
6f52b79 - path infocard should say 'via' instead of 'by'
a1a0851 - move top menu to the right side
d543f83 - round coords to 5 decimal places, ~1m res
897149b - replace whitespace with underscore for mode param
c463601 - make docid queries work
8e96de2 - round map center coords to 5 decimal places
1d34e6b - added hash urls

Author: rossengeorgiev

cache.manifest-dev

@@ -2,7 +2,7 @@ CACHE MANIFEST
 # version {VERSION}
 
 # gogole maps files
-http://maps.gstatic.com/cat_js/maps-api-v3/api/js/17/19/%7Bmain,common,controls,ga,geometry,infowindow,kml,map,marker,onion,overlay,poly,stats,util,weather,weather_impl%7D.js
+http://maps.gstatic.com/cat_js/maps-api-v3/api/js/17/21/%7Bmain,common,controls,ga,geometry,infowindow,kml,map,marker,onion,overlay,poly,stats,util,weather,weather_impl%7D.js
 http://fonts.googleapis.com/css?family=Roboto:300,400,500,700
 http://maps.gstatic.com/mapfiles/undo_poly.png
 http://maps.gstatic.com/mapfiles/mv/imgs8.png

css/main.css

@@ -20,6 +20,15 @@ body {
     font-family: "Roboto", Ariel, sans-serif;
 }
 
+.noselect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
 .rfloat {
     float: right;
 }
@@ -51,7 +60,7 @@ body {
     background-color: #fff;
     position: absolute;
     height: 28px;
-    width: 225px;
+    width: 195px;
     border-radius: 20px;
     box-shadow: 0 0 5px #888;
     font-size: 11px;
@@ -69,7 +78,7 @@ body {
 .slickbox div {
     font-size: 14px;
     margin-top: 3px;
-    width: 180px;
+    width: 150px;
     text-align: center;
 }
 
@@ -96,27 +105,27 @@ body {
     fill: #c00;
 }
 #timebox .current {
-    margin-left: 5px;
+    margin-left: 11px;
 }
 #timebox .local {
-    margin-left: 15px;
+    margin-left: 5px;
 }
 
 .slickbox .azimuth {
     margin-left: 9px;
-    width: 100;
+    width: 91px;
 }
 .slickbox .bearing {
     margin-right: 5px;
-    width: 70px;
+    width: 60px;
 }
 .slickbox .elevation {
     margin-left: 5px;
-    width: 100px;
+    width: 95px;
 }
 .slickbox .range {
     margin-right: 5px;
-    width: 70px;
+    width: 60px;
 }
 
 #mapscreen {
@@ -180,9 +189,9 @@ header {
     line-height: normal;
     margin-top: 6px;
     position: absolute;
-    right: 30px;
+    left: 225px;
     height: 40px;
-    text-align: right;
+    text-align: left;
     cursor: pointer;
 }
 header > div {
@@ -210,6 +219,29 @@ header > div {
     overflow: hidden;
 }
 
+header .search {
+    float: left;
+    width: 190px;
+    margin-top: 10px;
+}
+
+header .search form {
+    position: relative;
+}
+header .search form input {
+    position: absolute;
+    border-radius: 100px;
+}
+header .search form input[type='text'] {
+    left: 0;
+    padding-left: 10px;
+    padding-right: 35px;
+    width: 143px;
+}
+header .search form input[type='submit'] {
+    right: 0;
+}
+
 .nav {
     list-style: none outside none;
     margin: 0;
@@ -218,13 +250,13 @@ header > div {
     display: block;
     min-width: 40px;
     width: auto;
-    float: left;
+    float: right;
     margin: 5px 0px;
 }
 
 #locate-me {
     position: absolute;
-    right: 0px;
+    left: 195px;
     top: 12px;
     font-size: 25px;
     height: 25px;
@@ -599,6 +631,39 @@ header > div {
     display: none;
 }
 
+@media only screen and (min-width: 900px) {
+    .nav .home {
+        display: none;
+    }
+}
+
+@media only screen and (max-width: 600px) {
+    #app_name {
+        left: 150px;
+    }
+    #locate-me {
+        left: 120px;
+    }
+    header .search {
+        width: 110px;
+    }
+    header .search form input[type='text'] {
+        width: 63px;
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    #app_name {
+        left: 30px;
+    }
+    #locate-me {
+        left: 0px;
+    }
+    header .search {
+        display: none;
+    }
+}
+
 @media only screen and (min-width: 361px) {
     .portrait { display: none; }
     .landscape { display: block; }
@@ -693,7 +758,7 @@ header > div {
     }
     #main .data dl > dt {
         color: #000;
-        line-height: 11px;
+        l120ne-height: 11px;
         margin-top: 15px;
         font-weight: bold;
         font-size: 14px;
@@ -713,7 +778,7 @@ header > div {
         display: none;
     }
     #app_name {
-        right: 0px;
+        left: 0px;
     }
 }
 

index.html

@@ -35,7 +35,13 @@
 
     <header style="display: none">
         <div class="container">
-            <ol class="nav">
+            <div class="search">
+                <form>
+                    <input type='text' value="" />
+                    <input type='submit' value="S" />
+                </form>
+            </div>
+            <ol class="nav noselect">
                 <li class="home"><i class="icon-habhub"></i></li>
                 <li class="chasecar" style="display: none"><i class="icon-car"></i></li>
                 <li class="settings"><i class="icon-settings"></i></li>
@@ -52,7 +58,7 @@
                 <li class="about last"><i class="icon-question"></i></li>
             </ol>
             <span id="locate-me" style="display: none"><i class="icon-target"></i></span>
-            <span id="app_name"><b>mobile<br/>tracker</b></span>
+            <span id="app_name"><b>no<br/>location</b></span>
         </div>
     </header>
 
@@ -262,7 +268,7 @@ <h2>Chase car mode</h2>
             <svg width="40" height="40" viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1" version="1.1" class="lfloat">
                   <path d="M99.812,43.188c-2.77,0-5,2.032-5,4.562v40.875c-4.315,1.97-7.312,6.321-7.312,11.375,0,6.9,5.596,12.5,12.5,12.5,1.05,0,2.06-0.16,3.03-0.41l23.35,23.35c2.23,2.24,5.93,2.13,8.28-0.22s2.42-6.04,0.18-8.28l-23-23c0.42-1.24,0.66-2.56,0.66-3.94,0-5.202-3.17-9.68-7.69-11.562v-40.688c0-2.53-2.23-4.562-4.998-4.562zm-5.906-23c0.031-0.003,0.063,0.002,0.094,0v14.374c0,0.236,0.202,0.438,0.438,0.438h11.122c0.24,0,0.44-0.202,0.44-0.438v-14.343c39.4,2.921,70.86,34.381,73.78,73.781h-14.34c-0.24,0-0.44,0.171-0.44,0.406v11.154c0,0.24,0.2,0.44,0.44,0.44h14.34c-2.92,39.4-34.38,70.86-73.78,73.78v-14.37c0-0.24-0.2-0.41-0.44-0.41h-11.122c-0.236,0-0.438,0.17-0.438,0.41v14.37c-39.4-2.92-70.86-34.38-73.781-73.78h14.343c0.236,0,0.438-0.2,0.438-0.44v-11.154c0-0.235-0.202-0.406-0.438-0.406h-14.343c2.918-39.372,34.33-70.848,73.687-73.812zm6.094-10.188c-49.706,0-90,40.294-90,90,0,49.71,40.294,90,90,90,49.71,0,90-40.29,90-90,0-49.706-40.29-90-90-90zm0-10c55.23,0,100,44.772,100,100,0,55.23-44.77,100-100,100-55.228,0-100-44.77-100-100,0-55.228,44.772-100,100-100z"></path>
             </svg>
-            <span class="current lfloat">Current: ???</span>
+            <span class="current lfloat">UTC: ???</span>
             <span class="local lfloat">Local: ???</span>
         </div>