sass/style.scss

@@ -10,8 +10,8 @@ body {
 }
 
 main.songs {
-	display: flex;
+	display: grid;
-	flex-direction: column;
+	grid-template-columns: 1fr 3fr;
 	gap: 1em;
 	max-width: 50em;
 	margin: 0 auto;
@@ -22,31 +22,7 @@ main.songs {
 	}
 
 	.filters {
-		display: grid;
+		// ...
-		grid-template-columns: 2fr 1fr 1fr;
-		gap: 1em;
-		margin: 1em 0;
-
-		// This is removed via JS to prevent displaying the inputs
-		// on browsers wih JavaScript disabled.
-		&.hidden { display: none }
-
-		&>* {
-			border: 1px solid #aaa;
-			border-radius: .5em;
-			padding: .5em 1em;
-			font-size: 1em;
-		}
-
-		&>.button {
-			text-align: center;
-			cursor: pointer;
-
-			&.selected {
-				border-color: #333;
-				box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;
-			}
-		}
 	}
 
 	.song-list {
@@ -63,8 +39,6 @@ main.songs {
 			box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;
 			border-left: .7em solid #000;
 
-			&.hidden { display: none }
-
 			&.mixtape { border-color: #654575 }
 			&.classic { border-color: #a55d05 }
 

static/js/filter.js

@@ -1,41 +0,0 @@
-const filters = document.querySelector(".filters");
-const buttons = Array.from(filters.querySelectorAll(".button"));
-const search = document.querySelector("input[type='text']");
-const songList = document.querySelector(".song-list");
-
-let selectedCategory = null;
-
-function buttonToggle(clickedButton) {
-	buttons.forEach(button => {
-		if (button === clickedButton && !button.classList.contains("selected")) {
-			button.classList.add("selected");
-			selectedCategory = button.dataset.category;
-		} else {
-			button.classList.remove("selected");
-			if (button.dataset.category == selectedCategory) selectedCategory = null;
-		}
-	});
-	filterSongs();
-}
-
-function filterSongs() {
-	const searchTerm = search.value.trim().toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");
-	const songs = Array.from(songList.children);
-	songs.forEach(song => {
-		const title = song.dataset.title.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");
-		const matching = title.includes(searchTerm) && (!selectedCategory || song.dataset.category === selectedCategory);
-		song.classList.toggle("hidden", !matching);
-	});
-}
-
-// Event listeners
-search.addEventListener("keyup", filterSongs);
-buttons.forEach(button => button.addEventListener("click", () => buttonToggle(button)));
-
-// Normalize song titles
-Array.from(songList.children).forEach(song => {
-	song.dataset.title = song.dataset.title.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");
-});
-
-// Display the filter section on JS-enabled browsers
-window.addEventListener("load", () => filters.classList.remove = "hidden");

templates/index.html

@@ -12,13 +12,11 @@
 {% block content %}
 	<main class="songs">
 		<section class="filters">
-			<input type="text" placeholder="Hledat">
+			FILTERS
-			<div class="button" data-category="classic">classic</div>
-			<div class="button" data-category="mixtape">mixtape</div>
 		</section>
 		<section class="song-list">
 			{% for song in section.pages %}
-				<div class="{{ macros::primary_category(song=song) }}" data-title="{{ song.title }}" data-category="{{ macros::primary_category(song=song) }}">
+				<div class="{{ macros::primary_category(song=song) }}">
 					<div class="meta">
 						<div class="title">{{ song.title }}</div>
 						{% if song.taxonomies["artist"] %}
@@ -38,8 +36,6 @@
 		</section>
 	</main>
 {% endblock %}
-{% block script %}
+{% block script %}{% endblock %}
-	<script src="{{ get_url(path="/js/filter.js") }}"></script>
-{% endblock %}
 </body>
 </html>