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

Add toolbar to home page with call/text buttons and app logo

Browse Source
This commit is contained in:
Skylar Ittner 2022-04-29 22:29:27 -06:00
parent e6312c82ff
commit f25a5ca9eb
10 changed files with 51 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config.xml
View File

@ -20,6 +20,8 @@
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<access launch-external="yes" origin="geo:*" />
<access launch-external="yes" origin="tel:*" />
<access launch-external="yes" origin="sms:*" />
<icon src="res/logo.png" />
<preference name="HeaderColor" value="#82b1ff" />
<preference name="StatusBarBackgroundColor" value="#d0f2fc" />

4
www/assets/css/app.css
View File

@ -6,12 +6,12 @@ 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);
--translucent-color: rgba(255,255,255,0.8);
--solid-translucent-color: #e8f9fe; /* Halfway between the background color and white */
--background-image: url(../images/background.svg);
}
.theme-dark {
.dark, .theme-dark {
--theme-background-color: black;
--translucent-color: rgba(0,0,0,0.5);
--solid-translucent-color: black;

16
www/assets/css/customstyles.css
View File

@ -20,6 +20,22 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
fill: var(--f7-fab-text-color);
}
#home-page-tabbar {
background-color: var(--translucent-color);
}
#home-page-tabbar .toolbar-inner {
justify-content: start;
}
#home-page-tabbar-logo {
height: calc(var(--f7-toolbar-height) / 1.5);
margin-left: auto; /* make it go all the way to the right https://stackoverflow.com/a/36606694 */
}
.drop-shadow {
filter: drop-shadow(0 0 0.25rem rgba(0, 0, 0, .75));
}
/*

15
www/assets/css/home.css
View File

@ -1,15 +0,0 @@
/*
This Source Code Form is subject to the terms of the Mozilla Public
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/.
*/
/*
Created on : Oct 4, 2020, 8:45:20 PM
Author : Skylar Ittner
*/
.widelogo {
max-width: 200px;
width: 50%;
}

70
www/assets/images/background.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 6.4 KiB

1
www/assets/images/companylogo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

17
www/assets/js/platform.js
View File

