Redesign tracking page and navbar color

www/assets/css/app.css

@@ -4,6 +4,20 @@ License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
 
+:root {
+    --theme-background-color: #d0f2fc;
+    --translucent-color: rgba(255,255,255,0.5);
+    --solid-translucent-color: #e8f9fe; /* Halfway between the background color and white */
+    --background-image: url(../images/background.svg);
+}
+
+.theme-dark {
+    --theme-background-color: black;
+    --translucent-color: rgba(0,0,0,0.5);
+    --solid-translucent-color: black;
+    --background-image: url(../images/background-transparent.svg);
+}
+
 /*
 Framework7 and FontAwesome both have a .fab class
 */
@@ -24,17 +38,8 @@ Framework7 and FontAwesome both have a .fab class
 }
 
 .page {
-    background-color: #d0f2fc;
+    background-color: var(--theme-background-color);
-    background-image: url(../images/background.svg);
+    background-image: var(--background-image);
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-position: bottom;
-    background-attachment: fixed;
-}
-
-.theme-dark .page {
-    background-color: black;
-    background-image: url(../images/background-transparent.svg);
     background-repeat: no-repeat;
     background-size: contain;
     background-position: bottom;
@@ -42,30 +47,21 @@ Framework7 and FontAwesome both have a .fab class
 }
 
 .list.transparent ul {
-    background-color: rgba(255,255,255,0.65);
+    background-color: var(--translucent-color);
 }
 .list.transparent ul li.item-divider {
-    background-color: rgba(255,255,255,0.5);
+    background-color: var(--translucent-color);
 }
 .popup {
     overflow-y: auto;
 }
-.theme-dark .list.transparent ul {
+
-    background-color: rgba(0,0,0,0.65);
-}
-.theme-dark .list.transparent ul li.item-divider {
-    background-color: rgba(0,0,0,0.5);
-}
 .theme-dark .popup {
     background-color: rgba(0,0,0,0.95);
 }
 
-.navbar, .navbar-bg {
+.navbar, .navbar-bg, .subnavbar, .subnavbar *, .subnavbar .searchbar-inner .searchbar-input-wrap * {
-    background-color: #d0f2fc;
+    background-color: var(--solid-translucent-color);
-}
-
-.theme-dark .navbar, .theme-dark .navbar-bg {
-    background-color: black;
 }
 
 .page-content-fab-pad {

www/assets/js/main.js

@@ -107,18 +107,14 @@ function setAppTheme(theme) {
     if (theme == "light") {
         $("body").removeClass("theme-dark");
         if (platform_type == "cordova" && typeof StatusBar !== 'undefined') {
+            StatusBar.backgroundColorByHexString("#e8f9fe");
             StatusBar.styleDefault();
-            if (device.platform == "Android") {
-                StatusBar.backgroundColorByHexString("#9ebfc9");
-            } else {
-                StatusBar.backgroundColorByHexString("#d0f2fc");
-            }
         }
     } else if (theme == "dark") {
         $("body").addClass("theme-dark");
         if (platform_type == "cordova" && typeof StatusBar !== 'undefined') {
+            StatusBar.backgroundColorByName("black");
             StatusBar.styleLightContent();
-            StatusBar.backgroundColorByHexString("#000000");
         }
     }
 }

www/assets/js/track.js

@@ -236,6 +236,14 @@ function trackOpenAsync( {to, resolve, reject}) {
             }, "GET");
 }
 
