search.html: make outline blue, make everyone the default

spotlightpa · Oct 5, 2023 · d23af6d · d23af6d
1 parent 6c3d052
commit d23af6d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/assets/js/utils/search-people.js b/assets/js/utils/search-people.js
@@ -28,7 +28,7 @@ async function debouncedSearch(
 
 export default function searchPeople() {
   return {
-    filterType: "expert",
+    filterType: "",
     filterExpertise: [],
     filterLocation: [],
     filterArea: [],

diff --git a/layouts/partials/search.html b/layouts/partials/search.html
@@ -12,7 +12,7 @@ <h2 class="text-g-9">
     <input
       id="search"
       type="search"
-      class="block w-full appearance-none rounded-full border-2 border-g-5 bg-white px-10 py-2 tracking-wider text-g-8 placeholder-g-5 placeholder-opacity-100"
+      class="block w-full appearance-none rounded-full border-2 border-g-5 bg-white px-10 py-2 tracking-wider text-g-8 placeholder-g-5 placeholder-opacity-100 outline-none ring-blue focus:ring-2"
       x-model="query"
       @keydown.escape="clear()"
       placeholder="Ex. “Jane Smith” “History” “Boulder”"
@@ -54,6 +54,7 @@ <h2 class="text-g-9">
     <div
       class="grid items-end gap-4 md:grid-cols-2"
       x-show="filterType === 'expert'"
+      x-cloak
     >
       {{ partial "combobox.html" (dict
         "options" (.GetPage "expertise").Pages
@@ -90,21 +91,34 @@ <h2 class="text-g-9">
   <div class="mt-2 flex flex-wrap gap-4">
     <label>
       <input
+        class="accent-blue"
         x-model="filterType"
         type="radio"
         name="type"
-        value="expert"
+        value=""
         checked
       />
-      <span class="ml-1">Community Members</span>
+      <span class="ml-1">Everyone</span>
     </label>
     <label>
-      <input x-model="filterType" type="radio" name="type" value="journalist" />
-      <span class="ml-1">Journalists</span>
+      <input
+        class="accent-blue"
+        x-model="filterType"
+        type="radio"
+        name="type"
+        value="expert"
+      />
+      <span class="ml-1">Community Members</span>
     </label>
     <label>
-      <input x-model="filterType" type="radio" name="type" value="" />
-      <span class="ml-1">Everyone</span>
+      <input
+        class="accent-blue"
+        x-model="filterType"
+        type="radio"
+        name="type"
+        value="journalist"
+      />
+      <span class="ml-1">Journalists</span>
     </label>
   </div>
   <p class="mt-1 text-g-7" x-text="resultsText"></p>