Redesign tracking page and navbar color
This commit is contained in:
parent
26918f3970
commit
4db6d64a54
@ -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-image: url(../images/background.svg);
|
||||
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-color: var(--theme-background-color);
|
||||
background-image: var(--background-image);
|
||||
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 {
|
||||
background-color: #d0f2fc;
|
||||
}
|
||||
|
||||
.theme-dark .navbar, .theme-dark .navbar-bg {
|
||||
background-color: black;
|
||||
.navbar, .navbar-bg, .subnavbar, .subnavbar *, .subnavbar .searchbar-inner .searchbar-input-wrap * {
|
||||
background-color: var(--solid-translucent-color);
|
||||
}
|
||||
|
||||
.page-content-fab-pad {
|
||||
|
||||
@ -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");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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();
|
||||
|
||||
|
||||
@ -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="col-100 medium-90 xlarge-75 margin-horizontal">
|
||||
<div class="card margin">
|
||||
<div class="card-content text-align-center padding-vertical">
|
||||
<div class="tabs-animated-wrap">
|
||||
<div class="tabs">
|
||||
<div id="tracking-history-list" class="tab tab-active">
|
||||
<div class="list noselect">
|
||||
<ul style="background-color: transparent;">
|
||||
|
||||
<div class="list">
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toolbar tabbar toolbar-bottom" id="track-page-tabbar">
|
||||
<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 id="tracking-account-list" class="tab">
|
||||
<div class="list noselect">
|
||||
<ul style="background-color: transparent;">
|
||||
<li class="item-content">
|
||||
<div class="item-inner justify-content-center">
|
||||
<div class="item-title">Loading...</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tabs-animated-wrap">
|
||||
<div class="tabs">
|
||||
<div id="tracking-history-list" class="tab tab-active">
|
||||
<div class="list">
|
||||
<ul>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div id="tracking-multi-list" class="tab">
|
||||
<div class="list noselect">
|
||||
<ul style="background-color: transparent;">
|
||||
<li class="item-content">
|
||||
<div class="item-inner justify-content-center">
|
||||
<div class="item-title">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tracking-account-list" class="tab">
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
Loading…
x
Reference in New Issue
Block a user