Add Items: Put add and history tabs side by side on wide screens (#36)

www/assets/css/tablet.css

@@ -0,0 +1,52 @@
+/*
+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 : Apr 3, 2020, 11:55:50 AM
+    Author     : Skylar Ittner
+*/
+
+.only-tablet {
+    display: none;
+}
+
+@media all and (min-width: 768px) {
+    .only-tablet {
+        display: inherit;
+    }
+    .no-tablet {
+        display: none;
+    }
+    .page[data-name="add"] .tabbar {
+        /* Remove tab switcher at bottom of page */
+        display: none;
+        height: 0;
+    }
+    .page[data-name="add"] .tabs {
+        /* Put tabs next to each other */
+        display: flex;
+    }
+    .page[data-name="add"] .tabs .tab {
+        /* un-hide "non-active" tabs */
+        display: block;
+    }
+    .page[data-name="add"] .tabs #add-tab {
+        width: 66.67% !important;
+    }
+    .page[data-name="add"] .tabs #history-tab {
+        width: 33.33% !important;
+    }
+    .page[data-name="add"] #history-empty-swipe-prompt {
+        display: none;
+    }
+    .page[data-name="add"] .page-content {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    .page[data-name="add"] .fab {
+        margin-bottom: 0;
+    }
+}

www/assets/js/add.js

@@ -78,6 +78,7 @@ $("#addpackagebtn").click(function () {
                         + '    </div>'
                         + '  </div>'
                         + '</li>');
+                $("#tap-to-remove-history-prompt").removeClass("display-none");
             });
 });
 
@@ -93,6 +94,7 @@ $(".view-main").on("click", "#historylist .history-list-item", function () {
         $('#historylist .history-list-item[data-package="' + id + '"]').remove();
         if ($('#historylist .history-list-item').length == 0) {
             $("#no-history").removeClass("display-none");
+            $("#tap-to-remove-history-prompt").addClass("display-none");
         }
     });
 });
@@ -129,4 +131,18 @@ function toggleLettersInAddressNumber() {
         $("#housenumberinput").attr("type", "text");
         $("#housenumberinput").attr("placeholder", "1A2B3");
     }
-}
+}
+
+
+function setTabSwipable() {
+    var page = $(".page[data-name=add]");
+
+    // If the page has grown larger, refresh to disable swiping tabs
+    if (page.width() >= 768 && $(".tabs-swipeable-wrap")[0]) {
+        router.refreshPage();
+    }
+}
+
+$(window).on('resize', setTabSwipable);
+
+setTabSwipable();

www/index.html

@@ -20,6 +20,7 @@
 <link rel="stylesheet" href="assets/css/oled.css" />
 <link rel="stylesheet" href="assets/css/web-barcode.css" />
 <link rel="stylesheet" href="assets/fonts/roboto/Roboto.css" />
+<link rel="stylesheet" href="assets/css/tablet.css" />
 
 <script src="cordova.js"></script>
 

www/pages/add.html

@@ -4,7 +4,7 @@
 
 <div class="page" data-name="add">
 
-    <div class="navbar">
+    <div class="navbar no-tablet">
         <div class="navbar-bg"></div>
         <div class="navbar-inner">
             <div class="left">
@@ -21,7 +21,7 @@
             </div>
         </div>
     </div>
-    
+
     <div class="popover" id="popover-add-options">
         <div class="popover-inner">
             <div class="list">
@@ -39,9 +39,28 @@
         </div>
     </div>
 
+    {{#if nottablet}}
     <div class="tabs-swipeable-wrap">
+        {{/if}}
         <div class="tabs">
             <div id="add-tab" class="tab tab-active">
+                <div class="navbar only-tablet">
+                    <div class="navbar-bg"></div>
+                    <div class="navbar-inner">
+                        <div class="left">
+                            <a class="link" onclick="router.back({force: true, ignoreCache: true})">
+                                <i class="icon icon-back"></i>
+                                <span class="if-not-md">Back</span>
+                            </a>
+                        </div>
+                        <div class="title">Add Items</div>
+                        <div class="right">
+                            <a class="link popover-open" data-popover="#popover-add-options">
+                                <i class="icon material-icons">more_vert</i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
                 <div class="page-content">
                     <div class="list no-margin-top">
                         <ul>
@@ -119,16 +138,27 @@
             </div>
 
             <div id="history-tab" class="page-content tab">
+                <div class="navbar only-tablet">
+                    <div class="navbar-bg"></div>
+                    <div class="navbar-inner">
+                        <div class="title">Recent Items</div>
+                    </div>
+                </div>
                 <div class="block text-align-center" id="no-history">
                     <img style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/history-dashed.svg" class="margin-vertical" />
-                    <div class="margin-top">No recently added items!  Swipe <i class="fas fa-arrow-left"></i> to add some.</div>
+                    <div class="margin-top">No recently added items!  <span id="history-empty-swipe-prompt">Swipe <i class="fas fa-arrow-left"></i> to add some.</span></div>
                 </div>
                 <ul class="list no-hairlines tablet-inset no-margin-top" id="historylist">
                     <!-- Packages go here -->
                 </ul>
+                <div class="block text-align-center display-none" id="tap-to-remove-history-prompt">
+                    <span class="block-header"><span class="taptext">Tap</span><span class="clicktext">Click</span> a recently added item to delete it.</span>
+                </div>
             </div>
         </div>
+        {{#if nottablet}}
     </div>
+    {{/if}}
 
     <script src="assets/js/add.js"></script>
 

www/routes.js

@@ -71,12 +71,17 @@ var routes = [
     {
         path: '/add',
         name: 'add',
-        templateUrl: './pages/add.html',
-        options: {
-            context: {
-                show_help: show_help,
-                itemtypes: SETTINGS.itemtypes
-            }
+        async: function (routeTo, routeFrom, resolve, reject) {
+            let tablet = $(window).width() >= 768;
+            resolve({
+                templateUrl: './pages/add.html',
+            }, {
+                context: {
+                    show_help: show_help,
+                    itemtypes: SETTINGS.itemtypes,
+                    nottablet: !tablet
+                }
+            })
         },
         on: {
             pageAfterIn: function () {