Make toolbox menu use tiles too (TODO: add rest of tile backgrounds)

www/assets/images/bgs/toolbox_scanner.svg

@@ -0,0 +1,352 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="500"
+   height="500"
+   viewBox="0 0 132.29166 132.29167"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="toolbox_scanner.svg">
+  <defs
+     id="defs2">
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Drop Shadow"
+       id="filter1558">
+      <feFlood
+         flood-opacity="0.717647"
+         flood-color="rgb(0,0,0)"
+         result="flood"
+         id="feFlood1548" />
+      <feComposite
+         in="SourceGraphic"
+         in2="flood"
+         operator="in"
+         result="composite1"
+         id="feComposite1550" />
+      <feGaussianBlur
+         in="composite1"
+         stdDeviation="2"
+         result="blur"
+         id="feGaussianBlur1552" />
+      <feOffset
+         dx="0"
+         dy="0"
+         result="offset"
+         id="feOffset1554" />
+      <feComposite
+         in="offset"
+         in2="offset"
+         operator="atop"
+         result="composite2"
+         id="feComposite1556" />
+    </filter>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="223.01231"
+     inkscape:cy="346.77422"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     borderlayer="true"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1013"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-164.70831)">
+    <rect
+       style="opacity:1;fill:#e1f5fe;fill-opacity:0.49803922;stroke:none;stroke-width:1.26999998;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+       id="rect836"
+       width="132.29167"
+       height="132.29166"
+       x="0"
+       y="164.7083" />
+    <g
+       id="g1590"
+       transform="matrix(0.41955654,-0.24213739,0.24223108,0.41939426,-42.31954,139.17989)"
+       style="stroke-width:2.06454396">
+      <g
+         transform="matrix(0,1,1,0,-170.07558,170.07557)"
+         style="stroke-width:2.06454396;filter:url(#filter1558)"
+         id="g1472">
+        <circle
+           style="opacity:1;fill:#0095ff;fill-opacity:0.58823529;stroke:none;stroke-width:2.62197089;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+           id="path1460"
+           cx="47.813988"
+           cy="217.81396"
+           r="7.7485118" />
+        <circle
+           r="7.7485118"
+           cy="217.81396"
+           cx="70.719345"
+           id="circle1462"
+           style="opacity:1;fill:#ff0900;fill-opacity:0.58823529;stroke:none;stroke-width:2.62197089;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385" />
+        <circle
+           style="opacity:1;fill:#ffef00;fill-opacity:0.58823529;stroke:none;stroke-width:2.62197089;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+           id="circle1464"
+           cx="47.813988"
+           cy="240.87051"
+           r="7.7485118" />
+        <circle
+           r="7.7485118"
+           cy="240.87051"
+           cx="70.719345"
+           id="circle1466"
+           style="opacity:1;fill:#00ff00;fill-opacity:0.58823529;stroke:none;stroke-width:2.62197089;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385" />
+      </g>
+      <g
+         transform="matrix(0,1,1,0,-170.07558,170.07557)"
+         id="g1568"
+         style="stroke-width:2.06454396;filter:url(#filter1558)">
+        <circle
+           r="7.7485118"
+           cy="217.81396"
+           cx="47.813988"
+           id="circle1560"
+           style="opacity:1;fill:#0095ff;fill-opacity:0.58823529;stroke:none;stroke-width:2.62197089;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385" />
+        <circle
+           style="opacity:1;fill:#ff0900;fill-opacity:0.58823529;stroke:none;stroke-width:2.62197089;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+           id="circle1562"
+           cx="70.719345"
+           cy="217.81396"
+           r="7.7485118" />
+        <circle
+           r="7.7485118"
+           cy="240.87051"
+           cx="47.813988"
+           id="circle1564"
+           style="opacity:1;fill:#ffef00;fill-opacity:0.58823529;stroke:none;stroke-width:2.62197089;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385" />
+        <circle
+           style="opacity:1;fill:#00ff00;fill-opacity:0.58823529;stroke:none;stroke-width:2.62197089;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+           id="circle1566"
+           cx="70.719345"
+           cy="240.87051"
+           r="7.7485118" />
+      </g>
+    </g>
+    <g
+       transform="matrix(-0.28112418,-0.0754425,0.07519362,-0.28105749,100.63823,258.94479)"
+       id="g1612"
+       style="stroke-width:3.43634796">
+      <g
+         id="g1600"
+         style="stroke-width:3.43634796;filter:url(#filter1558)"
+         transform="matrix(0,1,1,0,-170.07558,170.07557)">
+        <circle
+           r="7.7485118"
+           cy="217.81396"
+           cx="47.813988"
+           id="circle1592"
+           style="opacity:1;fill:#0095ff;fill-opacity:0.58823529;stroke:none;stroke-width:4.36416197;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385" />
+        <circle
+           style="opacity:1;fill:#ff0900;fill-opacity:0.58823529;stroke:none;stroke-width:4.36416197;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+           id="circle1594"
+           cx="70.719345"
+           cy="217.81396"
+           r="7.7485118" />
+        <circle
+           r="7.7485118"
+           cy="240.87051"
+           cx="47.813988"
+           id="circle1596"
+           style="opacity:1;fill:#ffef00;fill-opacity:0.58823529;stroke:none;stroke-width:4.36416197;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385" />
+        <circle
+           style="opacity:1;fill:#00ff00;fill-opacity:0.58823529;stroke:none;stroke-width:4.36416197;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+           id="circle1598"
+           cx="70.719345"
+           cy="240.87051"
+           r="7.7485118" />
+      </g>
+      <g
+         style="stroke-width:3.43634796;filter:url(#filter1558)"
+         id="g1610"
+         transform="matrix(0,1,1,0,-170.07558,170.07557)">
+        <circle
+           style="opacity:1;fill:#0095ff;fill-opacity:0.58823529;stroke:none;stroke-width:4.36416197;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+           id="circle1602"
+           cx="47.813988"
+           cy="217.81396"
+           r="7.7485118" />
+        <circle
+           r="7.7485118"
+           cy="217.81396"
+           cx="70.719345"
+           id="circle1604"
+           style="opacity:1;fill:#ff0900;fill-opacity:0.58823529;stroke:none;stroke-width:4.36416197;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385" />
+        <circle
+           style="opacity:1;fill:#ffef00;fill-opacity:0.58823529;stroke:none;stroke-width:4.36416197;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+           id="circle1606"
+           cx="47.813988"
+           cy="240.87051"
+           r="7.7485118" />
+        <circle
+           r="7.7485118"
+           cy="240.87051"
+           cx="70.719345"
+           id="circle1608"
+           style="opacity:1;fill:#00ff00;fill-opacity:0.58823529;stroke:none;stroke-width:4.36416197;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385" />
+      </g>
+    </g>
+    <g
+       style="stroke-width:2.50497127"
+       transform="matrix(0.12006389,0.38079162,-0.38061594,0.1201877,170.43155,209.05727)"
+       id="g1634">
+      <g
+         id="g1622"
+         style="stroke-width:2.50497127;filter:url(#filter1558)"
+         transform="matrix(0,1,1,0,-170.07558,170.07557)">
+        <circle
+           r="7.7485118"
+           cy="217.81396"
+           cx="47.813988"
+           id="circle1614"
+           style="opacity:1;fill:#0095ff;fill-opacity:0.58823529;stroke:none;stroke-width:3.18131375;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385" />
+        <circle
+           style="opacity:1;fill:#ff0900;fill-opacity:0.58823529;stroke:none;stroke-width:3.18131375;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+           id="circle1616"
+           cx="70.719345"
+           cy="217.81396"
+           r="7.7485118" />
+        <circle
+           r="7.7485118"
+           cy="240.87051"
+           cx="47.813988"
+           id="circle1618"
+           style="opacity:1;fill:#ffef00;fill-opacity:0.58823529;stroke:none;stroke-width:3.18131375;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385" />
+        <circle
+           style="opacity:1;fill:#00ff00;fill-opacity:0.58823529;stroke:none;stroke-width:3.18131375;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+           id="circle1620"
+           cx="70.719345"
+           cy="240.87051"
+           r="7.7485118" />
+      </g>
+      <g
+         style="stroke-width:2.50497127;filter:url(#filter1558)"
+         id="g1632"
+         transform="matrix(0,1,1,0,-170.07558,170.07557)">
+        <circle
+           style="opacity:1;fill:#0095ff;fill-opacity:0.58823529;stroke:none;stroke-width:3.18131375;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+           id="circle1624"
+           cx="47.813988"
+           cy="217.81396"
+           r="7.7485118" />
+        <circle
+           r="7.7485118"
+           cy="217.81396"
+           cx="70.719345"
+           id="circle1626"
+           style="opacity:1;fill:#ff0900;fill-opacity:0.58823529;stroke:none;stroke-width:3.18131375;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385" />
+        <circle
+           style="opacity:1;fill:#ffef00;fill-opacity:0.58823529;stroke:none;stroke-width:3.18131375;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+           id="circle1628"
+           cx="47.813988"
+           cy="240.87051"
+           r="7.7485118" />
+        <circle
+           r="7.7485118"
+           cy="240.87051"
+           cx="70.719345"
+           id="circle1630"
+           style="opacity:1;fill:#00ff00;fill-opacity:0.58823529;stroke:none;stroke-width:3.18131375;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385" />
+      </g>
+    </g>
+    <g
+       style="stroke-width:3.43634796"
+       id="g1656"
+       transform="matrix(0.0754425,0.28112418,0.28105749,-0.07519362,-40.278995,280.17935)">
+      <g
+         transform="matrix(0,1,1,0,-170.07558,170.07557)"
+         style="stroke-width:3.43634796;filter:url(#filter1558)"
+         id="g1644">
+        <circle
+           style="opacity:1;fill:#0095ff;fill-opacity:0.58823529;stroke:none;stroke-width:4.36416197;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+           id="circle1636"
+           cx="47.813988"
+           cy="217.81396"
+           r="7.7485118" />
+        <circle
+           r="7.7485118"
+           cy="217.81396"
+           cx="70.719345"
+           id="circle1638"
+           style="opacity:1;fill:#ff0900;fill-opacity:0.58823529;stroke:none;stroke-width:4.36416197;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385" />
+        <circle
+           style="opacity:1;fill:#ffef00;fill-opacity:0.58823529;stroke:none;stroke-width:4.36416197;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+           id="circle1640"
+           cx="47.813988"
+           cy="240.87051"
+           r="7.7485118" />
+        <circle
+           r="7.7485118"
+           cy="240.87051"
+           cx="70.719345"
+           id="circle1642"
+           style="opacity:1;fill:#00ff00;fill-opacity:0.58823529;stroke:none;stroke-width:4.36416197;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385" />
+      </g>
+      <g
+         transform="matrix(0,1,1,0,-170.07558,170.07557)"
+         id="g1654"
+         style="stroke-width:3.43634796;filter:url(#filter1558)">
+        <circle
+           r="7.7485118"
+           cy="217.81396"
+           cx="47.813988"
+           id="circle1646"
+           style="opacity:1;fill:#0095ff;fill-opacity:0.58823529;stroke:none;stroke-width:4.36416197;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385" />
+        <circle
+           style="opacity:1;fill:#ff0900;fill-opacity:0.58823529;stroke:none;stroke-width:4.36416197;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+           id="circle1648"
+           cx="70.719345"
+           cy="217.81396"
+           r="7.7485118" />
+        <circle
+           r="7.7485118"
+           cy="240.87051"
+           cx="47.813988"
+           id="circle1650"
+           style="opacity:1;fill:#ffef00;fill-opacity:0.58823529;stroke:none;stroke-width:4.36416197;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385" />
+        <circle
+           style="opacity:1;fill:#00ff00;fill-opacity:0.58823529;stroke:none;stroke-width:4.36416197;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.99492385"
+           id="circle1652"
+           cx="70.719345"
+           cy="240.87051"
+           r="7.7485118" />
+      </g>
+    </g>
+  </g>
+</svg>

