Merge pull request #238 from teaxyz/no-results-found

'No Results Found' for Package Section

lychee.toml

@@ -28,4 +28,6 @@ exclude = [
   "file:///home/runner/work/www/www/public/+github.com/rhash/RHash",
   "file:///home/runner/work/www/www/public/+github.com/rhash/RHash",
   "https://app.tea.xyz/api/signups",                                                              # can take a little too long, and no reason to hammer here.
+  "https://unicode.org/",
+  "https://gnome.org/"
 ]

src/layouts/partials/no-results-found.html

@@ -0,0 +1,21 @@
+<hr>
+  <section id="noResult" class="no-results">
+    <div class="container black-bg">
+      <div class="row">
+        <div class="col two-boxes-up two-boxes-down">
+          <h4 class="text-center">No results found :(</h4>
+          <p class="text-center">Try refining your search term.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+<hr>
+
+<style>
+  .no-results {
+    display: none;
+  }
+  .no-results.show {
+    display: block;
+  }
+</style>

src/layouts/partials/package-grid.html

@@ -24,6 +24,7 @@
           {{- partial "package-thumbnail.html" .}}
         {{ end }}
       </div>
+      {{- partial "no-results-found.html" }}
     </div>
   </div>
   <hr>
@@ -120,6 +121,7 @@
 
   const onSearch = debounce(() => {
     const searchInput = document.getElementById('searchTermDesktop');
+    const noResult = document.getElementById('noResult');
     if (searchInput.value) {
       const term = searchInput.value;
       const packages = getPackageThumbs();
@@ -130,16 +132,28 @@
       });
       const grid = document.getElementById('packageGrid');
       grid.textContent = '';
+      let searchCount = 0;
       for(const sp of sortedPackages) {
         const score = getMatchScore(term, sp.dataset);
         if (score > 20) {
           sp.classList.remove('hidden');
+          searchCount++;
         } else {
           sp.classList.add('hidden');
         }
         grid.appendChild(sp);
       }
+
+      if (searchCount) {
+        loadMoreSection.classList.remove('hidden');
+        noResult.classList.remove('show');
       } else {
+        loadMoreSection.classList.add('hidden');
+        noResult.classList.add('show');
+      }
+
+    } else {
+      noResult.classList.remove('show');
       sortPackages();
     }
   }, 300);