Add illustrations to tracking tabs

www/assets/css/app.css

@@ -194,3 +194,9 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     transform-origin: 50% 100%;
     transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
 }
+
+.fullwidth-filler-image {
+    max-height: 40vh;
+    max-width: 90%;
+    height: 50rem;
+}

www/assets/js/track.js

@@ -22,9 +22,12 @@ function openTrackingInfoPage(code) {
 
 function addTrackingSuggestions() {
     $("#tracking-history-list ul").html("");
+    $("#tracking-history-list-empty").addClass("display-none");
+    $("#tracking-history-list .list").removeClass("display-none");
     var history = getTrackingHistory();
     if (history == false || history.length == 0) {
-        $("#tracking-history-list ul").html('<li class="item-content"><div class="item-inner justify-content-center text-align-center" style="color: var(--f7-list-item-footer-text-color);">You haven\'t tracked anything yet.</div></li>');
+        $("#tracking-history-list-empty").removeClass("display-none");
+        $("#tracking-history-list .list").addClass("display-none");
     } else {
         for (var i = history.length - 1; i >= 0; i--) {
             $("#tracking-history-list ul").append('<li><a class="item-link item-content hapticbtn tracking-code-history-link" data-trackingcode="' + history[i] + '" href="/track/' + history[i] + '">'
@@ -34,6 +37,8 @@ function addTrackingSuggestions() {
         }
     }
     if (inStorage("accountkey") && inStorage("accountnumber")) {
+        $("#tracking-account-list-empty").addClass("display-none");
+        $("#tracking-account-list .list").removeClass("display-none");
         apirequest(SETTINGS.apis.gettrackingnumbers, {
             accountnumber: getStorage("accountnumber"),
             accountkey: getStorage("accountkey")
@@ -52,7 +57,8 @@ function addTrackingSuggestions() {
                 }
 
                 if (success.trackingnumbers.length == 0) {
-                    $("#tracking-account-list ul").html('<li class="item-content"><div class="item-inner justify-content-center"><div class="item-title" style="color: var(--f7-list-item-footer-text-color);">You have no recent shipments.</div></div></li>');
+                    $("#tracking-account-list-empty").removeClass("display-none");
+                    $("#tracking-account-list .list").addClass("display-none");
                 }
             } else {
                 $("#tracking-account-list ul").html('<li class="item-content"><div class="item-inner justify-content-center"><div class="item-title" style="color: var(--f7-list-item-footer-text-color);">Error: ' + success.msg + '</div></div></li>');
@@ -62,9 +68,12 @@ function addTrackingSuggestions() {
             sendErrorReport("Tracking", "Couldn't get account tracking codes", "Server/network problem: " + xhr.status + ": " + xhr.statusText);
         }, "GET");
     } else {
-        $("#tracking-account-list ul").html('<li class="item-content"><div class="item-inner justify-content-center"><div class="item-title noselect" style="color: var(--f7-list-item-footer-text-color);">Get an account to use this feature.</div></div></li>');
+        $("#tracking-account-list-empty").removeClass("display-none");
+        $("#tracking-account-list .list").addClass("display-none");
     }
 
+    $("#tracking-multi-list-empty").addClass("display-none");
+    $("#tracking-multi-list .list").removeClass("display-none");
     var codes = getTrackingMultiList();
     if (codes.length > 0) {
         $("#tracking-multi-list ul").html('<li class="item-content"><div class="item-inner justify-content-center text-align-center noselect">Loading...</div></li>');
@@ -73,13 +82,16 @@ function addTrackingSuggestions() {
             updateTrackingMultiListStatus();
         }
     } else {
-        $("#tracking-multi-list ul").html('<li class="item-content"><div class="item-inner justify-content-center text-align-center noselect"><span>Quickly see the latest status for multiple packages at the same time right here. <span class="taptext">Long-press</span><span class="clicktext">Right-click</span>&nbsp;a tracking code in the Recent tab to add it.</span></div></li>');
+        $("#tracking-multi-list-empty").removeClass("display-none");
+        $("#tracking-multi-list .list").addClass("display-none");
     }
 }
 
 function updateTrackingMultiListStatus() {
     var codes = getTrackingMultiList();
     console.log(codes.length);
+    $("#tracking-multi-list-empty").addClass("display-none");
+    $("#tracking-multi-list .list").removeClass("display-none");
     $("#tracking-multi-list ul").html('<li class="item-content"><div class="item-inner justify-content-center"><div class="item-title">Loading...</div></div></li>');
     if (codes.length > 0) {
         $("#tracking-multi-list ul").html("");
@@ -127,7 +139,8 @@ function updateTrackingMultiListStatus() {
         });
 
     } else {
-        $("#tracking-multi-list ul").html('<li class="item-content"><div class="item-inner justify-content-center text-align-center noselect"><span>Quickly see the latest status for multiple packages at the same time right here. <span class="taptext">Long-press</span><span class="clicktext">Right-click</span>&nbsp;a tracking code in the Recent tab to add it.</span></div></li>');
+        $("#tracking-multi-list-empty").removeClass("display-none");
+        $("#tracking-multi-list .list").addClass("display-none");
     }
 }
 

www/pages/receipts.html

@@ -42,7 +42,7 @@
             {{else}}
             <div class="col-100 medium-60 large-50 xlarge-40">
                 <div class="block text-align-center">
-                    <img src="assets/images/receipt.svg" class="margin" style="max-height: 40vh; max-width: 90%; height: 50rem;" />
+                    <img src="assets/images/receipt.svg" class="margin fullwidth-filler-image" />
                     <p class="margin padding">You don't have any receipts linked to your account.  Use our services to get some!</p>
                 </div>
             </div>

www/pages/track.html

@@ -62,6 +62,16 @@
 
                         </ul>
                     </div>
+                    <div id="tracking-history-list-empty" class="display-none row justify-content-center noselect">
+                        <div class="col-100 medium-60 large-50 xlarge-40">
+                            <div class="block text-align-center">
+                                <img src="assets/images/tracking.svg" class="margin fullwidth-filler-image" />
+                                <p class="margin padding">
+                                    Tracking numbers you've searched recently will appear here.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div id="tracking-account-list" class="tab">
@@ -75,6 +85,16 @@
                             </li>
                         </ul>
                     </div>
+                    <div id="tracking-account-list-empty" class="display-none row justify-content-center noselect">
+                        <div class="col-100 medium-60 large-50 xlarge-40">
+                            <div class="block text-align-center">
+                                <img src="assets/images/searching.svg" class="margin fullwidth-filler-image" />
+                                <p class="margin padding">
+                                    Send packages with your Helena Express account and your tracking numbers will be listed here automatically.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div id="tracking-multi-list" class="tab">
@@ -88,6 +108,17 @@
                             </li>
                         </ul>
                     </div>
+                    <div id="tracking-multi-list-empty" class="display-none row justify-content-center noselect">
+                        <div class="col-100 medium-60 large-50 xlarge-40">
+                            <div class="block text-align-center">
+                                <img src="assets/images/multi-track.svg" class="margin fullwidth-filler-image" />
+                                <p class="margin padding">
+                                    Quickly see the latest status for multiple packages at the same time right here.
+                                    <span class="taptext">Long-press</span><span class="clicktext">Right-click</span>&nbsp;a tracking code in the Recent tab to add it.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>