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

2 years ago · f25a5ca9eb
parent e6312c82ff
commit f25a5ca9eb
10 changed files with 51 additions and 91 deletions
--- a/config.xml
+++ b/config.xml
@ -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" />
--- 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;
--- 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));
+}

 /*

--- a/www/assets/css/home.css
+++ b/www/assets/css/home.css
@ -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%;
-}
--- a/www/assets/images/background.svg
+++ b/www/assets/images/background.svg
--- a/www/assets/images/companylogo.svg
+++ b/www/assets/images/companylogo.svg
--- 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();
    });
--- a/www/index.html
+++ b/www/index.html
@ -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" />
--- a/www/pages/home.html
+++ b/www/pages/home.html
@ -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}}
--- 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."