From f25a5ca9ebabea741740d41e19b5309245ac4389 Mon Sep 17 00:00:00 2001 From: Skylar Ittner Date: Fri, 29 Apr 2022 22:29:27 -0600 Subject: [PATCH] Add toolbar to home page with call/text buttons and app logo --- config.xml | 2 + www/assets/css/app.css | 4 +- www/assets/css/customstyles.css | 16 +++++++ www/assets/css/home.css | 15 ------- www/assets/images/background.svg | 70 +------------------------------ www/assets/images/companylogo.svg | 1 + www/assets/js/platform.js | 17 +++++++- www/index.html | 1 - www/pages/home.html | 12 +++++- www/routes.js | 4 +- 10 files changed, 51 insertions(+), 91 deletions(-) delete mode 100644 www/assets/css/home.css create mode 100644 www/assets/images/companylogo.svg diff --git a/config.xml b/config.xml index 2d493b0..51712be 100644 --- a/config.xml +++ b/config.xml @@ -20,6 +20,8 @@ + + diff --git a/www/assets/css/app.css b/www/assets/css/app.css index f93e210..8dc5e04 100644 --- a/www/assets/css/app.css +++ b/www/assets/css/app.css @@ -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; diff --git a/www/assets/css/customstyles.css b/www/assets/css/customstyles.css index 220c7b7..3fae2dd 100644 --- a/www/assets/css/customstyles.css +++ b/www/assets/css/customstyles.css @@ -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)); +} /* diff --git a/www/assets/css/home.css b/www/assets/css/home.css deleted file mode 100644 index c368971..0000000 --- a/www/assets/css/home.css +++ /dev/null @@ -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%; -} \ No newline at end of file diff --git a/www/assets/images/background.svg b/www/assets/images/background.svg index a95dc5b..6d5998a 100644 --- a/www/assets/images/background.svg +++ b/www/assets/images/background.svg @@ -1,68 +1,2 @@ - - - - - - - - - - image/svg+xml - - - - - - - - - + + diff --git a/www/assets/images/companylogo.svg b/www/assets/images/companylogo.svg new file mode 100644 index 0000000..f2b8bb2 --- /dev/null +++ b/www/assets/images/companylogo.svg @@ -0,0 +1 @@ + diff --git a/www/assets/js/platform.js b/www/assets/js/platform.js index fe28b6d..a9580ba 100644 --- a/www/assets/js/platform.js +++ b/www/assets/js/platform.js @@ -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(); }); diff --git a/www/index.html b/www/index.html index d9b2126..76c7db8 100644 --- a/www/index.html +++ b/www/index.html @@ -14,7 +14,6 @@ - diff --git a/www/pages/home.html b/www/pages/home.html index 465d2c9..4604b93 100644 --- a/www/pages/home.html +++ b/www/pages/home.html @@ -22,14 +22,22 @@ -
+ +
+
+ + + +
+
+
-
+
{{#if accountsetup}}{{else}} diff --git a/www/routes.js b/www/routes.js index c755332..bb036c1 100644 --- a/www/routes.js +++ b/www/routes.js @@ -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."