better searchbar
This commit is contained in:
parent
b8680d13f4
commit
698c4baf3a
|
@ -17,8 +17,8 @@
|
|||
let next;
|
||||
let query;
|
||||
|
||||
async function search(event) {
|
||||
query = event.target.value;
|
||||
async function search(q) {
|
||||
query = q;
|
||||
|
||||
searchAlbums = [];
|
||||
loading = true;
|
||||
|
|
|
@ -42,21 +42,51 @@
|
|||
'leroy - dariacore',
|
||||
'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>
|
||||
|
||||
<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>
|
||||
input {
|
||||
margin: 5px;
|
||||
width: 550px;
|
||||
max-width: 94%;
|
||||
padding: 15px;
|
||||
font-size: x-large;
|
||||
border: none;
|
||||
border-radius: 7px;
|
||||
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 {
|
||||
|
@ -74,6 +104,9 @@
|
|||
input:focus, input:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
button {
|
||||
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
input {
|
||||
|
@ -85,5 +118,14 @@
|
|||
input:focus, input:hover {
|
||||
background-color: #161626;
|
||||
}
|
||||
button {
|
||||
box-shadow: 0px 0px 15px #000;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue