Set max width of add form, other tablet improvements (#36)

www/assets/css/tablet.css

@@ -34,6 +34,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     }
     .page[data-name="add"] .tabs #add-tab {
         width: 66.67% !important;
+        position: relative; /* Make the FAB stay where it should */
     }
     .page[data-name="add"] .tabs #history-tab {
         width: 33.33% !important;
@@ -46,7 +47,23 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
         padding-bottom: 0;
     }
 
+    .page[data-name="add"] #add-tab .list {
+        /* .elevation-3 */
+        box-shadow: var(--f7-elevation-3)!important;
+    }
+
+    .page[data-name="add"] #history-tab {
+        /*box-shadow: inset 5px 0 9px -5px rgba(0,0,0,0.3);*/
+        border-left: 1px solid rgba(0,0,0,0.1);
+    }
+
     .page[data-name="add"] .fab {
         margin-bottom: 0;
     }
+}
+
+@media all and (min-width: 768px) and (min-height: 700px) {
+    .page[data-name="add"] #add-tab .page-content {
+        margin-top: 1rem;
+    }
 }

www/assets/js/add.js

@@ -4,7 +4,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-$("#addpackagebtn").click(function () {
+$(".addpackagebtn").click(function () {
     if ($("input[name=number]").val().trim() == "") {
         playSound("error");
         app.toast.show({

www/pages/add.html

@@ -61,8 +61,8 @@
                         </div>
                     </div>
                 </div>
-                <div class="page-content">
-                    <div class="list no-margin-top">
+                <div class="page-content row justify-content-center">
+                    <div class="list no-margin-top col-100 medium-80 large-50">
                         <ul>
                             <li class="item-divider">Address</li>
                             <li>
@@ -130,11 +130,17 @@
                     </div>
                 </div>
 
-                <div class="fab fab-right-bottom">
-                    <a id="addpackagebtn">
+                <div class="fab fab-right-bottom no-tablet">
+                    <a class="addpackagebtn">
                         <i class="icon material-icons">add</i>
                     </a>
                 </div>
+                <div class="fab fab-extended fab-right-bottom only-tablet">
+                    <a class="addpackagebtn">
+                        <i class="icon material-icons">add</i>
+                        <div class="fab-text">Add Item</div>
+                    </a>
+                </div>
             </div>
 
             <div id="history-tab" class="page-content tab">