Add image/button on list when no packages in list (close #18)

www/assets/images/box-open-dashed.svg

@@ -0,0 +1 @@
+<svg class="svg-inline--fa fa-box-open fa-w-19" aria-hidden="true" data-icon="box-open" data-prefix="fal" focusable="false" role="img" version="1.1" viewBox="0 0 608 512" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><metadata><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/></cc:Work></rdf:RDF></metadata><path d="M606.4 143.8L557.5 41c-2.7-5.6-8.1-9-13.9-9C543 32 304 64 304 64S65 32 64.4 32c-5.8 0-11.2 3.5-13.9 9L1.6 143.8c-4.4 9.2.3 20.2 9.6 23l49.5 14.9V393c0 14.7 9.5 27.5 23 31l205.4 54.1c13 3.4 23.7 1.5 29.5 0L524.2 424c13.5-3.6 23-16.4 23-31V181.7l49.5-14.9c9.4-2.8 14-13.8 9.7-23zM73 65.3l180.9 24.3-57.1 99.8-159.9-48.1 36.1-76zm18.2 125.6C208.3 226.1 200.5 224 203.6 224c5.4 0 10.5-2.9 13.3-7.9l71.9-125.5V445L91.2 393V190.9zM516.8 393l-197.6 52V90.5L391.1 216c2.9 5 8 7.9 13.3 7.9 3.1 0-5 2.1 112.4-33.1V393zM411.3 189.3l-57.1-99.8L535 65.3l36.1 76-159.8 48z" fill="none" stroke="#9e9e9e" stroke-dasharray="5, 5" stroke-width="10"/></svg>

www/assets/js/list.js

@@ -102,6 +102,12 @@ function loadPackageList(sortType) {
 
     $("#addresslist").html("");
 
+    if (packages.length == 0) {
+        $("#no-packages-display").removeClass("display-none");
+    } else {
+        $("#no-packages-display").addClass("display-none");
+    }
+
     for (var i = 0; i < sortedPackages.length; i++) {
         var icon = "fas fa-box-open";
         var classes = "";

www/pages/list.html

@@ -40,6 +40,11 @@
 
     <div class="page-content">
 
+        <div id="no-packages-display" class="display-none text-align-center">
+            <img style="width: 60%; max-width: 300px;" src="assets/images/box-open-dashed.svg" />
+            <br />
+            <a href="/manage" class="button button-round button-fill margin-horizontal">Add a Package</a>
+        </div>
         <ul class="list no-hairlines tablet-inset" id="addresslist" style="margin-top: 0;">
             <!-- Packages go here -->
         </ul>