pinafore/routes/_components/search/Search.html
2018-12-08 12:46:16 -08:00

78 lines
1.7 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}>
<svg class="search-button-svg">
<use xlink:href="icons.svg#fa-search" />
</svg>
</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;
}
.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'
export default {
store: () => store,
components: {
LoadingPage,
SearchResults
},
methods: {
async onSubmit (e) {
e.preventDefault()
doSearch()
}
}
}
</script>