@ -287,6 +287,11 @@ function initCordova() {
}
evt.preventDefault();
});
$("body").on("click", "a[href^='tel:'],a[href^='sms:']", function (evt) {
window.open($(this).attr("href"), "_system");
evt.preventDefault();
});
}
function initNW() {
@ -333,6 +338,11 @@ function initNW() {
evt.preventDefault();
});
$("body").on("click", "a[href^='tel:'],a[href^='sms:']", function (evt) {
require('nw.gui').Shell.openExternal($(this).attr("href"));
evt.preventDefault();
});
// automatic theme, default light
if (typeof Framework7.device.prefersColorScheme() !== 'undefined' && Framework7.device.prefersColorScheme() == "dark") {
appTheme = "dark";
@ -355,7 +365,12 @@ function initBrowser() {
setupHTML5BarcodeScanner();
$("body").on("click", ".geolink", function (evt) {
$("body").on("click", "a[href^='geo:']", function (evt) {
window.open($(this).attr("href"), "_blank");
evt.preventDefault();
});
$("body").on("click", "a[href^='tel:'],a[href^='sms:']", function (evt) {
window.open($(this).attr("href"), "_blank");
evt.preventDefault();
});

1
www/index.html
View File

@ -14,7 +14,6 @@
<link rel="stylesheet" href="node_modules/maplibre-gl/dist/maplibre-gl.css">
<link rel="stylesheet" href="assets/css/theme.css" />
<link rel="stylesheet" href="assets/css/app.css" />
<link rel="stylesheet" href="assets/css/home.css" />
<link rel="stylesheet" href="assets/css/backdrop.css" />
<link rel="stylesheet" href="assets/css/web-barcode.css" />
<link rel="stylesheet" href="assets/fonts/roboto/Roboto.css" />

12
www/pages/home.html
View File

@ -22,14 +22,22 @@
</div>
</div>
<div class="fab fab-right-bottom" id="scan-barcode-fab">
<div class="fab fab-center-bottom" id="scan-barcode-fab">
<a href="#" onclick="openGenericBarcodeScanner()">
<svg version="1.1" viewBox="0 0 135.47 135.47" xmlns="http://www.w3.org/2000/svg"><path d="m7.7889 1.5896c-3.4235 0-6.2013 2.7778-6.2013 6.2013v28.939c0 3.4365 2.7778 6.2008 6.2013 6.2008 3.4235 0 6.2008-2.7643 6.2008-6.2008v-22.738h22.738c3.4365 0 6.2008-2.7773 6.2008-6.2008 0-3.4235-2.7643-6.2013-6.2008-6.2013zm90.954 0c-3.4365 0-6.2008 2.7778-6.2008 6.2013 0 3.4235 2.7643 6.2008 6.2008 6.2008h22.738v22.738c0 3.4365 2.7643 6.2008 6.2008 6.2008s6.2013-2.7643 6.2013-6.2008v-28.939c0-3.4235-2.7648-6.2013-6.2013-6.2013zm-63.538 24.747c-4.8995-1e-6 -8.871 4.1383-8.871 8.8715v17.742c0 5.0641 3.9715 8.8715 8.871 8.8715h17.743c4.8977 0 8.871-3.8075 8.871-8.8715v-17.742c0-4.7332-3.9733-8.8715-8.871-8.8715zm47.314 0c-4.8977-1e-6 -8.871 4.1383-8.871 8.8715v17.742c0 5.0641 3.9733 8.8715 8.871 8.8715h17.743c4.8978 0 8.871-3.8075 8.871-8.8715v-17.742c0-4.7332-3.9734-8.8715-8.871-8.8715zm-47.314 8.8715h17.743v17.742h-17.743zm47.314 0h17.743v17.742h-17.743zm-39.922 4.4355c-1.6338 0-2.9568 1.4968-2.9568 2.9568v2.9573c0 1.7927 1.323 2.9568 2.9568 2.9568h2.9573c1.6265 0 2.9568-1.1641 2.9568-2.9568v-2.9573c0-1.4601-1.3305-2.9568-2.9568-2.9568zm47.314 0c-1.6265 0-2.9573 1.4968-2.9573 2.9568v2.9568c0 1.7927 1.331 2.9573 2.9573 2.9573h2.9568c1.6264 0 2.9568-1.1646 2.9568-2.9573v-2.9568c0-1.4601-1.3305-2.9568-2.9568-2.9568zm-16.264 34.005v35.486h11.828v-17.742h5.9142v5.9142h17.742v-23.658h-5.9142v5.9142h-11.828v-5.9142zm-38.442 0.0011c-4.8995 0-8.8715 4.1402-8.8715 8.8715v17.742c0 5.0641 3.972 8.8715 8.8715 8.8715h17.742c4.8977 0 8.8715-3.8074 8.8715-8.8715v-17.742c0-4.7313-3.9739-8.8715-8.8715-8.8715zm0 8.8715h17.742v17.742h-17.742zm7.3923 4.4355c-1.6338 0-2.9568 1.4968-2.9568 2.9568v2.9573c0 1.7927 1.323 2.9568 2.9568 2.9568h2.9573c1.6265 0 2.9568-1.1641 2.9568-2.9568v-2.9573c0-1.46-1.3305-2.9568-2.9568-2.9568zm-34.809 5.583c-3.4235 0-6.2013 2.7648-6.2013 6.2013v28.939c0 3.4365 2.7778 6.2008 6.2013 6.2008h28.939c3.4365-1e-5 6.2008-2.7643 6.2008-6.2008 0-3.4365-2.7643-6.2013-6.2008-6.2013h-22.738v-22.737c0-3.4365-2.7773-6.2013-6.2008-6.2013zm119.89 0c-3.4365 0-6.2013 2.7648-6.2013 6.2013v22.737h-22.737c-3.4365 0-6.2013 2.7648-6.2013 6.2013 0 3.4365 2.7648 6.2008 6.2013 6.2008h28.939c3.4365-1e-5 6.2008-2.7643 6.2008-6.2008v-28.939c0-3.4365-2.7643-6.2013-6.2008-6.2013zm-36.288 10.681v5.9142h5.9142v-5.9142zm11.828 0v5.9142h5.9142v-5.9142z" stroke-width=".26458"/></svg>
</a>
</div>
<div class="toolbar toolbar-bottom" id="home-page-tabbar">
<div class="toolbar-inner">
<a class="link margin-right-half" href="tel:14063898988"><i class="fa-duotone fa-phone-arrow-up-right fa-swap-opacity fa-lg"></i></a>
<a class="link margin-left-half" href="sms:14063898988"><i class="fa-duotone fa-messages fa-swap-opacity fa-lg"></i></a>
<img id="home-page-tabbar-logo" src="assets/images/companylogo.svg" alt="" class="padding-half drop-shadow" />
</div>
</div>
<div class="page-content noselect">
<div class="row justify-content-center margin-top">
<div class="row justify-content-center margin-top margin-bottom">
<div class="col-100 medium-90 xlarge-75">
<div class="row justify-content-center align-items-stretch">
{{#if accountsetup}}{{else}}

4
www/routes.js
View File

@ -114,13 +114,13 @@ var routes = [
text: "Get boxes, labels, and shipping supplies delivered to your door."
},
{
title: "Wallet",
title: "Crypto Wallet",
href: "/crypto",
icon: "fa-duotone fa-wallet",
text: "Check your crypto wallet balance and pay people with cryptocurrency."
},
{
title: "Manage My Account",
title: "My Account",
href: "/account",
icon: "fa-duotone fa-user-circle",
text: "Get account number, check rewards points, update payment method, and more."