NoDocuments

src/lib/components/documents/NoDocuments.svelte

@@ -0,0 +1,59 @@
+<script>
+  import { _ } from "svelte-i18n";
+
+  // SVG assets
+  import emptyResultsSvg from "@/assets/empty_results.svg?raw";
+</script>
+
+<div class="no-results">
+  <h2>{$_("noDocuments.noSearchResults")}</h2>
+  <div class="img">
+    {@html emptyResultsSvg}
+  </div>
+  <div class="text">
+    <p>
+      {$_("noDocuments.queryNoResults")}
+    </p>
+  </div>
+</div>
+
+<style>
+  .no-results {
+    margin: 1em 1.5em;
+    background: var(--yellow-light);
+    padding: 1em;
+    border-radius: 10px;
+  }
+
+  h2 {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 1.5em 0;
+    padding-left: 18px;
+  }
+
+  .img,
+  .text {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .text {
+    max-width: 80ch;
+    width: 30vw;
+    margin: 0 2em 1em 2em;
+  }
+  .text :global(a) {
+    color: var(--primary);
+  }
+
+  .text p {
+    font-size: 15px;
+    line-height: 22px;
+    margin: 5px 0;
+  }
+
+  p {
+    margin: 0 1em;
+  }
+</style>

src/lib/components/documents/ResultsList.svelte

@@ -7,14 +7,9 @@
 <script lang="ts">
   import type { DocumentResults } from "$lib/api/types";
   import DocumentListItem from "./DocumentListItem.svelte";
-  import { onMount } from "svelte";
+  import NoDocuments from "./NoDocuments.svelte";
 
   export let results: DocumentResults;
-
-  onMount(() => {
-    // @ts-ignore
-    window.searchResults = results;
-  });
 </script>
 
 <div class="results">
@@ -23,6 +18,8 @@
       <input type="checkbox" value={document.id} bind:group={$selected} />
       <DocumentListItem {document} />
     </div>
+  {:else}
+    <NoDocuments />
   {/each}
 </div>