From 8e0f948f66b33c045c4a2751f344166eb689e5b2 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Fri, 5 Jan 2024 16:49:21 +0000
Subject: [PATCH] Move search icon to left

---
 static/src/scss/_search.scss                     | 14 ++++++++++----
 website/search/templates/search/search_page.html | 10 +++++-----
 website/search/tests.py                          |  2 +-
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/static/src/scss/_search.scss b/static/src/scss/_search.scss
index 851116e..7b143dd 100644
--- a/static/src/scss/_search.scss
+++ b/static/src/scss/_search.scss
@@ -14,10 +14,6 @@ body.page-searchpage {
     max-width: 80%;
   }
 
-  .htmx-request i {
-    animation: search-loading 1.5s linear infinite;
-  }
-
   #search-results > p {
     font-size: 1.5rem;
     text-align: center;
@@ -47,9 +43,19 @@ body.page-searchpage {
   #search-page-indicator {
     text-align: center;
     margin-top: 1.5rem;
+    font-size: $size-3;
 
     &:not(.htmx-request) {
       display: none;
     }
   }
+
+  // The search icon is hidden during requests
+  #search-icon {
+    opacity: 1 !important;
+
+    &.htmx-request {
+      opacity: 0 !important;
+    }
+  }
 }
diff --git a/website/search/templates/search/search_page.html b/website/search/templates/search/search_page.html
index 5dd44b6..0b354dc 100644
--- a/website/search/templates/search/search_page.html
+++ b/website/search/templates/search/search_page.html
@@ -6,12 +6,12 @@
   <section class="container search-controls">
     <div class="field">
       <p class="control has-icons-left has-icons-right">
-        <input type="search" class="input" name="q" placeholder="Search" hx-get="{{ search_url }}" hx-trigger="keyup changed delay:200ms, search{% if search_query %}, load{% endif %}" hx-target="#search-results" autocomplete="off" value="{{ search_query }}" hx-indicator="#search-indicator" />
-        <span class="icon is-small is-left">
+        <input type="search" class="input" name="q" placeholder="Search" hx-get="{{ search_url }}" hx-trigger="keyup changed delay:200ms, search{% if search_query %}, load{% endif %}" hx-target="#search-results" autocomplete="off" value="{{ search_query }}" hx-indicator=".search-indicator" />
+        <span class="icon is-small is-left htmx-indicator search-indicator" id="search-icon">
           <i class="fas fa-search"></i>
         </span>
-        <span class="icon is-small is-right htmx-indicator" id="search-indicator">
-          <i class="fas fa-circle-notch"></i>
+        <span class="icon is-small is-left htmx-indicator search-indicator">
+          <i class="fas fa-spinner fa-pulse"></i>
         </span>
       </p>
     </div>
@@ -27,7 +27,7 @@
     </div>
 
     <div class="htmx-indicator" id="search-page-indicator">
-      <i class="fas fa-circle-notch"></i>
+      <i class="fas fa-spinner fa-pulse"></i>
     </div>
   </section>
 {% endblock %}
diff --git a/website/search/tests.py b/website/search/tests.py
index c3f53bf..c90d00c 100644
--- a/website/search/tests.py
+++ b/website/search/tests.py
@@ -41,7 +41,7 @@ class SearchPageTestCase(TestCase):
         self.assertEqual(search_input.attrs["value"], "")
 
         self.assertEqual(len(soup.select(search_input.attrs["hx-target"])), 1)
-        self.assertEqual(len(soup.select(search_input.attrs["hx-indicator"])), 1)
+        self.assertEqual(len(soup.select(search_input.attrs["hx-indicator"])), 2)
 
 
 class SearchPageResultsTestCase(TestCase):