From a2518be514217ae031afbcab572e74f716fed9ca Mon Sep 17 00:00:00 2001
From: Elijah <ejsisgreat@gmail.com>
Date: Mon, 23 Dec 2019 18:19:58 -0600
Subject: [PATCH] Display an image when there are no results

---
 site/src/components/SiteSearch.svelte | 28 +++++++++++++++++++++++++++
 site/static/icons/svelte-search.svg   |  1 +
 2 files changed, 29 insertions(+)
 create mode 100644 site/static/icons/svelte-search.svg

diff --git a/site/src/components/SiteSearch.svelte b/site/src/components/SiteSearch.svelte
index 819ed1ddba..45d8a5744b 100644
--- a/site/src/components/SiteSearch.svelte
+++ b/site/src/components/SiteSearch.svelte
@@ -5,12 +5,24 @@
 
 	export let showing = false;
 	let query = '';
+
+	let results = [];
 </script>
 
 {#if showing}
 	<div class="cover background" on:click={() => showing = false} transition:fade></div>
 	<div class="cover search" transition:fly={{x: 400}}>
 		<SearchBar bind:query on:close={() => showing = false} />
+		<div class="divider" />
+		{#if results.length}
+			reuslts
+		{:else}
+			<img src="/icons/svelte-search.svg" alt="Search Icon">
+		{/if}
+
+		{#if query.length && !results.length}
+			<p class="no-results">Couldn't find any results for "{query}"</p>
+		{/if}
 	</div>
 {/if}
 
@@ -31,4 +43,20 @@
 		width: 385px;
 		background: var(--back);
 	}
+	.divider {
+		height: 0.5px;
+		background: rgba(0, 0, 0, 0.1);
+	}
+	img {
+		width: 150px;
+		height: 150px;
+		display: block;
+		margin: calc(50vh - 160px) auto 0 auto;
+	}
+	.no-results {
+		font-size: 14px;
+		font-weight: bold;
+		text-align: center;
+		padding: 0 16px;
+	}
 </style>
diff --git a/site/static/icons/svelte-search.svg b/site/static/icons/svelte-search.svg
new file mode 100644
index 0000000000..238e9121b2
--- /dev/null
+++ b/site/static/icons/svelte-search.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 200 200" width="200pt" height="200pt"><path d=" M 132.563 37.5 C 159.838 37.5 182 58.857 182 85.14 C 182 111.423 159.838 132.78 132.563 132.78 C 121.774 132.78 111.799 129.398 103.663 123.717 Q 68.726 157.896 65.939 160.563 C 63.153 163.229 59.579 162.82 58.11 161.275 C 56.641 159.73 56.323 156.144 59.075 153.179 Q 61.828 150.214 95.087 116.131 C 87.648 107.789 83.126 96.974 83.126 85.14 C 83.126 58.857 105.288 37.5 132.563 37.5 Z  M 132.563 43.105 C 108.435 43.105 88.942 61.889 88.942 85.14 C 88.942 108.391 108.488 127.175 132.563 127.175 C 156.638 127.175 176.184 108.391 176.184 85.14 C 176.184 61.889 156.691 43.105 132.563 43.105 Z " fill="rgb(255,62,0)" fill-opacity="0.49"/><path d="M 108.189 55.098 L 130.811 55.098 C 132.433 55.098 133.75 56.415 133.75 58.037 L 133.75 64.061 C 133.75 65.683 132.433 67 130.811 67 L 108.189 67 C 106.567 67 105.25 65.683 105.25 64.061 L 105.25 58.037 C 105.25 56.415 106.567 55.098 108.189 55.098 Z" style="stroke:none;fill:#DFDFDF;stroke-miterlimit:10;"/><path d="M 119.482 110.231 L 142.105 110.231 C 143.727 110.231 145.043 111.548 145.043 113.17 L 145.043 119.195 C 145.043 120.816 143.727 122.133 142.105 122.133 L 119.482 122.133 C 117.86 122.133 116.543 120.816 116.543 119.195 L 116.543 113.17 C 116.543 111.548 117.86 110.231 119.482 110.231 Z" style="stroke:none;fill:#DFDFDF;stroke-miterlimit:10;"/><path d="M 120.453 91 L 163.09 91 C 165.248 91 167 92.752 167 94.91 L 167 98.992 C 167 101.15 165.248 102.902 163.09 102.902 L 120.453 102.902 C 118.295 102.902 116.543 101.15 116.543 98.992 L 116.543 94.91 C 116.543 92.752 118.295 91 120.453 91 Z" style="stroke:none;fill:#DFDFDF;stroke-miterlimit:10;"/><path d="M 97.212 91 L 107.874 91 C 109.048 91 110 91.952 110 93.126 L 110 100.776 C 110 101.95 109.048 102.902 107.874 102.902 L 97.212 102.902 C 96.039 102.902 95.087 101.95 95.087 100.776 L 95.087 93.126 C 95.087 91.952 96.039 91 97.212 91 Z" style="stroke:none;fill:#DFDFDF;stroke-miterlimit:10;"/><path d="M 140.629 55.098 L 158.179 55.098 C 159.63 55.098 160.807 56.276 160.807 57.727 L 160.807 64.371 C 160.807 65.822 159.63 67 158.179 67 L 140.629 67 C 139.178 67 138 65.822 138 64.371 L 138 57.727 C 138 56.276 139.178 55.098 140.629 55.098 Z" style="stroke:none;fill:#DFDFDF;stroke-miterlimit:10;"/><path d="M 34.748 51.196 L 80.377 51.196 C 81.894 51.196 83.126 52.428 83.126 53.944 L 83.126 54.252 C 83.126 55.768 81.894 57 80.377 57 L 34.748 57 C 33.232 57 32 55.768 32 54.252 L 32 53.944 C 32 52.428 33.232 51.196 34.748 51.196 Z" style="stroke:none;fill:#DFDFDF;stroke-miterlimit:10;"/><path d="M 26.794 66 L 59.206 66 C 60.748 66 62 67.252 62 68.794 L 62 69.01 C 62 70.552 60.748 71.804 59.206 71.804 L 26.794 71.804 C 25.252 71.804 24 70.552 24 69.01 L 24 68.794 C 24 67.252 25.252 66 26.794 66 Z" style="stroke:none;fill:#DFDFDF;stroke-miterlimit:10;"/><path d="M 68.902 66 L 76.098 66 C 77.7 66 79 67.3 79 68.902 L 79 68.902 C 79 70.504 77.7 71.804 76.098 71.804 L 68.902 71.804 C 67.3 71.804 66 70.504 66 68.902 L 66 68.902 C 66 67.3 67.3 66 68.902 66 Z" style="stroke:none;fill:#DFDFDF;stroke-miterlimit:10;"/><path d="M 19.002 82.238 L 73.998 82.238 C 75.655 82.238 77 83.538 77 85.14 L 77 85.14 C 77 86.742 75.655 88.042 73.998 88.042 L 19.002 88.042 C 17.345 88.042 16 86.742 16 85.14 L 16 85.14 C 16 83.538 17.345 82.238 19.002 82.238 Z" style="stroke:none;fill:#DFDFDF;stroke-miterlimit:10;"/><path d="M 39.902 97.098 L 76.098 97.098 C 77.7 97.098 79 98.398 79 100 L 79 100 C 79 101.602 77.7 102.902 76.098 102.902 L 39.902 102.902 C 38.3 102.902 37 101.602 37 100 L 37 100 C 37 98.398 38.3 97.098 39.902 97.098 Z" style="stroke:none;fill:#DFDFDF;stroke-miterlimit:10;"/><path d="M 11.967 97.098 L 29.033 97.098 C 30.67 97.098 32 98.398 32 100 L 32 100 C 32 101.602 30.67 102.902 29.033 102.902 L 11.967 102.902 C 10.33 102.902 9 101.602 9 100 L 9 100 C 9 98.398 10.33 97.098 11.967 97.098 Z" style="stroke:none;fill:#DFDFDF;stroke-miterlimit:10;"/><path d="M 4.902 113.28 L 41.098 113.28 C 42.7 113.28 44 114.58 44 116.182 L 44 116.182 C 44 117.784 42.7 119.084 41.098 119.084 L 4.902 119.084 C 3.3 119.084 2 117.784 2 116.182 L 2 116.182 C 2 114.58 3.3 113.28 4.902 113.28 Z" style="stroke:none;fill:#DFDFDF;stroke-miterlimit:10;"/><path d="M 69.902 113.28 L 83.098 113.28 C 84.7 113.28 86 114.58 86 116.182 L 86 116.182 C 86 117.784 84.7 119.084 83.098 119.084 L 69.902 119.084 C 68.3 119.084 67 117.784 67 116.182 L 67 116.182 C 67 114.58 68.3 113.28 69.902 113.28 Z" style="stroke:none;fill:#DFDFDF;stroke-miterlimit:10;"/><path d="M 51.402 113.28 L 59.098 113.28 C 60.7 113.28 62 114.58 62 116.182 L 62 116.182 C 62 117.784 60.7 119.084 59.098 119.084 L 51.402 119.084 C 49.8 119.084 48.5 117.784 48.5 116.182 L 48.5 116.182 C 48.5 114.58 49.8 113.28 51.402 113.28 Z" style="stroke:none;fill:#DFDFDF;stroke-miterlimit:10;"/><path d="M 98.692 73.238 L 134.394 73.238 C 136.384 73.238 138 74.854 138 76.844 L 138 81.534 C 138 83.524 136.384 85.14 134.394 85.14 L 98.692 85.14 C 96.702 85.14 95.087 83.524 95.087 81.534 L 95.087 76.844 C 95.087 74.854 96.702 73.238 98.692 73.238 Z" style="stroke:none;fill:#DFDFDF;stroke-miterlimit:10;"/><path d="M 145.439 73.238 L 168.061 73.238 C 169.683 73.238 171 74.555 171 76.177 L 171 82.202 C 171 83.823 169.683 85.14 168.061 85.14 L 145.439 85.14 C 143.817 85.14 142.5 83.823 142.5 82.202 L 142.5 76.177 C 142.5 74.555 143.817 73.238 145.439 73.238 Z" style="stroke:none;fill:#DFDFDF;stroke-miterlimit:10;"/><g filter="url(#tqvjw3vAwNBu92JHyO7vlcNrux6F3mQw)"><path d=" M 157.207 60.178 C 150.903 51.156 138.453 48.482 129.45 54.217 L 113.641 64.293 C 109.322 67.01 106.348 71.42 105.446 76.442 C 104.692 80.626 105.355 84.941 107.33 88.706 C 105.977 90.758 105.054 93.064 104.617 95.484 C 103.707 100.602 104.897 105.871 107.919 110.102 C 114.224 119.125 126.674 121.798 135.675 116.063 L 151.485 105.987 C 155.803 103.27 158.778 98.86 159.679 93.838 C 160.433 89.654 159.771 85.339 157.797 81.574 C 159.15 79.521 160.072 77.215 160.509 74.796 C 161.419 69.678 160.229 64.408 157.207 60.178" fill="rgb(223,223,223)"/><path d=" M 127.906 110.95 C 122.81 112.276 117.428 110.281 114.427 105.954 C 112.61 103.411 111.894 100.242 112.441 97.164 C 112.533 96.663 112.659 96.17 112.819 95.687 L 113.117 94.779 L 113.927 95.374 C 115.797 96.749 117.889 97.794 120.111 98.464 L 120.699 98.643 L 120.644 99.229 C 120.573 100.063 120.799 100.896 121.282 101.58 C 122.185 102.883 123.806 103.484 125.34 103.086 C 125.684 102.994 126.012 102.85 126.312 102.659 L 142.122 92.584 C 142.904 92.092 143.443 91.293 143.607 90.383 C 143.771 89.455 143.555 88.501 143.009 87.734 C 142.105 86.43 140.484 85.828 138.949 86.226 C 138.606 86.318 138.279 86.462 137.979 86.653 L 131.946 90.499 C 130.954 91.13 129.871 91.605 128.735 91.909 C 123.639 93.234 118.258 91.239 115.257 86.912 C 113.439 84.369 112.723 81.2 113.271 78.122 C 113.813 75.102 115.601 72.45 118.199 70.817 L 134.008 60.741 C 135 60.109 136.083 59.633 137.22 59.33 C 142.316 58.005 147.698 59.999 150.699 64.326 C 152.516 66.87 153.232 70.038 152.685 73.116 C 152.593 73.617 152.466 74.11 152.307 74.593 L 152.009 75.501 L 151.2 74.907 C 149.329 73.531 147.237 72.486 145.015 71.815 L 144.427 71.637 L 144.481 71.05 C 144.552 70.216 144.327 69.384 143.844 68.7 C 142.94 67.397 141.32 66.795 139.785 67.194 C 139.442 67.285 139.114 67.429 138.814 67.62 L 123.004 77.696 C 122.222 78.188 121.683 78.987 121.52 79.896 C 121.355 80.824 121.57 81.779 122.117 82.546 C 123.021 83.85 124.642 84.451 126.177 84.053 C 126.521 83.961 126.848 83.817 127.148 83.626 L 133.18 79.782 C 134.172 79.15 135.255 78.675 136.39 78.371 C 141.486 77.046 146.868 79.041 149.869 83.367 C 151.687 85.911 152.402 89.08 151.855 92.158 C 151.313 95.178 149.524 97.83 146.927 99.464 L 131.118 109.539 C 130.126 110.171 129.042 110.647 127.906 110.95" fill="rgb(255,255,255)"/></g><defs><filter id="tqvjw3vAwNBu92JHyO7vlcNrux6F3mQw" x="-200%" y="-200%" width="400%" height="400%" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB"><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" stdDeviation="2.146804531419514"/><feOffset xmlns="http://www.w3.org/2000/svg" dx="0" dy="0" result="pf_100_offsetBlur"/><feFlood xmlns="http://www.w3.org/2000/svg" flood-color="#000000" flood-opacity="0.65"/><feComposite xmlns="http://www.w3.org/2000/svg" in2="pf_100_offsetBlur" operator="in" result="pf_100_dropShadow"/><feBlend xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" in2="pf_100_dropShadow" mode="normal"/></filter></defs></svg>
\ No newline at end of file