Search input reset
This commit is contained in:
parent
4fe838eb2a
commit
d5cc96a647
@ -42,10 +42,7 @@ main.songs {
|
||||
&.hidden { display: none }
|
||||
|
||||
&>* {
|
||||
border: 0;
|
||||
border-radius: .5em;
|
||||
padding: .75em 1em;
|
||||
font-size: 1em;
|
||||
box-shadow: rgba(15, 17, 21, 0.5) 0px 3px 6px 0px;
|
||||
background-color: #3b4252;
|
||||
color: inherit;
|
||||
@ -56,8 +53,32 @@ main.songs {
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
form {
|
||||
grid-column: 1 / 3;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
input {
|
||||
font-size: inherit;
|
||||
border: 0;
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
flex-grow: 1;
|
||||
padding: .75em 1em;
|
||||
}
|
||||
|
||||
input[type="reset"] {
|
||||
cursor: pointer;
|
||||
width: 3em;
|
||||
padding: 0;
|
||||
background-size: auto 1.5em;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(160,163,170,1)'%3E%3Cpath d='M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 10.5858L14.8284 7.75736L16.2426 9.17157L13.4142 12L16.2426 14.8284L14.8284 16.2426L12 13.4142L9.17157 16.2426L7.75736 14.8284L10.5858 12L7.75736 9.17157L9.17157 7.75736L12 10.5858Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
&>.button {
|
||||
@ -65,6 +86,7 @@ main.songs {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: .75em 1em;
|
||||
|
||||
&.selected {
|
||||
color: #fff;
|
||||
|
@ -1,6 +1,7 @@
|
||||
const filters = document.querySelector(".filters");
|
||||
const buttons = Array.from(filters.querySelectorAll(".button"));
|
||||
const search = document.querySelector("input[type='text']");
|
||||
const filters = document.querySelector(".filters");
|
||||
const buttons = Array.from(filters.querySelectorAll(".button"));
|
||||
const search = document.querySelector("input[type='search']");
|
||||
const form = document.querySelector("form");
|
||||
const songList = document.querySelector(".song-list");
|
||||
|
||||
let selectedCategory = null;
|
||||
@ -29,7 +30,9 @@ function filterSongs() {
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
search.addEventListener("keyup", filterSongs);
|
||||
search.addEventListener("input", filterSongs);
|
||||
// Filtering happens before the reset itself without this timeout
|
||||
form.addEventListener("reset", () => setTimeout(filterSongs, 0));
|
||||
buttons.forEach(button => button.addEventListener("click", () => buttonToggle(button)));
|
||||
|
||||
// Normalize song titles
|
||||
|
@ -12,7 +12,10 @@
|
||||
{% block content %}
|
||||
<main class="songs">
|
||||
<section class="filters">
|
||||
<input type="text" placeholder="Hledat">
|
||||
<form>
|
||||
<input type="search" placeholder="Hledat">
|
||||
<input type="reset" value="">
|
||||
</form>
|
||||
<div class="button" data-category="classic">Classic</div>
|
||||
<div class="button" data-category="mixtape">Mixtape</div>
|
||||
</section>
|
||||
|
Loading…
Reference in New Issue
Block a user