Add a loading spinner
This commit is contained in:
parent
5b4ff2b4e9
commit
7647ace4a0
3 changed files with 42 additions and 11 deletions
18
static/src/scss/_search.scss
Normal file
18
static/src/scss/_search.scss
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
@keyframes search-loading {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
body.page-searchpage {
|
||||||
|
.search-controls {
|
||||||
|
margin: 2rem auto;
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search-indicator {
|
||||||
|
animation: search-loading 1.5s linear infinite;
|
||||||
|
}
|
||||||
|
}
|
|
@ -13,6 +13,7 @@
|
||||||
@import "listing";
|
@import "listing";
|
||||||
@import "blocks";
|
@import "blocks";
|
||||||
@import "shareon";
|
@import "shareon";
|
||||||
|
@import "search";
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
|
|
|
@ -10,17 +10,29 @@
|
||||||
</section>
|
</section>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<section class="container">
|
<section class="container search-controls">
|
||||||
<input
|
<div class="field">
|
||||||
type="search"
|
<p class="control has-icons-left has-icons-right">
|
||||||
name="q"
|
<input
|
||||||
placeholder="Search"
|
type="search"
|
||||||
hx-get="{{ search_url }}"
|
class="input"
|
||||||
hx-trigger="keyup changed delay:300ms, search, revealed"
|
name="q"
|
||||||
hx-target="#search-results"
|
placeholder="Search"
|
||||||
autocomplete="off"
|
hx-get="{{ search_url }}"
|
||||||
value="{{ search_query }}"
|
hx-trigger="keyup changed delay:300ms, search{% if search_query %}, revealed{% endif %}"
|
||||||
>
|
hx-target="#search-results"
|
||||||
|
autocomplete="off"
|
||||||
|
value="{{ search_query }}"
|
||||||
|
hx-indicator="#search-indicator"
|
||||||
|
>
|
||||||
|
<span class="icon is-small is-left">
|
||||||
|
<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>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="container" id="search-results"></section>
|
<section class="container" id="search-results"></section>
|
||||||
|
|
Loading…
Reference in a new issue