Rewrite navbar code for better tablet behavior

www/css/app.css

@@ -55,7 +55,28 @@ html, body {
     text-align: center;
 }
 
-span.navbar-brand {
+/* https://stackoverflow.com/a/23536146 */
+
+.navbar-collapse.collapse {
+    display: block!important;
+}
+
+.navbar-nav>li, .navbar-nav {
+    float: left !important;
+}
+
+.navbar-nav.navbar-right:last-child {
+    margin-right: -15px !important;
+}
+
+.navbar-right {
+    float: right!important;
+}
+
+/* /stackoverflow */
+
+
+.nav {
     color: white;
     margin-right: 0px;
     height: 30px;
@@ -64,16 +85,34 @@ span.navbar-brand {
     margin-left: 5px;
 }
 
-.navbar-brand.pull-left img {
+.navbar-right span {
-    margin-right: -10px;
+    color: white;
-    height: 30px;
+    font-size: 18px;
     margin-top: -4px;
-    margin-left: -4px;
 }
 
-.navbar-brand.pull-right img {
+.navbar-brand img {
+    margin-right: 15px;
     height: 30px;
     margin-top: -4px;
+    margin-left: -10px;
+    display: inline-block;
+}
+
+.navbar-right li a img {
+    height: 30px;
+    margin-top: 6px;
+    display: inline-block;
+}
+
+@media (min-width: 768px) {
+    .navbar-right {
+        margin-top: -6px;
+    }
+    
+    .navbar-right li a img {
+        margin-top: -1px;
+    }
 }
 
 #manual_setup {

www/index.html

@@ -27,9 +27,12 @@
 
         <nav class="navbar navbar-inverse navbar-fixed-top" id="navbar">
             <div class="container-fluid">
-                <div class="navbar-header" id="navbar-header">
+                <div class="nav navbar-nav navbar-left" id="navbar-header">
-                    <span class="navbar-brand" style="color: white;">Business</span>
+                    <span class="navbar-brand" id="navbar-title" style="color: white;">Business</span>
                 </div>
+                <ul class="nav navbar-nav navbar-right" id="navbar-buttons">
+                    
+                </ul>
             </div>
         </nav>
 

www/js/app.js

@@ -77,17 +77,46 @@ function openfragment(fragment, target, effect) {
     }
 }
 
+/**
+ * Add button to the top navbar.
+ * @param String screenid openscreen(screenid)
+ * @param String icon The filename of the icon to show: <img src="icons/icon"...
+ * @param String title Text to show next to the icon on large screens.
+ * @returns {undefined}
+ */
+function addnavbarbtn(screenid, icon, title) {
+    $('#navbar-buttons').append('<li><a onclick="openscreen(\'' + screenid + '\', \'FADE\')"><img src="icons/' + icon + '" alt="" /> <span class="hidden-xs">' + title + '</span></a></li>');
+}
+
+/**
+ * Hide the back arrow if screenid === false, otherwise show it and have it open screenid
+ * @param String screenid The ID of the screen to open when pressed.
+ * @returns {undefined}
+ */
+function setnavbartitle(title, showarrow, backscreen) {
+    var arrow = "";
+    if (showarrow === true) {
+        arrow = '<img src="icons/ic_arrow-back.svg" />';
+    }
+    var onclick = "";
+    if (backscreen !== null && backscreen !== false) {
+        onclick = ' onclick=\'openscreen("' + backscreen + '", "FADE");\'';
+    }
+    $("#navbar-header").html('<span class="navbar-brand" id="navbar-title" style="color: white;"' + onclick + '>' + arrow + title + '</span>');
+}
+
 /**
  * Set the navbar.
  * @param String,boolean type false if no navbar, "home" for the home screen, 
  * "settings" for settings, "app" for a custom title, or anything else for 
  * a simple one.
- * @param String title The title to show if type == "app"
+ * @param String screentitle The title to show if type == "app"
  * @param String returnscreen Where to go back to.  Defaults to "home".
  * @returns {undefined}
  */
-function setnavbar(type, title, returnscreen) {
+function setnavbar(type, screentitle, returnscreen) {
     var navbar = $('#navbar-header');
+    var btns = $('#navbar-buttons');
     if (type == false) {
         $('#navbar').css('display', 'none');
         $('#content-zone').css('margin-top', '0px');
@@ -106,28 +135,33 @@ function setnavbar(type, title, returnscreen) {
         } else {
             _returnscreen = returnscreen;
         }
-        navbar.fadeOut(150, function () {
+        btns.html("");
-            switch (type) {
+        switch (type) {
-                case "home":
+            case "home":
-                    navbar.html('<span class="navbar-brand" style="color: white;">Business</span><span class="navbar-brand pull-right"><span onclick="openscreen(\'mobilecode\', \'FADE\')"><img src="icons/ic_lock.svg" alt="" /></span> &nbsp; <span onclick="openscreen(\'otp\', \'FADE\')"><img src="icons/ic_vpn_key.svg" alt="" /></span> &nbsp; <span onclick="openscreen(\'settings\', \'FADE\')"><img src="icons/ic_settings.svg" alt="" /></span></span>');
+                setnavbartitle("Business", false, false);
-                    break;
+                addnavbarbtn("mobilecode", "ic_lock.svg", "Code Login");
-                case "setup":
+                addnavbarbtn("otp", "ic_vpn_key.svg", "2-factor Auth");
-                    navbar.html('<span class="navbar-brand" style="color: white;">Business</span><span class="navbar-brand pull-right"><span onclick="openscreen(\'otp\', \'FADE\')"><img src="icons/ic_vpn_key.svg" alt="" /></span> &nbsp; <span onclick="openscreen(\'settings\', \'FADE\')"><img src="icons/ic_settings.svg" alt="" /></span></span>');
+                addnavbarbtn("settings", "ic_settings.svg", "Settings");
-                    break;
+                break;
-                case "settings":
+            case "setup":
-                    navbar.html('<span class="navbar-brand pull-left" style="color: white;" onclick="openscreen(\'home\', \'FADE\')"><img src="icons/ic_arrow-back.svg" /></span><span class="navbar-brand navbar-title" style="color: white;" onclick="openscreen(\'home\', \'FADE\')">Settings</span>');
+                setnavbartitle("Business", false, false);
-                    break;
+                addnavbarbtn("otp", "ic_vpn_key.svg", "2-factor Auth");
-                case "otp":
+                addnavbarbtn("settings", "ic_settings.svg", "Settings");
-                    navbar.html('<span class="navbar-brand pull-left" style="color: white;" onclick="openscreen(\'home\', \'FADE\')"><img src="icons/ic_arrow-back.svg" /></span><span class="navbar-brand navbar-title" style="color: white;" onclick="openscreen(\'home\', \'FADE\')">Auth Keys</span><span class="navbar-brand pull-right" onclick="openscreen(\'addotp\', \'FADE\')"><img src="icons/ic_add.svg" alt="" /></span>');
+                break;
-                    break;
+            case "settings":
-                case "app":
+                setnavbartitle("Settings", true, "home");
-                    navbar.html('<span class="navbar-brand pull-left" style="color: white;" onclick="openscreen(\'' + returnscreen + '\', \'FADE\')"><img src="icons/ic_arrow-back.svg" /></span><span class="navbar-brand navbar-title" style="color: white;" onclick="openscreen(\'' + returnscreen + '\', \'FADE\')">' + title + '</span>');
+                break;
-                    break;
+            case "otp":
-                default:
+                setnavbartitle("Auth Keys", true, "home");
-                    navbar.html('<span class="navbar-brand" style="color: white;">Business</span>');
+                addnavbarbtn("addotp", "ic_add.svg", "Add Code");
-            }
+                break;
-            navbar.fadeIn(150);
+            case "app":
-        });
+                setnavbartitle(screentitle, true, returnscreen);
+                break;
+            default:
+                setnavbartitle("Business", false, false);
+                break;
+        }
     }
 }