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

New structure for filters

Browse Source
This commit is contained in:
Emil Miler 2024-02-07 11:09:04 +01:00
parent 93324cc0ed
commit 9da3c406dd
2 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
sass/style.scss
View File

@ -10,8 +10,8 @@ body {
} }
main.songs { main.songs {
display: grid; display: flex;
grid-template-columns: 1fr 3fr; flex-direction: column;
gap: 1em; gap: 1em;
max-width: 50em; max-width: 50em;
margin: 0 auto; margin: 0 auto;
@ -22,7 +22,23 @@ main.songs {
} }
.filters { .filters {
// ... // `display: grid` is set via JS to prevent displaying the inputs
// on browsers wih JavaScript disabled.
display: none;
grid-template-columns: 2fr 1fr 1fr;
gap: 1em;
margin: 1em 0;
&>* {
border: 1px solid #aaa;
border-radius: .5em;
padding: .5em 1em;
font-size: 1em;
}
&>.button {
text-align: center;
}
} }
.song-list { .song-list {

4
templates/index.html
View File

@ -12,7 +12,9 @@
{% block content %} {% block content %}
<main class="songs"> <main class="songs">
<section class="filters"> <section class="filters">
FILTERS <input type="text" placeholder="Hledat">
<div class="button">classic</div>
<div class="button">mixtape</div>
</section> </section>
<section class="song-list"> <section class="song-list">
{% for song in section.pages %} {% for song in section.pages %}