Toolbox: Center UIs in middle of screen with max width (#36)

www/assets/css/tablet.css

@@ -47,7 +47,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
         padding-bottom: 0;
     }
 
-    .page[data-name="add"] #add-tab .list {
+    .elevation-tablet {
         /* .elevation-3 */
         box-shadow: var(--f7-elevation-3)!important;
     }
@@ -63,7 +63,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 }
 
 @media all and (min-width: 768px) and (min-height: 700px) {
-    .page[data-name="add"] #add-tab .page-content {
+    .margin-top-tablet {
         margin-top: 1rem;
     }
 }

www/pages/add.html

@@ -61,8 +61,8 @@
                         </div>
                     </div>
                 </div>
-                <div class="page-content row justify-content-center">
+                <div class="page-content row justify-content-center margin-top-tablet">
-                    <div class="list no-margin-top col-100 medium-80 large-50">
+                    <div class="list no-margin-top col-100 medium-80 large-50 elevation-tablet">
                         <ul>
                             <li class="item-divider">Address</li>
                             <li>

www/pages/toolbox.html

@@ -17,6 +17,8 @@
     </div>
 
     <div class="page-content">
+        <div class="row justify-content-center">
+            <div class="col-100 small-80 medium-60 large-50 xlarge-40">
                 <div class="list no-hairlines tablet-inset" style="margin-top: 0;">
                     <ul>
                         <li>
@@ -62,4 +64,6 @@
                     </ul>
                 </div>
             </div>
+        </div>
+    </div>
 </div>

www/pages/toolbox/addrlookup.html

@@ -18,6 +18,8 @@
     </div>
 
     <div class="page-content">
+        <div class="row justify-content-center">
+            <div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
                 <div class="list no-margin-top">
                     <ul>
                         <li>
@@ -114,6 +116,8 @@
                     </ul>
                 </div>
             </div>
+        </div>
+    </div>
 
     <script src="assets/js/toolbox_addresslookup.js"></script>
 

www/pages/toolbox/scanner.html

@@ -17,6 +17,8 @@
     </div>
 
     <div class="page-content">
+        <div class="row justify-content-center">
+            <div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
                 <div class="list no-hairlines tablet-inset" style="margin-top: 0;">
                     <ul>
                         <li>
@@ -47,4 +49,6 @@
                     Scan Barcode feature.
                 </div>
             </div>
+        </div>
+    </div>
 </div>

www/pages/toolbox/scanner/entries.html

@@ -22,6 +22,8 @@
     </div>
 
     <div class="page-content">
+        <div class="row justify-content-center">
+            <div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
                 {{#if entries}}
                 <div class="list media-list no-margin-top no-hairlines">
                     <ul>
@@ -55,6 +57,8 @@
                 </div>
                 {{/if}}
             </div>
+        </div>
+    </div>
 
     <script src="assets/js/toolbox_scannerentries.js"></script>
 </div>

www/pages/toolbox/scanner/scanner.html

@@ -95,12 +95,16 @@
     </div>
 
     <div class="page-content">
+        <div class="row justify-content-center">
+            <div class="col-100 small-80 medium-60 large-50 xlarge-40">
                 <div class="list no-hairlines tablet-inset">
                     <ul id="codelist">
                     </ul>
                 </div>
                 <div style="height: 3rem;"></div>
             </div>
+        </div>
+    </div>
 
     <script src="assets/js/toolbox_scanner.js"></script>
 

www/pages/toolbox/sharelist.html

@@ -17,6 +17,8 @@
     </div>
 
     <div class="page-content">
+        <div class="row justify-content-center">
+            <div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
                 <div class="list media-list no-hairlines tablet-inset no-margin-top">
                     <ul>
                         <li class="item-divider">Send List</li>
@@ -63,6 +65,8 @@
                     type in the code beneath the barcode.
                 </div>
             </div>
+        </div>
+    </div>
 
     <script src="assets/js/toolbox_sharelist.js"></script>
 </div>

www/pages/toolbox/track.html

@@ -23,7 +23,9 @@
     </div>
 
     <div class="page-content">
-        <div class="list no-hairlines tablet-inset">
+        <div class="row justify-content-center">
+            <div class="col-100 medium-60 large-50 xlarge-40">
+                <div class="list no-hairlines tablet-inset elevation-tablet">
                     <ul>
                         <li class="item-content item-input">
                             <div class="item-inner">
@@ -49,7 +51,7 @@
                 </div>
 
                 {{#if trackingcodehistory}}
-        <div class="list no-hairlines tablet-inset">
+                <div class="list no-hairlines tablet-inset elevation-tablet">
                     <ul>
                         <li class="item-divider">
                             History
@@ -67,6 +69,8 @@
                 </div>
                 {{/if}}
             </div>
+        </div>
+    </div>
 
     <script src="assets/js/toolbox_track.js"></script>
 </div>

www/pages/toolbox/trackinginfo.html

@@ -22,6 +22,8 @@
     </div>
 
     <div class="page-content">
+        <div class="row justify-content-center">
+            <div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
                 <div class="list media-list no-hairlines tablet-inset no-margin-top">
                     <ul>
                         <li class="item-divider">Information</li>
@@ -77,6 +79,8 @@
                     </ul>
                 </div>
             </div>
+        </div>
+    </div>
 
     <script>
         JsBarcode("#trackingbarcode", "{{#if barcode}}{{escape barcode}}{{else}}{{escape code}}{{/if}}", {

www/pages/toolbox/weather.html

@@ -22,7 +22,8 @@
     </div>
 
     <div class="page-content">
-
+        <div class="row justify-content-center">
+            <div class="col-100 small-80 medium-60 large-50 xlarge-40">
                 <div class="block text-align-center">
                     <img id="weathericon" style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/weather-none.svg" class="margin-vertical" />
 
@@ -48,6 +49,8 @@
                     </div>
                 </div>
             </div>
+        </div>
+    </div>
 
     <script src="assets/js/toolbox_weather.js"></script>
 </div>