78 lines
1.8 KiB
HTML
78 lines
1.8 KiB
HTML
<form class="search-input-form" on:submit="onSubmit(event)">
|
|
<div class="search-input-wrapper">
|
|
<input type="search"
|
|
class="search-input"
|
|
placeholder="Search"
|
|
aria-label="Search input"
|
|
required
|
|
bind:value="$queryInSearch">
|
|
</div>
|
|
<button type="submit" class="primary search-button" aria-label="Search" disabled={$searchLoading}>
|
|
<SvgIcon className="search-button-svg" href="#fa-search" />
|
|
</button>
|
|
</form>
|
|
{#if $searchLoading}
|
|
<div class="search-results-container">
|
|
<LoadingPage />
|
|
</div>
|
|
{:elseif $searchResults && $searchResultsForQuery === $queryInSearch}
|
|
<div class="search-results-container">
|
|
<SearchResults />
|
|
</div>
|
|
{/if}
|
|
<style>
|
|
.search-input-form {
|
|
display: grid;
|
|
grid-template-columns: 1fr min-content;
|
|
grid-gap: 10px;
|
|
}
|
|
.search-input-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.search-input {
|
|
padding: 10px 15px;
|
|
border-radius: 10px;
|
|
flex: 1;
|
|
}
|
|
:global(.search-button-svg) {
|
|
fill: var(--button-primary-text);
|
|
width: 18px;
|
|
height: 18px;
|
|
flex: 1;
|
|
}
|
|
.search-results-container {
|
|
position: relative;
|
|
margin-top: 20px;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.search-button {
|
|
min-width: 100px;
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
import { store } from '../../_store/store'
|
|
import LoadingPage from '../LoadingPage.html'
|
|
import { doSearch } from '../../_actions/search'
|
|
import SearchResults from './SearchResults.html'
|
|
import SvgIcon from '../SvgIcon.html'
|
|
|
|
export default {
|
|
store: () => store,
|
|
components: {
|
|
LoadingPage,
|
|
SearchResults,
|
|
SvgIcon
|
|
},
|
|
methods: {
|
|
async onSubmit (e) {
|
|
e.preventDefault()
|
|
doSearch()
|
|
}
|
|
}
|
|
}
|
|
</script>
|