repos/website
1
Fork 0
Code Issues 1 Pull requests 23 Activity

Move search icon to left

Browse source
This commit is contained in:
Jake Howard 2024-01-05 16:49:21 +00:00
parent c36f24b212
commit 8e0f948f66
Signed by: jake
GPG key ID: 57AFB45680EDD477
3 changed files with 16 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
static/src/scss/_search.scss
View file

@ -14,10 +14,6 @@ body.page-searchpage {
max-width: 80%; max-width: 80%;
} }
.htmx-request i {
animation: search-loading 1.5s linear infinite;
}
#search-results > p { #search-results > p {
font-size: 1.5rem; font-size: 1.5rem;
text-align: center; text-align: center;
@ -47,9 +43,19 @@ body.page-searchpage {
#search-page-indicator { #search-page-indicator {
text-align: center; text-align: center;
margin-top: 1.5rem; margin-top: 1.5rem;
font-size: $size-3;
&:not(.htmx-request) { &:not(.htmx-request) {
display: none; display: none;
} }
} }
// The search icon is hidden during requests
#search-icon {
opacity: 1 !important;
&.htmx-request {
opacity: 0 !important;
}
}
} }

10
website/search/templates/search/search_page.html
View file

@ -6,12 +6,12 @@
<section class="container search-controls"> <section class="container search-controls">
<div class="field"> <div class="field">
<p class="control has-icons-left has-icons-right"> <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" /> <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"> <span class="icon is-small is-left htmx-indicator search-indicator" id="search-icon">
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
</span> </span>
<span class="icon is-small is-right htmx-indicator" id="search-indicator"> <span class="icon is-small is-left htmx-indicator search-indicator">
<i class="fas fa-circle-notch"></i> <i class="fas fa-spinner fa-pulse"></i>
</span> </span>
</p> </p>
</div> </div>
@ -27,7 +27,7 @@
</div> </div>
<div class="htmx-indicator" id="search-page-indicator"> <div class="htmx-indicator" id="search-page-indicator">
<i class="fas fa-circle-notch"></i> <i class="fas fa-spinner fa-pulse"></i>
</div> </div>
</section> </section>
{% endblock %} {% endblock %}

2
website/search/tests.py
View file

@ -41,7 +41,7 @@ class SearchPageTestCase(TestCase):
self.assertEqual(search_input.attrs["value"], "") 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-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): class SearchPageResultsTestCase(TestCase):