www/pages/home.html

@@ -28,19 +28,23 @@
             </div>
         </div>
         {{#if oldui}}
-        <div class="list no-hairlines tablet-inset no-margin-top">
-            <ul>
-                {{#each pages}}
-                <li>
-                    <a href="{{href}}" class="item-link item-content">
-                        <div class="item-media"><i class="icon {{icon}}"></i></div>
-                        <div class="item-inner">
-                            <div class="item-title">{{title}}</div>
-                        </div>
-                    </a>
-                </li>
-                {{/each}}
-            </ul>
+        <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 no-margin-top">
+                    <ul>
+                        {{#each pages}}
+                        <li>
+                            <a href="{{href}}" class="item-link item-content">
+                                <div class="item-media"><i class="icon {{icon}}"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">{{title}}</div>
+                                </div>
+                            </a>
+                        </li>
+                        {{/each}}
+                    </ul>
+                </div>
+            </div>
         </div>
         {{else}}
         <div class="row justify-content-center margin-top">

www/pages/toolbox.html

@@ -17,61 +17,43 @@
     </div>
 
     <div class="page-content">
+        {{#if oldui}}
         <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;">
+                <div class="list no-hairlines tablet-inset no-margin-top">
                     <ul>
+                        {{#each pages}}
                         <li>
-                            <a href="/toolbox/scanner" class="item-link item-content">
-                                <div class="item-media"><i class="icon fas fa-barcode"></i></div>
+                            <a href="{{href}}" class="item-link item-content">
+                                <div class="item-media"><i class="icon {{icon}}"></i></div>
                                 <div class="item-inner">
-                                    <div class="item-title">Broken Scanner</div>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="/toolbox/track" class="item-link item-content">
-                                <div class="item-media"><i class="icon fas fa-search"></i></div>
-                                <div class="item-inner">
-                                    <div class="item-title">Track Item</div>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="/toolbox/weather" class="item-link item-content">
-                                <div class="item-media"><i class="icon fas fa-cloud-sun"></i></div>
-                                <div class="item-inner">
-                                    <div class="item-title">Weather Lookahead</div>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="/toolbox/addrlookup" class="item-link item-content">
-                                <div class="item-media"><i class="icon fas fa-search-location"></i></div>
-                                <div class="item-inner">
-                                    <div class="item-title">Address Lookup</div>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="/toolbox/log" class="item-link item-content">
-                                <div class="item-media"><i class="icon fas fa-book"></i></div>
-                                <div class="item-inner">
-                                    <div class="item-title">Activity Log</div>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="/toolbox/sharelist" class="item-link item-content">
-                                <div class="item-media"><i class="icon fas fa-share-alt"></i></div>
-                                <div class="item-inner">
-                                    <div class="item-title">Share Item List</div>
+                                    <div class="item-title">{{title}}</div>
                                 </div>
                             </a>
                         </li>
+                        {{/each}}
                     </ul>
                 </div>
             </div>
         </div>
+        {{else}}
+        <div class="row justify-content-center margin-top">
+            <div class="col-100 medium-90 xlarge-75 margin-horizontal">
+                <div class="row">
+                    {{#each pages}}
+                    <div class="col-50 small-33 large-15">
+                        <div class="card" onclick="router.navigate('{{href}}');" style="cursor: pointer; background-image: url(assets/images/bgs/{{bg}}); background-repeat: no-repeat; background-position: center; background-size: cover;">
+                            <div class="card-content text-align-center padding-vertical">
+                                <h1 class="no-margin"><i class="{{icon}}"></i></h1>
+                                <br />
+                                <span style="font-weight: 700;">{{title}}</span>
+                            </div>
+                        </div>
+                    </div>
+                    {{/each}}
+                </div>
+            </div>
+        </div>
+        {{/if}}
     </div>
 </div>

www/routes.js

@@ -218,8 +218,54 @@ var routes = [
     },
     {
         path: '/toolbox',
-        url: './pages/toolbox.html',
         name: 'toolbox',
+        async: function (routeTo, routeFrom, resolve, reject) {
+            resolve({
+                templateUrl: './pages/toolbox.html'
+            }, {
+                context: {
+                    oldui: inStorage("oldhomeui") && getStorage("oldhomeui") == "true",
+                    pages: [
+                        {
+                            title: "Broken Scanner",
+                            href: "/toolbox/scanner",
+                            icon: "fas fa-barcode",
+                            bg: "toolbox_scanner.svg"
+                        },
+                        {
+                            title: "Track Item",
+                            href: "/toolbox/track",
+                            icon: "fas fa-search",
+                            bg: "toolbox_track.svg"
+                        },
+                        {
+                            title: "Weather Lookahead",
+                            href: "/toolbox/weather",
+                            icon: "fas fa-cloud-sun",
+                            bg: "toolbox_weather.svg"
+                        },
+                        {
+                            title: "Address Lookup",
+                            href: "/toolbox/addrlookup",
+                            icon: "fas fa-search-location",
+                            bg: "toolbox_addrlookup.svg"
+                        },
+                        {
+                            title: "Activity Log",
+                            href: "/toolbox/log",
+                            icon: "fas fa-book",
+                            bg: "toolbox_log.svg"
+                        },
+                        {
+                            title: "Share Item List",
+                            href: "/toolbox/sharelist",
+                            icon: "fas fa-share-alt",
+                            bg: "toolbox_sharelist.svg"
+                        }
+                    ]
+                }
+            });
+        },
         routes: [
             {
                 path: '/scanner',