visual improvements

drips-network · Jan 10, 2025 · dbed3f1 · dbed3f1
1 parent 8f536fb
commit dbed3f1
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 20 deletions.
diff --git a/src/lib/components/search-bar/components/results.svelte b/src/lib/components/search-bar/components/results.svelte
@@ -5,34 +5,36 @@
   import type { Result } from '../types';
   import { fade } from 'svelte/transition';
   import Cross from '$lib/components/icons/Cross.svelte';
+  import TransitionedHeight from '$lib/components/transitioned-height/transitioned-height.svelte';
 
   export let results: Result[];
   export let loading: boolean;
   export let error: boolean;
   export let resultElems: HTMLDivElement[] = [];
 </script>
 
-<div class="results">
-  {#if loading}
-    <div class="loading-state" transition:fade={{ duration: 100 }}><Spinner /></div>
-  {:else if error}
-    <div class="empty-state">
-      <Cross />
-      <p class="typo-text">Sorry, something went wrong while searching.</p>
-    </div>
-  {:else if results.length === 0}
-    <div class="empty-state">
-      <EyeClosed />
-      <p class="typo-text">No results</p>
-    </div>
-  {:else}
+<TransitionedHeight transitionHeightChanges={true}>
+  <div class="results">
+    {#if loading}
+      <div class="loading-state" transition:fade={{ duration: 100 }}><Spinner /></div>
+    {:else if error}
+      <div class="empty-state">
+        <Cross />
+        <p class="typo-text">Sorry, something went wrong while searching.</p>
+      </div>
+    {:else if results.length === 0}
+      <div class="empty-state">
+        <EyeClosed />
+        <p class="typo-text">No results</p>
+      </div>
+    {/if}
     {#each results as result, index}
       <div class="result" bind:this={resultElems[index]}>
         <ResultComponent on:click item={result} />
       </div>
     {/each}
-  {/if}
-</div>
+  </div>
+</TransitionedHeight>
 
 <style>
   .results {
@@ -41,7 +43,9 @@
     flex-direction: column;
     align-items: center;
     gap: 0.25rem;
-    height: 24rem;
+    max-height: 25.5rem;
+    min-height: 3.5rem;
+    padding: 0.5rem;
   }
 
   .result {
@@ -53,12 +57,13 @@
     position: absolute;
     background: var(--color-background);
     width: 100%;
-    height: 100%;
+    height: calc(100% - 1rem);
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
     color: var(--color-foreground);
     flex-direction: column;
+    z-index: 10;
   }
 </style>
diff --git a/src/lib/components/search-bar/search-bar.svelte b/src/lib/components/search-bar/search-bar.svelte
@@ -9,6 +9,7 @@
   import Results from './components/results.svelte';
   import { search } from './search';
   import type { Result } from './types';
+  import InfoCircle from '../icons/InfoCircle.svelte';
 
   const dispatch = createEventDispatcher<{ dismiss: void }>();
 
@@ -141,7 +142,7 @@
       in:fly|global={{ duration: 200, y: 8, easing: sineOut }}
       out:fly|global={{ duration: 200, y: 8, easing: sineIn }}
     >
-      💡 Paste a GitHub URL to jump to that project
+      <InfoCircle /> Paste a GitHub URL to jump to that project
     </div>
   {/if}
   {#if focus && searchTerm}
@@ -233,6 +234,8 @@
     left: 0;
     display: flex;
     justify-content: center;
+    align-items: center;
+    gap: 0.25rem;
     color: var(--color-foreground-level-5);
   }
 
@@ -249,7 +252,6 @@
     background-color: var(--color-background);
     border: 1px solid var(--color-foreground);
     border-radius: 1.5rem 0 1.5rem 1.5rem;
-    padding: 0.5rem;
     box-shadow: var(--elevation-medium);
   }