adrien-payet/actuel-inactuel
1
0
Fork 0
Code Issues 12 Pull requests Projects Releases Packages Wiki Activity Actions

refactor : merge light-mode into script.js, rename panel to side-panel, fix print styles
All checks were successful
Deploy / Deploy to Production (push) Successful in 6s
Details

Browse source 
Integrate light-mode.js into script.js, unify .panel/.side-panel classes
into .side-panel, scope theme variables to @media screen for proper
print light mode, and add page-break after chapo.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-28 10:59:10 +01:00
parent a2e65635fb
commit a352c48eaa
8 changed files with 62 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/css/src/_print.scss
View file

@ -1,5 +1,5 @@
@media print { @media print {
.panel, .side-panel,
nav, nav,
.toggle-light { .toggle-light {
display: none; display: none;

45
assets/css/src/_side-panel.scss
View file

@ -10,11 +10,10 @@
display: none; display: none;
} }
.panel { .side-panel {
display: none; display: none;
position: fixed; position: fixed;
overflow: auto; overflow: auto;
width: 100vw;
height: 100dvh; height: 100dvh;
top: 0; top: 0;
background-color: var(--color-background); background-color: var(--color-background);
@ -26,11 +25,11 @@
flex-direction: column; flex-direction: column;
} }
.panel.panel--visible { .side-panel.side-panel--visible {
display: flex; display: flex;
} }
.panel header { .side-panel header {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
@ -110,7 +109,7 @@ button.search__icon {
cursor: pointer; cursor: pointer;
} }
.panel__collection { .side-panel__collection {
scroll-behavior: smooth; scroll-behavior: smooth;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
@ -120,7 +119,7 @@ button.search__icon {
footer { footer {
width: 100%; width: 100%;
} }
.panel-close { .side-panel-close {
position: fixed; position: fixed;
box-sizing: border-box; box-sizing: border-box;
bottom: 0; bottom: 0;
@ -138,27 +137,27 @@ footer {
/* ================= LISTS ================= */ /* ================= LISTS ================= */
.panel__toggle-btn { .side-panel__toggle-btn {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: var(--unit--vertical); margin-bottom: var(--unit--vertical);
} }
.panel__toggle-icon { .side-panel__toggle-icon {
color: var(--color-secondary); color: var(--color-secondary);
font-size: var(--font-size-xl); font-size: var(--font-size-xl);
} }
/* ================= YEARS ================= */ /* ================= YEARS ================= */
.panel__collection .panel__item:last-child { .side-panel__collection .side-panel__item:last-child {
margin-bottom: 6rem; margin-bottom: 6rem;
} }
.panel-item-content__edito { .side-panel-item-content__edito {
margin-bottom: calc(var(--unit--vertical) / 2); margin-bottom: calc(var(--unit--vertical) / 2);
} }
.panel-item-content__edito p:not(:last-child) { .side-panel-item-content__edito p:not(:last-child) {
margin-bottom: var(--unit--vertical); margin-bottom: var(--unit--vertical);
} }
@ -166,29 +165,29 @@ button.see-more {
margin-bottom: var(--unit--vertical); margin-bottom: var(--unit--vertical);
} }
.panel-item-content__texts:not(.panel__collection .panel-item-content__texts) { .side-panel-item-content__texts:not(.side-panel__collection .side-panel-item-content__texts) {
padding: var(--unit--vertical) var(--unit--horizontal); padding: var(--unit--vertical) var(--unit--horizontal);
} }
/* ================= TEXT ITEM ================= */ /* ================= TEXT ITEM ================= */
.panel .text:first-child, .side-panel .text:first-child,
.panel .text:last-child { .side-panel .text:last-child {
margin-bottom: calc(var(--unit--vertical) * 2); margin-bottom: calc(var(--unit--vertical) * 2);
} }
.panel__collection--years .text:first-child .text__title { .side-panel__collection--years .text:first-child .text__title {
display: inline-block; display: inline-block;
padding-left: var(--unit--horizontal); padding-left: var(--unit--horizontal);
} }
.panel .text__subtitle { .side-panel .text__subtitle {
margin-bottom: calc(var(--unit--vertical) / 4); margin-bottom: calc(var(--unit--vertical) / 4);
} }
.panel__collection--years .text:first-child .text__infos { .side-panel__collection--years .text:first-child .text__infos {
padding-left: var(--unit--horizontal); padding-left: var(--unit--horizontal);
} }
.panel__collection--years .text:first-child .text__infos::before { .side-panel__collection--years .text:first-child .text__infos::before {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
@ -201,23 +200,19 @@ button.see-more {
@media screen and (min-width: 640px) { @media screen and (min-width: 640px) {
.side-panel { .side-panel {
width: 40rem; width: 40rem;
}
.panel {
z-index: 4; z-index: 4;
width: var(--padding-body);
} }
.panel-close { .side-panel-close {
display: none; display: none;
} }
.panel--right { .side-panel--right {
right: auto; right: auto;
left: calc(-100vw - 1px); left: calc(-100vw - 1px);
} }
.panel--right.open { .side-panel--right.open {
left: 0; left: 0;
} }
} }

46
assets/css/style.css
View file

@ -664,11 +664,10 @@ button.toggle.right::before {
display: none; display: none;
} }
.panel { .side-panel {
display: none; display: none;
position: fixed; position: fixed;
overflow: auto; overflow: auto;
width: 100vw;
height: 100dvh; height: 100dvh;
top: 0; top: 0;
background-color: var(--color-background); background-color: var(--color-background);
@ -679,11 +678,11 @@ button.toggle.right::before {
flex-direction: column; flex-direction: column;
} }
.panel.panel--visible { .side-panel.side-panel--visible {
display: flex; display: flex;
} }
.panel header { .side-panel header {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
@ -773,7 +772,7 @@ button.search__icon {
cursor: pointer; cursor: pointer;
} }
.panel__collection { .side-panel__collection {
scroll-behavior: smooth; scroll-behavior: smooth;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
@ -784,7 +783,7 @@ footer {
width: 100%; width: 100%;
} }
.panel-close { .side-panel-close {
position: fixed; position: fixed;
box-sizing: border-box; box-sizing: border-box;
bottom: 0; bottom: 0;
@ -801,28 +800,28 @@ footer {
} }
/* ================= LISTS ================= */ /* ================= LISTS ================= */
.panel__toggle-btn { .side-panel__toggle-btn {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: var(--unit--vertical); margin-bottom: var(--unit--vertical);
} }
.panel__toggle-icon { .side-panel__toggle-icon {
color: var(--color-secondary); color: var(--color-secondary);
font-size: var(--font-size-xl); font-size: var(--font-size-xl);
} }
/* ================= YEARS ================= */ /* ================= YEARS ================= */
.panel__collection .panel__item:last-child { .side-panel__collection .side-panel__item:last-child {
margin-bottom: 6rem; margin-bottom: 6rem;
} }
.panel-item-content__edito { .side-panel-item-content__edito {
margin-bottom: calc(var(--unit--vertical) / 2); margin-bottom: calc(var(--unit--vertical) / 2);
} }
.panel-item-content__edito p:not(:last-child) { .side-panel-item-content__edito p:not(:last-child) {
margin-bottom: var(--unit--vertical); margin-bottom: var(--unit--vertical);
} }
@ -830,30 +829,30 @@ button.see-more {
margin-bottom: var(--unit--vertical); margin-bottom: var(--unit--vertical);
} }
.panel-item-content__texts:not(.panel__collection .panel-item-content__texts) { .side-panel-item-content__texts:not(.side-panel__collection .side-panel-item-content__texts) {
padding: var(--unit--vertical) var(--unit--horizontal); padding: var(--unit--vertical) var(--unit--horizontal);
} }
/* ================= TEXT ITEM ================= */ /* ================= TEXT ITEM ================= */
.panel .text:first-child, .side-panel .text:first-child,
.panel .text:last-child { .side-panel .text:last-child {
margin-bottom: calc(var(--unit--vertical) * 2); margin-bottom: calc(var(--unit--vertical) * 2);
} }
.panel__collection--years .text:first-child .text__title { .side-panel__collection--years .text:first-child .text__title {
display: inline-block; display: inline-block;
padding-left: var(--unit--horizontal); padding-left: var(--unit--horizontal);
} }
.panel .text__subtitle { .side-panel .text__subtitle {
margin-bottom: calc(var(--unit--vertical) / 4); margin-bottom: calc(var(--unit--vertical) / 4);
} }
.panel__collection--years .text:first-child .text__infos { .side-panel__collection--years .text:first-child .text__infos {
padding-left: var(--unit--horizontal); padding-left: var(--unit--horizontal);
} }
.panel__collection--years .text:first-child .text__infos::before { .side-panel__collection--years .text:first-child .text__infos::before {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
@ -866,19 +865,16 @@ button.see-more {
@media screen and (min-width: 640px) { @media screen and (min-width: 640px) {
.side-panel { .side-panel {
width: 40rem; width: 40rem;
}
.panel {
z-index: 4; z-index: 4;
width: var(--padding-body);
} }
.panel-close { .side-panel-close {
display: none; display: none;
} }
.panel--right { .side-panel--right {
right: auto; right: auto;
left: calc(-100vw - 1px); left: calc(-100vw - 1px);
} }
.panel--right.open { .side-panel--right.open {
left: 0; left: 0;
} }
} }
@ -1184,7 +1180,7 @@ body.full-width #main-content {
} }
} }
@media print { @media print {
.panel, .side-panel,
nav, nav,
.toggle-light { .toggle-light {
display: none; display: none;

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

File diff suppressed because one or more lines are too long

18
assets/js/script.js
View file

@ -149,24 +149,24 @@ function subscribe(event) {
} }
} }
const panels = document.querySelectorAll(".panel[data-panel]"); const panels = document.querySelectorAll(".side-panel[data-panel]");
const navOverlay = document.querySelector("#nav-overlay"); const navOverlay = document.querySelector("#nav-overlay");
function closeAllPanels() { function closeAllPanels() {
panels.forEach(panel => panel.classList.remove("panel--visible")); panels.forEach(panel => panel.classList.remove("side-panel--visible"));
navOverlay.classList.remove("nav-overlay--visible"); navOverlay.classList.remove("nav-overlay--visible");
document.body.classList.remove("no-scroll"); document.body.classList.remove("no-scroll");
} }
function openPanel(name, view) { function openPanel(name, view) {
const panel = document.querySelector(`.panel[data-panel="${name}"]`); const panel = document.querySelector(`.side-panel[data-panel="${name}"]`);
if (panel) { if (panel) {
if (view) { if (view) {
panel.querySelectorAll('[data-view]').forEach(v => v.classList.add('hidden')); panel.querySelectorAll('[data-view]').forEach(v => v.classList.add('hidden'));
const target = panel.querySelector(`[data-view="${view}"]`); const target = panel.querySelector(`[data-view="${view}"]`);
if (target) target.classList.remove('hidden'); if (target) target.classList.remove('hidden');
} }
panel.classList.add("panel--visible"); panel.classList.add("side-panel--visible");
navOverlay.classList.add("nav-overlay--visible"); navOverlay.classList.add("nav-overlay--visible");
document.body.classList.add("no-scroll"); document.body.classList.add("no-scroll");
} }
@ -210,7 +210,7 @@ document.addEventListener("DOMContentLoaded", () => {
const navSortBtns = document.querySelectorAll(".side-panel .sort-btn"); const navSortBtns = document.querySelectorAll(".side-panel .sort-btn");
const navSections = document.querySelectorAll( const navSections = document.querySelectorAll(
".panel__all-texts, .panel__collection" ".side-panel__all-texts, .side-panel__collection"
); );
navSortBtns.forEach((sortBtn) => { navSortBtns.forEach((sortBtn) => {
@ -219,9 +219,9 @@ document.addEventListener("DOMContentLoaded", () => {
sortBtn.classList.add("active"); sortBtn.classList.add("active");
const sections = { const sections = {
"sort-btn--all": ".panel__all-texts", "sort-btn--all": ".side-panel__all-texts",
"sort-btn--years": ".panel__collection--years", "sort-btn--years": ".side-panel__collection--years",
"sort-btn--categories": ".panel__collection--categories", "sort-btn--categories": ".side-panel__collection--categories",
}; };
navSections.forEach((navSection) => navSection.classList.add("hidden")); navSections.forEach((navSection) => navSection.classList.add("hidden"));
@ -240,7 +240,7 @@ document.addEventListener("DOMContentLoaded", () => {
}); });
}); });
document.querySelectorAll(".panel-close").forEach((btn) => { document.querySelectorAll(".side-panel-close").forEach((btn) => {
btn.addEventListener("click", closeAllPanels); btn.addEventListener("click", closeAllPanels);
}); });

2
site/snippets/nav__texts--all.php
View file

@ -1,4 +1,4 @@
<ul class="texts panel__all-texts panel-item-content__texts hidden"> <ul class="texts side-panel__all-texts side-panel-item-content__texts hidden">
<?php foreach(page('textes')->grandChildren()->sortBy('published', 'desc') as $article): ?> <?php foreach(page('textes')->grandChildren()->sortBy('published', 'desc') as $article): ?>
<?php <?php
$author = $article->author()->toPage() == null ? 'inconnu' : $article->author()->toPage()->title(); $author = $article->author()->toPage() == null ? 'inconnu' : $article->author()->toPage()->title();

14
site/snippets/nav__texts--collection.php
View file

@ -1,23 +1,23 @@
<ul <ul
class="panel__collection panel__collection--<?= $collection ?><?= e($collection == 'categories', ' hidden') ?>"> class="side-panel__collection side-panel__collection--<?= $collection ?><?= e($collection == 'categories', ' hidden') ?>">
<?php foreach($kirby->collection($collection) as $section): ?> <?php foreach($kirby->collection($collection) as $section): ?>
<li class="panel__item " x-data='{ isOpen: false }'> <li class="side-panel__item " x-data='{ isOpen: false }'>
<a class="no-underline" href="#<?= $section->slug() ?>" <a class="no-underline" href="#<?= $section->slug() ?>"
id="<?= $section->slug() ?>"> id="<?= $section->slug() ?>">
<button class="panel__toggle-btn" @click="isOpen = !isOpen"> <button class="side-panel__toggle-btn" @click="isOpen = !isOpen">
<h3><?= $section->title() ?></h3> <h3><?= $section->title() ?></h3>
<div class="panel__toggle-icon" x-text="isOpen || search.length > 0 ? '-' : '+'"></div> <div class="side-panel__toggle-icon" x-text="isOpen || search.length > 0 ? '-' : '+'"></div>
</button> </button>
</a> </a>
<div class="panel-item-content" x-show="isOpen || search.length > 0" x-data='{ edito: false }'> <div class="side-panel-item-content" x-show="isOpen || search.length > 0" x-data='{ edito: false }'>
<?php if ($collection === 'years'): ?> <?php if ($collection === 'years'): ?>
<div class="panel-item-content__edito" :class="edito ? '' : 'short'" x-show="search.length === 0"> <div class="side-panel-item-content__edito" :class="edito ? '' : 'short'" x-show="search.length === 0">
<?= $section->edito() ?> <?= $section->edito() ?>
</div> </div>
<button :class="edito ? 'open' : 'close'" x-show="search.length === 0" <button :class="edito ? 'open' : 'close'" x-show="search.length === 0"
class="see-more toggle-btn toggle-btn--left" @click="edito = !edito">Lire</button> class="see-more toggle-btn toggle-btn--left" @click="edito = !edito">Lire</button>
<?php endif ?> <?php endif ?>
<ul class="panel-item-content__texts texts"> <ul class="side-panel-item-content__texts texts">
<?php $articles = method_exists($section, 'allTexts') ? $section->allTexts() : $section->children(); ?> <?php $articles = method_exists($section, 'allTexts') ? $section->allTexts() : $section->children(); ?>
<?php foreach($articles as $article): ?> <?php foreach($articles as $article): ?>
<?php <?php

4
site/snippets/side-panel.php
View file

@ -1,4 +1,4 @@
<div class="side-panel panel" data-panel="side-panel"> <div class="side-panel" data-panel="side-panel">
<div class="side-panel__view" data-view="nav" x-data="{search: ''}"> <div class="side-panel__view" data-view="nav" x-data="{search: ''}">
<header> <header>
<p class="sort-btns"> <p class="sort-btns">
@ -27,5 +27,5 @@
</div> </div>
<?php endif ?> <?php endif ?>
<button class="less panel-close">fermer</button> <button class="less side-panel-close">fermer</button>
</div> </div>