studio-variable/hic-et-nunc
5
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

Fix Filter-menu
All checks were successful
Deploy / Deploy to Production (push) Successful in 3s
Details

Browse source
This commit is contained in:
Camilledenoray 2026-06-05 16:45:55 +02:00
parent 5d6fa47606
commit d20952d2fb
8 changed files with 73 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

22
assets/css/src/_index.scss
View file

@ -1,19 +1,25 @@
body[data-template="index"] {
.filter-menu {
display: flex;
flex-wrap: wrap;
opacity: 1;
position: relative;
font-size: var(--font-size-L);
pointer-events: all;
column-gap: calc(2 * var(--body-margin));
margin: calc(4 * var(--line-height-S)) 0 var(--line-height-S) 0;
width: calc(var(--index-width) - var(--body-margin));
position: sticky;
opacity: 1;
line-height: normal;
pointer-events: all;
margin: 0 0 var(--line-height-S) 0;
width: calc(var(--index-width) - var(--body-margin));
top: 0;
padding-top: calc(var(--line-height-S) * 3);
z-index: 2;
button.active {
text-decoration: underline;
}
ul {
display: flex;
flex-wrap: wrap;
column-gap: calc(2 * var(--body-margin));
}
}
.projects-index summary {

24
assets/css/src/_mobile.scss
View file

@ -67,26 +67,30 @@
}
body[data-template="index"] {
ul.filter-menu {
position: fixed;
top: var(--slider-height);
width: 100%;
margin: 0;
padding-top: var(--line-height-S);
.filter-menu {
padding-top: 0;
}
ul.projects-index {
position: absolute;
top: var(--slider-height);
top: 0;
box-sizing: border-box;
width: calc(100vw - calc(var(--body-margin) * 2));
height: calc(100vh - var(--slider-height));
height: 100vh;
overflow: auto;
padding-right: 1.5rem;
padding-top: calc((var(--line-height-S) * 5));
padding-top: calc(var(--font-size-XL) + (var(--line-height-S) * 1));
padding-bottom: calc(var(--font-size-XL));
}
ul.projects-index:has(.selected) {
top: var(--slider-height);
height: calc(100vh - var(--slider-height));
padding-top: var(--line-height-S);
padding-bottom: calc(var(--font-size-XL));
}

43
assets/css/style.css
View file

@ -590,21 +590,26 @@ dialog#mobile-menu-content::backdrop {
}
body[data-template=index] .filter-menu {
display: flex;
flex-wrap: wrap;
opacity: 1;
position: relative;
font-size: var(--font-size-L);
pointer-events: all;
-moz-column-gap: calc(2 * var(--body-margin));
column-gap: calc(2 * var(--body-margin));
margin: calc(4 * var(--line-height-S)) 0 var(--line-height-S) 0;
width: calc(var(--index-width) - var(--body-margin));
position: sticky;
opacity: 1;
line-height: normal;
pointer-events: all;
margin: 0 0 var(--line-height-S) 0;
width: calc(var(--index-width) - var(--body-margin));
top: 0;
padding-top: calc(var(--line-height-S) * 3);
z-index: 2;
}
body[data-template=index] .filter-menu button.active {
text-decoration: underline;
}
body[data-template=index] .filter-menu ul {
display: flex;
flex-wrap: wrap;
-moz-column-gap: calc(2 * var(--body-margin));
column-gap: calc(2 * var(--body-margin));
}
body[data-template=index] .projects-index summary {
cursor: pointer;
}
@ -672,22 +677,24 @@ body[data-template=index] .projects-index li.filtered-out {
top: var(--slider-height);
padding-top: 0;
}
body[data-template=index] ul.filter-menu {
position: fixed;
top: var(--slider-height);
width: 100%;
margin: 0;
padding-top: var(--line-height-S);
body[data-template=index] .filter-menu {
padding-top: 0;
}
body[data-template=index] ul.projects-index {
position: absolute;
top: var(--slider-height);
top: 0;
box-sizing: border-box;
width: calc(100vw - var(--body-margin) * 2);
height: calc(100vh - var(--slider-height));
height: 100vh;
overflow: auto;
padding-right: 1.5rem;
padding-top: calc(var(--line-height-S) * 5);
padding-top: calc(var(--font-size-XL) + var(--line-height-S) * 1);
padding-bottom: calc(var(--font-size-XL));
}
body[data-template=index] ul.projects-index:has(.selected) {
top: var(--slider-height);
height: calc(100vh - var(--slider-height));
padding-top: var(--line-height-S);
padding-bottom: calc(var(--font-size-XL));
}
body[data-template=index] .selected .fix:hover + .toggle {

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

7
assets/js/filter-menu.js
View file

@ -1,5 +1,5 @@
const filterButtons = document.querySelectorAll(".filter-menu button");
const projectItems = document.querySelectorAll(".projects-index li");
const projectItems = document.querySelectorAll(".projects-index li.project");
function applyFilter(filter) {
filterButtons.forEach((b) => b.classList.remove("active"));
@ -11,6 +11,7 @@ function applyFilter(filter) {
if (btn) btn.classList.add("active");
projectItems.forEach((item) => {
item.classList.toggle("filtered-out", item.dataset.category !== filter);
item.classList.remove("selected", "unselected");
});
}
@ -23,6 +24,8 @@ filterButtons.forEach((btn) => {
});
});
window.addEventListener("routechange", () => applyFilter(Router.getParam("filter")));
window.addEventListener("routechange", () =>
applyFilter(Router.getParam("filter")),
);
applyFilter(Router.getParam("filter"));

2
assets/js/project-toggle.js
View file

@ -1,4 +1,4 @@
const allProjects = document.querySelectorAll(".projects-index li");
const allProjects = document.querySelectorAll(".projects-index li.project");
function selectProject(slug) {
if (!slug) {

1
assets/js/router.js
View file

@ -2,6 +2,7 @@ const Router = {
getParam(key) {
return new URLSearchParams(window.location.search).get(key);
},
setParam(key, value) {
const url = new URL(window.location);
if (value != null) {

10
site/templates/index.php
View file

@ -1,16 +1,20 @@
<?php snippet('header') ?>
<ul class="filter-menu">
<ul class="projects-index">
<li class="filter-menu">
<ul>
<?php foreach ($categories as $key => $category): ?>
<li>
<button data-filter="<?= Str::slug($category) ?>"><?= $category ?></button>
</li>
<?php endforeach; ?>
</ul>
</li>
<ul class="projects-index">
<?php foreach ($page->children()->listed()->sortBy('date', 'desc') as $project): ?>
<li data-category="<?= Str::slug($project->category()) ?>" data-slug="<?= $project->slug() ?>">
<li class="project" data-category="<?= Str::slug($project->category()) ?>" data-slug="<?= $project->slug() ?>">
<div class="fix">
<button class="project-toggler grid">
<span> <?= $project->shownTitle() ?> </span>