em/mixtape
1
0
Fork 0
Code Issues Pull Requests Actions Activity

Search input reset

Browse Source
This commit is contained in:
Emil Miler 2024-02-09 09:42:05 +01:00
parent 4fe838eb2a
commit d5cc96a647
3 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
sass/style.scss
View File

@ -42,10 +42,7 @@ main.songs {
&.hidden { display: none } &.hidden { display: none }
&>* { &>* {
border: 0;
border-radius: .5em; border-radius: .5em;
padding: .75em 1em;
font-size: 1em;
box-shadow: rgba(15, 17, 21, 0.5) 0px 3px 6px 0px; box-shadow: rgba(15, 17, 21, 0.5) 0px 3px 6px 0px;
background-color: #3b4252; background-color: #3b4252;
color: inherit; color: inherit;
@ -56,8 +53,32 @@ main.songs {
} }
} }
input[type="text"] { form {
grid-column: 1 / 3; 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 { &>.button {
@ -65,6 +86,7 @@ main.songs {
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
padding: .75em 1em;
&.selected { &.selected {
color: #fff; color: #fff;

11
static/js/filter.js
View File

@ -1,6 +1,7 @@
const filters = document.querySelector(".filters"); const filters = document.querySelector(".filters");
const buttons = Array.from(filters.querySelectorAll(".button")); const buttons = Array.from(filters.querySelectorAll(".button"));
const search = document.querySelector("input[type='text']"); const search = document.querySelector("input[type='search']");
const form = document.querySelector("form");
const songList = document.querySelector(".song-list"); const songList = document.querySelector(".song-list");
let selectedCategory = null; let selectedCategory = null;
@ -29,7 +30,9 @@ function filterSongs() {
} }
// Event listeners // 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))); buttons.forEach(button => button.addEventListener("click", () => buttonToggle(button)));
// Normalize song titles // Normalize song titles

5
templates/index.html
View File

@ -12,7 +12,10 @@
{% block content %} {% block content %}
<main class="songs"> <main class="songs">
<section class="filters"> <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="classic">Classic</div>
<div class="button" data-category="mixtape">Mixtape</div> <div class="button" data-category="mixtape">Mixtape</div>
</section> </section>