Netsyms
/
HelenaExpressApp
2
0
Fork 0
Code Issues Pull Requests Releases 15 Wiki Activity

Redesign tracking page and navbar color

Browse Source
master
Skylar Ittner 2 years ago
parent 26918f3970
commit 4db6d64a54
4 changed files with 90 additions and 99 deletions
Show Stats Download Patch File Download Diff File

46
www/assets/css/app.css
Unescape Escape View File

@ -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 {

8
www/assets/js/main.js
Unescape Escape View File

@ -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");
}
}
}

8
www/assets/js/track.js
Unescape Escape View File

@ -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();

127
www/pages/track.html
Unescape Escape View File

@ -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>
</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>
</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>
<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 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>
</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>
</li>
</ul>
</div>
</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>
</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>
Write Preview
Loading…
Cancel
Save