Status bar color now changes to match displayed content/context

Some minor CSS tweaks and improvements

www/css/main.css

@@ -177,7 +177,7 @@ body {
 
 #energybar {
     width: 0%;
-    background: green;
+    background: rgba(0, 128, 0, 1.0);
 }
 
 #energybar-label {
@@ -386,12 +386,23 @@ body {
 #munzeeoauth {
     position: absolute;
     top: 0px;
+    padding-top: 15px;
     left: 0px;
     width: 100%;
     height: 100%;
     border: 0px;
 }
 
+#munzeeoauth-header-grad {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 20px;
+    background: -webkit-linear-gradient(to bottom, #009444 0%, #ffffff 100%);
+    background: linear-gradient(to bottom, #009444 0%, rgba(255,255,255,0) 100%);
+}
+
 #shopmessage {
     position: fixed;
     z-index: 9999;

www/js/auth.js

@@ -42,7 +42,7 @@ function logout() {
             localStorage.setItem("password", '');
             username = null;
             password = null;
-            $('#content-zone').load("screens/login.html");
+            openscreen('login');
         } else {
             navigator.notification.alert("Server did not properly acknowledge logout.  You might have problems for the next few hours if you switch accounts.", null, "Error", 'Dismiss');
         }
@@ -78,6 +78,7 @@ function loginOK() {
     localStorage.setItem("username", username);
     localStorage.setItem("password", password);
     navigator.splashscreen.hide();
+    updateStatusBarColor();
     checkUserHasTeamOpenChooserIfNot(username);
 }
 
@@ -145,6 +146,7 @@ function dosignup() {
 }
 
 function dologin() {
+    updateStatusBarColor();
     if (authOpInProgress) {
         return;
     }

www/js/location.js

@@ -179,6 +179,7 @@ function hideLoading() {
     if (lockGot && terrainGot && gpsaccuracy < requiredaccuracy && $('#loading').css('display') !== 'none') {
         $('#loading').fadeOut('slow', function () {
             $('#loading').css('display', 'none');
+            updateStatusBarColor();
         });
     }
 }

www/js/main.js

@@ -36,7 +36,6 @@ $(document).ready(function () {
 });
 
 function onDeviceReady() {
-    StatusBar.backgroundColorByHexString("#324150");
     openscreen("login");
     if (navigator.network.connection.type === Connection.NONE) {
         navigator.notification.alert("You need an Internet connection to continue.", function () {
@@ -82,10 +81,12 @@ function compareVersions(a, b) {
 
 
 function serverProblemsDialog(errmsg) {
+    StatusBar.backgroundColorByHexString("#324150");
     window.location = "servererror.html?errmsg=" + errmsg;
 }
 
 function clientProblemsDialog(errmsg) {
+    StatusBar.backgroundColorByHexString("#324150");
     window.location = "clienterror.html?errmsg=" + errmsg;
 }
 
@@ -105,23 +106,40 @@ function mkApiUrl(action, server) {
     }
 }
 
-function changeStatusBarColorForScreen(screenname) {
+/**
-    StatusBar.backgroundColorByHexString("#324150"); // Splash background color
+ * Update the status bar color depending on context.
-    /*switch (screenname) {
+ * @returns {undefined}
-     case 'login':
+ */
-     case 'signup':
+function updateStatusBarColor() {
-     case 'chooseteam':
+    if (currentscreen == 'munzeelink') {
+        StatusBar.backgroundColorByHexString("#009444");
+        return;
+    }
+    if (currentscreen == 'login') {
+        if ($('#loading').css('display') == 'none') {
             StatusBar.backgroundColorByHexString("#060606");
-     break;
+        } else {
-     case 'menu':
+            StatusBar.backgroundColorByHexString("#324150");
+        }
+        return;
+    }
+    if (currentscreen == 'chooseteam' || currentscreen == 'signup') {
         StatusBar.backgroundColorByHexString("#060606");
-     break;
+        return;
-     case 'home':
+    }
+    if (currentscreen == 'home') {
+        if ($('#loading').css('display') != 'none') {
+            StatusBar.backgroundColorByHexString("#324150");
+        } else {
+            if ($('#overlay-main').css('display') == 'block') {
+                StatusBar.backgroundColorByHexString("#060606");
+            } else {
                 StatusBar.backgroundColorByHexString("#008000");
-     break;
+            }
-     default:
+        }
-     StatusBar.backgroundColorByHexString("#324150"); // Splash background color
+        return;
-     }*/
+    }
+    StatusBar.backgroundColorByHexString("#324150");
 }
 
 /**
@@ -147,6 +165,7 @@ function openscreen(screenname, effect) {
         $('#content-zone').load("screens/" + screenname + ".html");
     }
     currentscreen = screenname;
+    updateStatusBarColor();
 }
 
 /**
@@ -250,6 +269,7 @@ function closeMain() {
     $('#overlay-main').slideDown(100, function () {
         $('#overlay-main').css('display', 'none');
         $('#main-content').html("");
+        updateStatusBarColor();
     });
 }
 

www/js/user.js

@@ -121,6 +121,7 @@ function openProfile(user) {
     $('#main-content').load("screens/profile.html", null, function (x) {
         $('#overlay-main').css('display', 'block');
         loadProfile(user);
+        updateStatusBarColor();
     });
 }
 
@@ -139,5 +140,6 @@ function openMenu(topage) {
         if (topage !== '') {
             $('#' + topage + '-tab').tab('show');
         }
+        updateStatusBarColor();
     });
 }

www/screens/home.html

@@ -127,6 +127,8 @@
     $('#found-box-2').click(function (e) {
         $('#found-box').fadeOut('fast');
     });
+    
+    updateStatusBarColor();
 </script>
 <script src="js/location.js"></script>
 <script src="js/user.js"></script>

www/screens/login.html

@@ -117,12 +117,15 @@
                         dologin();
                     } else {
                         $('#loading').css('display', 'none');
+                        updateStatusBarColor();
                     }
                 }).fail(function () {
             $('#loading').css('display', 'none');
+            updateStatusBarColor();
         });
     } else {
         $('#loading').css('display', 'none');
+        updateStatusBarColor();
     }
     navigator.splashscreen.hide();
 </script>

www/screens/munzeelink.html

@@ -17,6 +17,8 @@
 -->
 <iframe id="munzeeoauth" src="about:blank" style="background-color: white;" seamless='seamless'></iframe>
 
+<div id="munzeeoauth-header-grad"></div>
+
 <script>
     $('#munzeeoauth').attr('src', 'https://api.munzee.com/oauth?response_type=code&client_id='
             + MUNZEE_CLIENT_ID