+$("#app").on("submit", "#tracking-searchbar-form", function (evt) {
+    evt.preventDefault();
+
+    openTrackingInfoPage($('input[name=\'trackingcode\']').val());
+
+    return false;
+});
+
 $("#app").on("contextmenu taphold", ".tracking-code-history-link", function (evt) {
     evt.preventDefault();
 

www/pages/track.html

@@ -14,87 +14,78 @@
                 </a>
             </div>
             <div class="title">Track</div>
+            <div class="right">
+                <a class="link" href="#" onclick="openTrackingBarcodeScanner()">
+                    <i class="far fa-qrcode"></i>
+                    <span>Scan</span>
+                </a>
+            </div>
+            <div class="subnavbar">
+                <form class="searchbar" id="tracking-searchbar-form">
+                    <div class="searchbar-inner">
+                        <div class="searchbar-input-wrap">
+                            <input type="search" name="trackingcode" id="trackingcode" required validate data-error-message=" " placeholder="Tracking Code" autocomplete="off" autocorrect="off" autocapitalize="off" />
+                            <a class="searchbar-icon" id="brokenscannercodeadd" onclick="openTrackingInfoPage($('input[name=\'trackingcode\']').val())" style="pointer-events: auto;" href="#" class="hapticbtn"></a>
+                            <span class="input-clear-button"></span>
+                        </div>
+                        <span class="searchbar-disable-button if-not-aurora">Cancel</span>
+                    </div>
+                </form>
+            </div>
         </div>
     </div>
 
 
     <div class="page-content">
-        <div class="row justify-content-center">
+        <div class="tabs-animated-wrap">
-            <div class="col-100 medium-90 xlarge-75 margin-horizontal">
+            <div class="tabs">
-                <div class="card margin">
+                <div id="tracking-history-list" class="tab tab-active">
-                    <div class="card-content text-align-center padding-vertical">
+                    <div class="list noselect">
+                        <ul style="background-color: transparent;">
 
-                        <div class="list">
+                        </ul>
-                            <ul>
-                                <li class="item-content item-input item-input-outline">
-                                    <div class="item-inner">
-                                        <div class="item-title item-floating-label">Tracking Code</div>
-                                        <div class="item-input-wrap">
-                                            <input type="text" name="trackingcode" id="trackingcode" required validate data-error-message=" " placeholder="" autocomplete="off" autocorrect="off" autocapitalize="off" />
-                                            <span class="input-clear-button"></span>
-                                        </div>
-                                    </div>
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="card-content-padding">
-                            <div class="button hapticbtn button-fill" onclick="openTrackingInfoPage($('input[name=\'trackingcode\']').val())"><i class="far fa-search"></i> Track</div>
-                            <br />
-                            <div class="button button-outline hapticbtn" onclick="openTrackingBarcodeScanner()"><i class="far fa-qrcode"></i> Scan Receipt</div>
-                        </div>
                     </div>
-                    <div class="toolbar tabbar toolbar-bottom" id="track-page-tabbar">
+                </div>
-                        <div class="toolbar-inner">
+                <div id="tracking-account-list" class="tab">
-                            <a href="#tracking-history-list" class="tab-link tab-link-active">
+                    <div class="list noselect">
-                                <i class="far fa-history"></i>
+                        <ul style="background-color: transparent;">
-                                <span class="tabbar-label">Recent</span>
+                            <li class="item-content">
-                            </a>
+                                <div class="item-inner justify-content-center">
-                            <a href="#tracking-account-list" class="tab-link">
+                                    <div class="item-title">Loading...</div>
-                                <i class="fas fa-user"></i>
+                                </div>
-                                <span class="tabbar-label">From Me</span>
+                            </li>
-                            </a>
+                        </ul>
-                            <a href="#tracking-multi-list" class="tab-link">
-                                <i class="fas fa-tasks-alt"></i>
-                                <span class="tabbar-label">Multi</span>
-                            </a>
-                        </div>
                     </div>
-                    <div class="tabs-animated-wrap">
+                </div>
-                        <div class="tabs">
+                <div id="tracking-multi-list" class="tab">
-                            <div id="tracking-history-list" class="tab tab-active">
+                    <div class="list noselect">
-                                <div class="list">
+                        <ul style="background-color: transparent;">
-                                    <ul>
+                            <li class="item-content">
-
+                                <div class="item-inner justify-content-center">
-                                    </ul>
+                                    <div class="item-title">Loading...</div>
                                 </div>
-                            </div>
+                            </li>
-                            <div id="tracking-account-list" class="tab">
+                        </ul>
-                                <div class="list">
-                                    <ul>
-                                        <li class="item-content">
-                                            <div class="item-inner justify-content-center">
-                                                <div class="item-title">Loading...</div>
-                                            </div>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                            <div id="tracking-multi-list" class="tab">
-                                <div class="list noselect">
-                                    <ul>
-                                        <li class="item-content">
-                                            <div class="item-inner justify-content-center">
-                                                <div class="item-title">Loading...</div>
-                                            </div>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
+    <div class="toolbar tabbar-labels toolbar-bottom" id="track-page-tabbar" style="background-color: var(--translucent-color);">
+        <div class="toolbar-inner">
+            <a href="#tracking-history-list" class="tab-link tab-link-active">
+                <i class="far fa-history"></i>
+                <span class="tabbar-label">Recent</span>
+            </a>
+            <a href="#tracking-account-list" class="tab-link">
+                <i class="fas fa-user"></i>
+                <span class="tabbar-label">From Me</span>
+            </a>
+            <a href="#tracking-multi-list" class="tab-link">
+                <i class="fas fa-tasks-alt"></i>
+                <span class="tabbar-label">Multi</span>
+            </a>
+        </div>
+    </div>
 
 </div>