Further GPS Tab styling

tabs/gps.css

@@ -16,29 +16,88 @@
     background-color: #ececec;
 }
 
-.tab-gps a {
+.tab-gps #connect {
+   display:none; 
+   text-align:center;
+   padding-top:40%;
+}
+
+.tab-gps #waiting {
+    margin-top: 0px;
+    display: none;
+    text-align: center;
+    padding-top: 0px;
+    background-image: url(../images/loading-bars.svg);
+    background-position: center 40%;
+    background-size: 15%;
+    height: 100%;
+    background-repeat: no-repeat;
+    float: left;
+    width: 100%;
+}
+
+.tab-gps #waiting .info {
+    margin-top: 50%;
+}
+
+.tab-gps #loadmap {
+    margin-top:0px; 
+    display:none;
+}
+
+.tab-gps #connect a {
     font-weight: bold;
+    margin-top:10px;
 }
 
-.tab-gps #map-canvas {
+
+.tab-gps #loadmap {
     height: 100%;
-    background: #ccc;
     width: 100%;
     float: left;
 }
 
-.tab-gps #waiting {
+
+.tab-gps #loadmap .controls {
     width: 100%;
+    float: left;
+    height: 33px;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    background-color: #D1D1D1;
 }
 
-.tab-gps iframe {
+.tab-gps #loadmap .controls a {
-    height: 100%;
+    background-color: white;
-    width: 100%;
+    border-radius: 4px;
+    border: 1px silver solid;
+    color: grey;
+    height: 10px;
+    width: 10px;
+    text-align: center;
+    font-size: 20px;
+    line-height: 10px;
+    padding: 6px;
+    margin-top: 5px;
+    float: right;
 }
 
-.tab-gps #loadmap {
+.tab-gps #loadmap .controls a:first-child {
-    height: 100%;
+    margin-left: -1px;
+    margin-right: 5px;
+    border-bottom-left-radius: 0px;
+    border-top-left-radius: 0px;
+}
+.tab-gps #loadmap .controls a:last-child {
+    margin-right: 0px;
+    border-bottom-right-radius: 0px;
+    border-top-right-radius: 0px;
+}
+
+.tab-gps iframe {
+    height: 400px;
     width: 100%;
+    float: left;
 }
 
 

tabs/gps.html

@@ -146,22 +146,22 @@
             </div>
         </div>
         <div class="cf_column half">
-            <div class="gui_box grey" style="height: 444px;">
+            <div class="gui_box grey" style="height: 460px;">
-                <div class="gui_box_titlebar">
+                <div class="gui_box_titlebar" style="margin-bottom: 0px;">
                         <div class="spacer_box_title" i18n="gpsHead"></div>
                 </div>
-                <div id="connect" style="display:none; text-align:center;">
+                <div id="connect">
-                    please check your internet connection
+                    Please check your internet connection
                     <div class="default_btn" style="width:50px; margin-left:auto; margin-right:auto; float:none;"><a id="check">retry</a></div>
                 </div>
-                <div id="waiting" style="margin-top:0px; display:none;">
+                <div id="waiting">
-                    Online check success! Waiting for GPS 3D fix…
+                    <div class="info">Waiting for GPS 3D fix…</span>
                 </div>
-                <div id="loadmap" style="margin-top:0px; display:none;">
+            </div>
+                <div id="loadmap">
                     <iframe src="tabs/map.html"></iframe>
+                    <div class="controls"><a href="#" id="">+</a><a href="#" id="">-</a></div>
                 </div>
-            </div>
-
         </div>
 
     </div>

tabs/map.html

@@ -25,6 +25,7 @@ var map;
 function initialize() {
   var mapOptions = {
     zoom: 17,
+    zoomControl: false,
     streetViewControl: false,
  // mapTypeId: google.maps.MapTypeId.SATELLITE,
     center: {lat: 53.570645, lng: 10.001362}