better searchbar
This commit is contained in:
parent
b8680d13f4
commit
698c4baf3a
|
@ -17,8 +17,8 @@
|
||||||
let next;
|
let next;
|
||||||
let query;
|
let query;
|
||||||
|
|
||||||
async function search(event) {
|
async function search(q) {
|
||||||
query = event.target.value;
|
query = q;
|
||||||
|
|
||||||
searchAlbums = [];
|
searchAlbums = [];
|
||||||
loading = true;
|
loading = true;
|
||||||
|
|
|
@ -42,21 +42,51 @@
|
||||||
'leroy - dariacore',
|
'leroy - dariacore',
|
||||||
'voljum - dayscapes'
|
'voljum - dayscapes'
|
||||||
];
|
];
|
||||||
|
|
||||||
|
import { Icon } from 'svelte-fontawesome';
|
||||||
|
import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
|
||||||
|
|
||||||
|
let query = '';
|
||||||
|
|
||||||
|
function onSubmit(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
onChange(query);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<input type="search" class="album-search" name="q" on:change={onChange} placeholder={placeholders[Math.floor(Math.random() * placeholders.length)]}>
|
<form on:submit={onSubmit}>
|
||||||
|
<input type="search" class="album-search" name="q" placeholder={placeholders[Math.floor(Math.random() * placeholders.length)]} bind:value={query}>
|
||||||
|
<button type="submit">
|
||||||
|
<Icon icon={faSearch}/>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
input {
|
input {
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
width: 550px;
|
|
||||||
max-width: 94%;
|
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
font-size: x-large;
|
font-size: x-large;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 7px;
|
border-radius: 7px;
|
||||||
margin-bottom: 0.2rem;
|
margin-bottom: 0.2rem;
|
||||||
transition: 0.1s border-bottom ease-out, 0.1s background-color ease-in-out;
|
transition: 0.1s border-bottom-width ease-in-out, 0.1s margin-bottom ease-in-out, 0.1s background-color ease-in-out;
|
||||||
|
flex: 1 1 0px;
|
||||||
|
width: unset;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-size: x-large;
|
||||||
|
margin: 5px;
|
||||||
|
width: 2.38em;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: stretch;
|
||||||
|
max-width: 94%;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:focus, input:hover {
|
input:focus, input:hover {
|
||||||
|
@ -74,6 +104,9 @@
|
||||||
input:focus, input:hover {
|
input:focus, input:hover {
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
}
|
}
|
||||||
|
button {
|
||||||
|
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
input {
|
input {
|
||||||
|
@ -85,5 +118,14 @@
|
||||||
input:focus, input:hover {
|
input:focus, input:hover {
|
||||||
background-color: #161626;
|
background-color: #161626;
|
||||||
}
|
}
|
||||||
|
button {
|
||||||
|
box-shadow: 0px 0px 15px #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 520px) {
|
||||||
|
button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
Loading…
Reference in New Issue