From e3f14c5bd8dcd24d25c4be41c4adcab010b0e217 Mon Sep 17 00:00:00 2001
From: cssbubble <cssbubble@gmail.com>
Date: Tue, 31 May 2022 15:17:16 +0100
Subject: [PATCH] advance search

---
 src/AdvancedSearch.svelte   | 131 +++++++++++++++++-------------------
 src/App.svelte              |   7 +-
 src/TopicMasonryGrid.svelte |   6 +-
 templates/index.html        |   2 +-
 4 files changed, 68 insertions(+), 78 deletions(-)

diff --git a/src/AdvancedSearch.svelte b/src/AdvancedSearch.svelte
index b03ffab..9eb861d 100644
--- a/src/AdvancedSearch.svelte
+++ b/src/AdvancedSearch.svelte
@@ -2,7 +2,7 @@
 	import { createEventDispatcher } from 'svelte';
   const dispatch = createEventDispatcher();
 
-  export let showSearch = false;
+  export let showSearch = null;
   let query = '';
   let result_items = [];
   let result_topics = [];
@@ -24,74 +24,65 @@
         });
 </script>
 
-<div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-
-  {#if showSearch}
-  <div class="fixed inset-0 bg-lightSecondary bg-opacity-75 transition-opacity"></div>
-  {/if}
-  
-
-  {#if showSearch}
-  <div class="fixed z-10 inset-0 overflow-y-auto" on:click="{e => dispatch('closed',{}) }">
-    <div class="flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0">
-
-      <div class="w-md transform overflow-hidden rounded-xl bg-lightBg dark:bg-darkBg text-lightPrimary dark:darkPrimary shadow-2xl ring-1 ring-black ring-opacity-5 transition-all" on:click|stopPropagation>
-        <div class="relative">
-          <!-- Heroicon name: solid/search -->
-          <svg class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
-          </svg>
-          <input bind:value={query} type="text" class="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-800 placeholder-gray-400 focus:ring-0 sm:text-sm" placeholder="Search..." role="combobox" aria-expanded="false" aria-controls="options" autofocus>
-        </div>
-  
-        {#if !query }
-        <!-- Default state, show/hide based on command palette state -->
-        <div class="border-t border-gray-100 py-14 px-6 text-center text-sm sm:px-14">
-          <!-- Heroicon name: outline/globe -->
-          <svg class="mx-auto h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg>
-          <p class="mt-4 font-semibold text-gray-900">Search for items, topics and creators</p>
-          <p class="mt-2 text-gray-500">Quickly look for resources by running a global search.</p>
-        </div>
-        
-        {:else if result_items.length + result_topics.length > 0}
-  
-        <!-- Results, show/hide based on command palette state -->
-        <ul class="max-h-96 scroll-pt-11 scroll-pb-2 space-y-2 overflow-y-auto pb-2" id="options" role="listbox">
-          <li>
-            <h2 class="bg-gray-100 py-2.5 px-4 text-xs font-semibold text-gray-900">Items</h2>
-            <ul class="mt-2 text-sm text-gray-800">
-              {#each result_items as item}
-              <li><a href="#/item/{item.rowid}" on:click={resetQuery} class="block cursor-default select-none px-4 py-2 hover:bg-indigo-600 hover:text-white cursor-pointer" role="option" tabindex="-1">{item.name}</a></li>
-              {/each}
-            </ul>
-          </li>
-          <li>
-            <h2 class="bg-gray-100 py-2.5 px-4 text-xs font-semibold text-gray-900">Topics</h2>
-            <ul class="mt-2 text-sm text-gray-800">
-                {#each result_topics as topic}
-                <li><a href="#/topic/{topic.name}" on:click={resetQuery} class="block cursor-default select-none px-4 py-2 hover:bg-indigo-600 hover:text-white cursor-pointer" role="option" tabindex="-1">{topic.display_name}</a></li>
-                {/each}
-            </ul>
-          </li>
-        </ul>
-
-        {:else}
-  
-        <!-- Empty state, show/hide based on command palette state -->
-        <div class="border-t border-gray-100 py-14 px-6 text-center text-sm sm:px-14">
-          <!-- Heroicon name: outline/emoji-sad -->
-          <svg class="mx-auto h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg>
-          <p class="mt-4 font-semibold text-gray-900">No results found</p>
-          <p class="mt-2 text-gray-500">We couldn’t find anything with that term. Please try again.</p>
-        </div>
-
-        {/if}
-      </div>
+<sl-dialog no-header open={showSearch} style="--header-spacing: 0px; --body-spacing: 0px; --footer-spacing: 0px" on:sl-hide="{e => dispatch('closed',{})}">
+  <div class="transform overflow-hidden rounded-xl bg-lightBg dark:bg-darkBg text-lightPrimary dark:darkPrimary shadow-2xl ring-1 ring-black ring-opacity-5 transition-all w-full">
+    <div class="relative">
+      <!-- Heroicon name: solid/search -->
+      <svg class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+      </svg>
+      <input bind:value={query} type="text" class="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-800 placeholder-gray-400 focus:ring-0 sm:text-sm" placeholder="Search..." role="combobox" aria-expanded="false" aria-controls="options" >
     </div>
+
+    {#if !query }
+    <!-- Default state, show/hide based on command palette state -->
+    <div class="border-t border-gray-100 py-14 px-6 text-center text-sm sm:px-14">
+      <!-- Heroicon name: outline/globe -->
+      <svg class="mx-auto h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+      <p class="mt-4 font-semibold text-gray-900">Search for items, topics and creators</p>
+      <p class="mt-2 text-gray-500">Quickly look for resources by running a global search.</p>
+    </div>
+    
+    {:else if result_items.length + result_topics.length > 0}
+
+    <!-- Results, show/hide based on command palette state -->
+    <ul class="scroll-pt-11 scroll-pb-2 space-y-2 overflow-y-auto pb-2" id="options" role="listbox">
+      {#if result_items.length > 0}
+      <li>
+        <h2 class="bg-gray-100 py-2.5 px-4 text-xs font-semibold text-gray-900 text-center">Items</h2>
+        <ul class="mt-2 text-sm text-gray-800">
+          {#each result_items as item}
+          <li><a href="#/item/{item.rowid}" on:click={resetQuery} class="block cursor-default select-none px-4 py-2 hover:bg-indigo-600 hover:text-white cursor-pointer" role="option" tabindex="-1">{item.name}</a></li>
+          {/each}
+        </ul>
+      </li>
+      {/if}
+      {#if result_topics.length > 0}
+      <li>
+        <h2 class="bg-gray-100 py-2.5 px-4 text-xs font-semibold text-gray-900 text-center">Topics</h2>
+        <ul class="mt-2 text-sm text-gray-800">
+            {#each result_topics as topic}
+            <li><a href="#/topic/{topic.name}" on:click={resetQuery} class="block cursor-default select-none px-4 py-2 hover:bg-indigo-600 hover:text-white cursor-pointer" role="option" tabindex="-1">{topic.display_name}</a></li>
+            {/each}
+        </ul>
+      </li>
+      {/if}
+    </ul>
+
+    {:else}
+
+    <!-- Empty state, show/hide based on command palette state -->
+    <div class="border-t border-gray-100 py-14 px-6 text-center text-sm sm:px-14">
+      <!-- Heroicon name: outline/emoji-sad -->
+      <svg class="mx-auto h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+      <p class="mt-4 font-semibold text-gray-900">No results found</p>
+      <p class="mt-2 text-gray-500">We couldn’t find anything with that term. Please try again.</p>
+    </div>
+
+    {/if}
   </div>
-  {/if}
-</div>
\ No newline at end of file
+</sl-dialog>
\ No newline at end of file
diff --git a/src/App.svelte b/src/App.svelte
index aa1ca4c..ed021dc 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -18,7 +18,7 @@
     let currentView = "/topics";
     let randomItemId;
     let alltopics = [];
-    let showSearch = false;
+    let showSearch = null;
 
     function getRandomItemId(){
         fetch('/learn.json?_shape=array&sql=select+rowid+from+items+order+by+random()+limit+1').then(r => r.json())
@@ -43,7 +43,6 @@
 			window.location.hash = '/home';
             currentView = '/home'
 		}
-        showSearch = false;
 	}
 
     onMount(getRandomItemId);
@@ -79,7 +78,7 @@
             <Bookmarks kind={1}/>
         {/if}
 
-        <AdvancedSearch {showSearch} on:closed="{e => showSearch = false}"/>
+        <AdvancedSearch {showSearch} on:closed="{e => showSearch = null}"/>
     </svelte:fragment>
 
     <svelte:fragment slot="nav">
@@ -96,7 +95,7 @@
             <h3 class="text-center"> Random Item</h3>
         </a>
 
-        <button on:click="{e => showSearch = true}" class="text-lightSecondary1 hover:bg-lightSecondary1 hover:text-lightSecondary2 hover:dark:text-darkSecondary2 hover:dark:bg-darkPrimaryBg w-full group flex justify-start gap-3 items-center py-5 text-sm font-medium pl-4">
+        <button on:click="{e => showSearch = true}" class={(currentView === "/search" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + "text-lightSecondary1 hover:bg-lightSecondary1 hover:text-lightSecondary2 hover:dark:text-darkSecondary2 hover:dark:bg-darkPrimaryBg w-full group flex justify-start gap-3 items-center py-5 text-sm font-medium pl-4"}>
             <SearchIcon class=" flex-shrink-0 h-6 w-6"/>
             <h3 class="text-center"> Search</h3>
         </button>
diff --git a/src/TopicMasonryGrid.svelte b/src/TopicMasonryGrid.svelte
index 52814e0..00ad3b5 100644
--- a/src/TopicMasonryGrid.svelte
+++ b/src/TopicMasonryGrid.svelte
@@ -87,16 +87,16 @@
 <div class="gap-8 columns-1 sm:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5 mb-8">
   {#each [...map.entries()] as parent}
     <a href={"#/topic/" + parent[0].name}>
-        <div class="rounded-lg shadow-md p-4 break-inside-avoid mb-4 bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary">
+        <div class="rounded-lg shadow-md p-4 break-inside-avoid mb-4 border-8 border-lightPrimCont dark:border-darkPrimCont hover:bg-lightPrimCont dark:bg-darkPrimCont ">
             {#if typeof(parent[0]) == "string"}
             <span class="mt-1 p-1  font-semibold text-lg">{ parent[0] }</span>
             {:else}
-            <a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-lightButton2 dark:text-darkButton2 hover:font-extrabold text-lg ">{ format_topic_name(parent[0]) }</span></a>
+            <a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-lightPrimary dark:text-darkPrimary hover:text-lightSecondary dark:hover:text-darkSecondary text-lg ">{ format_topic_name(parent[0]) }</span></a>
             {/if}
         
             <div class="mt-2 flex flex-wrap text-sm text-gray-900">
             {#each parent[1] as child}
-                <a href={"#/topic/" + child.name} class="text-lightSecondary2 dark:text-darkSecondary2 no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
+                <a href={"#/topic/" + child.name} class="text-lightTertiary dark:text-darkTertiary hover:text-lightPrimary dark:hover:darkPrimary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
             {/each}
             </div>    
         </div>
diff --git a/templates/index.html b/templates/index.html
index a8215ca..86a70b9 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -28,7 +28,7 @@
 							lightSecondary: 'rgb(75 85 99)', //gray-600
 							lightTertiary: 'rgb(168 85 247)', //purple-500
 							lightBg: 'rgb(239 246 255)', //blue-50
-							lightPrimCont: 'rgb(191 219 254)', // blue-200
+							lightPrimCont: '#dbeafe', // blue-200
 							lightButtonBg: 'rgb(20 83 45)', //green-900
 
 							darkPrimary: 'rgb(147 197 253)',  //blue-300