studio-variable/index-main
3
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

panel/btn mobile & scripts
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-25 19:40:55 +01:00
parent bd97c1c33e
commit f28680f77e
26 changed files with 506 additions and 297 deletions
Download patch file Download diff file Expand all files Collapse all files

10
assets/css/base/_body.scss
View file

@ -73,3 +73,13 @@ body, #site-header, #site-footer{
display: none; display: none;
} }
} }
body.menu-open,
body.is-hidden{
overflow-y: hidden;
main, footer, #nav-highlight, .btn--back-to-top{
transition: opacity .3s ease-in;
opacity: 0.1;
}
}

48
assets/css/components/_btn-group-mobile.scss Normal file
View file

@ -0,0 +1,48 @@
.btn--group__mobile{
z-index: calc(var(--z-header) - 10);
opacity: 0;
transition: opacity .3s ease-in;
&.is-visible{
opacity: 1;
}
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: calc(var(--h-block) * 3);
padding: calc(var(--spacing) * 0.75) var(--padding-body);
// padding-top: var(--spacing);
background-color: var(--color-bg);
background: linear-gradient(0deg,
var(--color-bg) 0%,
var(--color-bg) 75%,
transparent 100%);
// background-color: yellow;
display: flex;
align-items: flex-end;
gap: var(--padding-inner);
button, .dropdown{
flex-grow: 1;
width: 100%;
}
}
@media #{$small-up}{
.btn--group__mobile{
display: none;
opacity: 0!important;
}
}

16
assets/css/components/_buttons.scss
View file

@ -160,12 +160,26 @@ button:disabled{
} }
.btn--toc{
svg{
width: 15px;
height: 15px;
top: 0px;
}
}
.btn--back-to-top{ .btn--back-to-top{
display: flex; display: flex;
border-color: var(--color-txt); border-color: var(--color-txt);
width: fit-content; width: fit-content;
margin-inline: auto; margin: var(--spacing) auto;
@media #{$small}{
margin-bottom: calc(var(--spacing)*2);
}
.icon{ .icon{
width: 12px; width: 12px;
height: 12px; height: 12px;

12
assets/css/components/_dropdown.scss
View file

@ -74,10 +74,9 @@
} }
// PANEL  // PANEL 
@media #{$small}{ &--position-mobile .dropdown__content {
&--position-panel .dropdown__content {
top: auto; top: auto;
bottom: calc(var(--h-block) + var(--padding-inner)); bottom: calc(var(--h-block) + var(--padding-inner)*2);
left: auto; left: auto;
right: 0; right: 0;
margin-top: 0; margin-top: 0;
@ -91,19 +90,20 @@
position: absolute; position: absolute;
top: auto; top: auto;
bottom: -13px; bottom: -13px;
left: 50%; left: auto;
right: 10%;
} }
} }
&--position-panel.is-open { &--position-mobile.is-open {
.dropdown__content { .dropdown__content {
transform: translateX(0); transform: translateX(0);
} }
} }
}
@media #{$small-up}{ @media #{$small-up}{

1
assets/css/components/_modal-share.scss
View file

@ -1,6 +1,7 @@
.modal--share{ .modal--share{
width: 240px; width: 240px;
padding-bottom: var(--padding-inner); padding-bottom: var(--padding-inner);
background-color: var(--color-bg);
.socials{ .socials{
display: block; display: block;
list-style: none; list-style: none;

15
assets/css/partials/_site-menu.scss
View file

@ -6,10 +6,13 @@
top: var(--header-h); top: var(--header-h);
right: calc(var(--menu-w)*-1); right: calc(var(--menu-w)*-1);
transition: right .3s ease-in; transition: right .3s ease-in;
@media #{$small}{
transition: right .4s ease-in;
}
background-color: var(--color-bg); background-color: var(--color-bg);
border-left: var(--border-light); border-left: var(--border-light);
padding: var(--padding-body); padding: var(--padding-body);
z-index: 1000; z-index: calc(var(--z-header) - 1);
@media #{$x-small}{ @media #{$x-small}{
width: 100vw; width: 100vw;
@ -50,11 +53,11 @@
} }
body.menu-open{ body.menu-open{
overflow: hidden; // overflow: hidden;
main, footer, #nav-highlight{ // main, footer, #nav-highlight{
transition: opacity .3s ease-in; // transition: opacity .3s ease-in;
opacity: 0.1; // opacity: 0.1;
} // }
#site-menu{ #site-menu{
right: 0; right: 0;

297
assets/css/style.css
View file

@ -137,6 +137,19 @@ body, #site-header, #site-footer {
transition: background-color 0.3s ease, color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease;
} }
body.menu-open,
body.is-hidden {
overflow-y: hidden;
}
body.menu-open main, body.menu-open footer, body.menu-open #nav-highlight, body.menu-open .btn--back-to-top,
body.is-hidden main,
body.is-hidden footer,
body.is-hidden #nav-highlight,
body.is-hidden .btn--back-to-top {
transition: opacity 0.3s ease-in;
opacity: 0.1;
}
#site-header { #site-header {
z-index: var(--z-header); z-index: var(--z-header);
--gap: 3ch; --gap: 3ch;
@ -390,12 +403,23 @@ button:disabled {
color: var(--color-txt); color: var(--color-txt);
} }
.btn--toc svg {
width: 15px;
height: 15px;
top: 0px;
}
.btn--back-to-top { .btn--back-to-top {
display: flex; display: flex;
border-color: var(--color-txt); border-color: var(--color-txt);
width: -moz-fit-content; width: -moz-fit-content;
width: fit-content; width: fit-content;
margin-inline: auto; margin: var(--spacing) auto;
}
@media screen and (max-width: 768px) {
.btn--back-to-top {
margin-bottom: calc(var(--spacing) * 2);
}
} }
.btn--back-to-top .icon { .btn--back-to-top .icon {
width: 12px; width: 12px;
@ -511,6 +535,36 @@ button.sort[data-sort-type=up] .arrow {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
.btn--group__mobile {
z-index: calc(var(--z-header) - 10);
opacity: 0;
transition: opacity 0.3s ease-in;
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: calc(var(--h-block) * 3);
padding: calc(var(--spacing) * 0.75) var(--padding-body);
background-color: var(--color-bg);
background: linear-gradient(0deg, var(--color-bg) 0%, var(--color-bg) 75%, transparent 100%);
display: flex;
align-items: flex-end;
gap: var(--padding-inner);
}
.btn--group__mobile.is-visible {
opacity: 1;
}
.btn--group__mobile button, .btn--group__mobile .dropdown {
flex-grow: 1;
width: 100%;
}
@media screen and (min-width: 768px) {
.btn--group__mobile {
display: none;
opacity: 0 !important;
}
}
#hero { #hero {
width: 100%; width: 100%;
position: relative; position: relative;
@ -820,6 +874,7 @@ button.sort[data-sort-type=up] .arrow {
.modal--share { .modal--share {
width: 240px; width: 240px;
padding-bottom: var(--padding-inner); padding-bottom: var(--padding-inner);
background-color: var(--color-bg);
} }
.modal--share .socials { .modal--share .socials {
display: block; display: block;
@ -999,28 +1054,27 @@ button.sort[data-sort-type=up] .arrow {
visibility: visible; visibility: visible;
transform: translateY(0); transform: translateY(0);
} }
@media screen and (max-width: 768px) { .dropdown--position-mobile .dropdown__content {
.dropdown--position-panel .dropdown__content { top: auto;
top: auto; bottom: calc(var(--h-block) + var(--padding-inner) * 2);
bottom: calc(var(--h-block) + var(--padding-inner)); left: auto;
left: auto; right: 0;
right: 0; margin-top: 0;
margin-top: 0; margin-left: 4px;
margin-left: 4px; }
} .dropdown--position-mobile .dropdown__content::before {
.dropdown--position-panel .dropdown__content::before { font-family: Arial;
font-family: Arial; content: "◀";
content: "◀"; transform: rotate(-90deg);
transform: rotate(-90deg); font-size: 14px;
font-size: 14px; position: absolute;
position: absolute; top: auto;
top: auto; bottom: -13px;
bottom: -13px; left: auto;
left: 50%; right: 10%;
} }
.dropdown--position-panel.is-open .dropdown__content { .dropdown--position-mobile.is-open .dropdown__content {
transform: translateX(0); transform: translateX(0);
}
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.dropdown--position-panel .dropdown__content { .dropdown--position-panel .dropdown__content {
@ -1519,10 +1573,15 @@ button.sort[data-sort-type=up] .arrow {
background-color: var(--color-bg); background-color: var(--color-bg);
border-left: var(--border-light); border-left: var(--border-light);
padding: var(--padding-body); padding: var(--padding-body);
z-index: 1000; z-index: calc(var(--z-header) - 1);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@media screen and (max-width: 768px) {
#site-menu {
transition: right 0.4s ease-in;
}
}
@media screen and (max-width: 560px) { @media screen and (max-width: 560px) {
#site-menu { #site-menu {
width: 100vw; width: 100vw;
@ -1555,13 +1614,6 @@ button.sort[data-sort-type=up] .arrow {
text-transform: uppercase; text-transform: uppercase;
} }
body.menu-open {
overflow: hidden;
}
body.menu-open main, body.menu-open footer, body.menu-open #nav-highlight {
transition: opacity 0.3s ease-in;
opacity: 0.1;
}
body.menu-open #site-menu { body.menu-open #site-menu {
right: 0; right: 0;
} }
@ -1880,40 +1932,8 @@ body main {
margin: 0 var(--padding-body); margin: 0 var(--padding-body);
} }
[data-template=investigation-summary] main .panel-left { [data-template=investigation-summary] main .panel-left {
padding: calc(var(--spacing) * 0.5) 0;
background-color: yellow;
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: calc(var(--h-block) * 3);
padding: calc(var(--spacing) * 0.75) var(--padding-body);
padding-top: var(--spacing);
background-color: var(--color-bg);
background: linear-gradient(0deg, var(--color-bg) 0%, var(--color-bg) 64%, transparent 100%);
}
[data-template=investigation-summary] main .panel-left #nav--page {
display: none; display: none;
} }
[data-template=investigation-summary] main .panel-left .btn--group {
width: 100%;
display: flex;
flex-direction: row;
gap: var(--padding-inner);
position: relative;
}
[data-template=investigation-summary] main .panel-left .btn--group button {
width: 100%;
}
[data-template=investigation-summary] main .panel-left {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-in;
}
[data-template=investigation-summary] main .panel-left.is-visible {
opacity: 1;
pointer-events: auto;
}
} }
@media screen and (max-width: 560px) { @media screen and (max-width: 560px) {
[data-template=investigation-summary] main #section__dl .dl__group { [data-template=investigation-summary] main #section__dl .dl__group {
@ -1923,57 +1943,94 @@ body main {
padding: calc(var(--spacing) * 0.25) 0; padding: calc(var(--spacing) * 0.25) 0;
} }
} }
[data-template=report] .report__header { @media screen and (max-width: 768px) {
margin-inline: auto; [data-template=report] #toggle-panel {
margin-top: calc(var(--spacing) * 1); display: none;
max-width: var(--max-w-cards); }
margin-bottom: calc(var(--spacing) * 2.5); [data-template=report] #report__aside {
width: 100vw;
position: fixed;
top: 0px;
height: 100vh;
left: -100vw;
z-index: calc(var(--z-header) + 10);
transition: left 0.4s ease-in;
background: var(--color-bg);
}
[data-template=report] #report__aside .panel__header {
margin: 0 var(--padding-body);
border-bottom: var(--border-aside);
height: var(--header-h);
}
[data-template=report] #report__aside .panel__content {
height: calc(100dvh - var(--header-h));
height: calc(100vh - var(--header-h));
padding-bottom: 30vh;
}
[data-template=report] #report__aside .btn--group {
display: none;
}
[data-template=report] .panel-open #report__aside {
left: 0px;
}
} }
[data-template=report] .report__content { @media screen and (min-width: 768px) {
display: grid; [data-template=report] .report__header {
grid-template-columns: 1fr 1fr; margin-inline: auto;
grid-gap: var(--padding-body); margin-top: calc(var(--spacing) * 1);
max-width: var(--max-w-cards);
margin-bottom: calc(var(--spacing) * 2.5);
}
[data-template=report] .report__content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: var(--padding-body);
}
[data-template=report] .report__content .report__txt {
max-width: var(--max-w-content);
}
[data-template=report] .report__content .report__medias {
background-color: yellow;
}
[data-template=report] #toggle-panel {
position: fixed;
top: var(--header-h);
left: var(--padding-body);
z-index: calc(var(--z-header) + 100);
}
[data-template=report] #report__aside {
position: fixed;
top: var(--header-h);
left: var(--padding-body);
width: var(--panel-w);
height: calc(100vh - var(--header-h));
z-index: calc(var(--z-header) + 200);
background-color: var(--color-bg);
box-shadow: 4px 0px 4px 1px var(--color-bg);
}
[data-template=report] #report__aside .panel__header {
border: var(--border-aside);
height: calc(var(--h-block) * 1.5);
}
[data-template=report] #report__aside .panel__content {
height: calc(100% - var(--h-block) * 4.25);
padding-bottom: 80px;
}
[data-template=report] #report__aside {
left: calc(var(--panel-w) * -1);
transition: left ease-in-out 0.5s;
}
[data-template=report] #report {
padding-left: calc(var(--padding-body) * 2);
transition: padding-left ease-in-out 0.5s;
}
[data-template=report] .panel-open #report__aside {
left: var(--padding-body);
}
[data-template=report] .panel-open #report {
padding-left: calc(var(--panel-w) + var(--padding-body) * 1);
}
} }
[data-template=report] .report__content .report__txt {
max-width: var(--max-w-content);
}
[data-template=report] .report__content .report__medias {
background-color: yellow;
}
[data-template=report] #toggle-panel {
position: fixed;
top: var(--header-h);
left: var(--padding-body);
z-index: calc(var(--z-header) + 100);
}
[data-template=report] #report__aside {
position: fixed;
top: var(--header-h);
left: var(--padding-body);
width: var(--panel-w);
height: calc(100vh - var(--header-h));
z-index: calc(var(--z-header) + 200);
background-color: var(--color-bg);
box-shadow: 4px 0px 4px 1px var(--color-bg);
}
[data-template=report] #report__aside .panel__content {
height: calc(100% - var(--h-block) * 4);
}
[data-template=report] #report__aside {
left: calc(var(--panel-w) * -1);
transition: left ease-in-out 0.5s;
}
[data-template=report] #report {
padding-left: calc(var(--padding-body) * 2);
transition: padding-left ease-in-out 0.5s;
}
[data-template=report] .panel-open #report__aside {
left: var(--padding-body);
}
[data-template=report] .panel-open #report {
padding-left: calc(var(--panel-w) + var(--padding-body) * 1);
}
.report__header { .report__header {
display: grid; display: grid;
-moz-column-gap: var(--padding-inner); -moz-column-gap: var(--padding-inner);
@ -2052,6 +2109,14 @@ body main {
.report__content .section-content { .report__content .section-content {
margin-bottom: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3);
} }
.report__content .section-content:target {
padding-top: calc(var(--header-h) + var(--spacing) * 2);
}
@media screen and (max-width: 768px) {
.report__content .section-content:target {
padding-top: calc(var(--header-h) + var(--spacing) * 0.5);
}
}
.report__content .section-title { .report__content .section-title {
font-size: var(--fs-medium); font-size: var(--fs-medium);
margin-bottom: var(--spacing); margin-bottom: var(--spacing);
@ -2073,20 +2138,12 @@ body main {
width: calc(var(--h-block) * 1); width: calc(var(--h-block) * 1);
padding: 0; padding: 0;
} }
#toggle-panel svg {
width: 15px;
height: 15px;
fill: var(--color-txt);
top: 0px;
}
#report__aside { #report__aside {
--border-aside: var(--border-light); --border-aside: var(--border-light);
} }
#report__aside .panel__header { #report__aside .panel__header {
display: flex; display: flex;
border: var(--border-aside);
height: calc(var(--h-block) * 1.25);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;

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

File diff suppressed because one or more lines are too long

2
assets/css/style.scss
View file

@ -12,6 +12,7 @@
@import "components/keywords"; @import "components/keywords";
@import "components/details-summary"; @import "components/details-summary";
@import "components/sort"; @import "components/sort";
@import "components/btn-group-mobile";
@import "components/figures"; @import "components/figures";
@import "components/hero"; @import "components/hero";
@ -27,6 +28,7 @@
@import "components/card-impact"; @import "components/card-impact";
@import "components/card-open-graph"; @import "components/card-open-graph";
@import "partials/site-header"; @import "partials/site-header";
@import "partials/site-menu"; @import "partials/site-menu";
@import "partials/site-footer"; @import "partials/site-footer";

47
assets/css/template/_investigation-summary.scss
View file

@ -197,52 +197,7 @@
} }
.panel-left { .panel-left {
padding: calc(var(--spacing) * 0.5) 0; display: none;
background-color: yellow;
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: calc(var(--h-block) * 3);
padding: calc(var(--spacing) * 0.75) var(--padding-body);
padding-top: var(--spacing);
background-color: var(--color-bg);
background: linear-gradient(0deg,
var(--color-bg) 0%,
var(--color-bg) 64%,
transparent 100%);
//background-color: red;
#nav--page {
display: none;
}
.btn--group {
width: 100%;
display: flex;
flex-direction: row;
gap: var(--padding-inner);
position: relative;
button{
width: 100%;
}
}
}
// action
.panel-left {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-in;
}
.panel-left.is-visible {
opacity: 1;
pointer-events: auto;
} }
} }
} }

85
assets/css/template/_report.scss
View file

@ -3,6 +3,54 @@
// LAOUT ----------------------------------- // LAOUT -----------------------------------
@media #{$small}{
[data-template="report"] {
#toggle-panel{
display: none;
}
#report__aside{
width: 100vw;
position: fixed;
top: 0px;
height: 100vh;
left: -100vw;
z-index: calc(var(--z-header) + 10);
transition: left .4s ease-in;
background: var(--color-bg);
.panel__header{
margin: 0 var(--padding-body);
border-bottom: var(--border-aside);
height: var(--header-h);
}
.panel__content{
height: calc(100dvh - var(--header-h));
height: calc(100vh - var(--header-h));
padding-bottom: 30vh;
}
.btn--group{
display: none;
}
}
.panel-open #report__aside{
left: 0px;
}
}
}
@media #{$small-up}{
[data-template="report"] { [data-template="report"] {
@ -49,14 +97,19 @@
background-color: var(--color-bg); background-color: var(--color-bg);
box-shadow: 4px 0px 4px 1px var(--color-bg); box-shadow: 4px 0px 4px 1px var(--color-bg);
.panel__header{
border: var(--border-aside);
height: calc(var(--h-block)*1.5);
}
.panel__content { .panel__content {
height: calc(100% - var(--h-block)*4); height: calc(100% - var(--h-block)*4.25);
padding-bottom: 80px;
} }
} }
#report__aside { #report__aside {
left: calc(var(--panel-w)*-1); left: calc(var(--panel-w)*-1);
@ -85,6 +138,7 @@
} }
}
// HEADER ------------------------------------------------------------------------- // HEADER -------------------------------------------------------------------------
@ -178,6 +232,10 @@
.section-content { .section-content {
margin-bottom: calc(var(--spacing)*3); margin-bottom: calc(var(--spacing)*3);
&:target{
padding-top: calc(var(--header-h) + var(--spacing)*2);
@media #{$small}{ padding-top: calc(var(--header-h) + var(--spacing)*0.5); }
}
} }
@ -210,33 +268,14 @@
#toggle-panel { #toggle-panel {
width: calc(var(--h-block) * 1); width: calc(var(--h-block) * 1);
padding: 0; padding: 0;
svg {
width: 15px;
height: 15px;
fill: var(--color-txt);
top: 0px;
}
} }
#report__aside { #report__aside {
--border-aside: var(--border-light); --border-aside: var(--border-light);
// border-radius: var(--radius-small);
.panel__header { .panel__header {
display: flex; display: flex;
border: var(--border-aside);
height: calc(var(--h-block)*1.25);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;

31
assets/js/banner-sticky-desktop.js
View file

@ -4,19 +4,14 @@ export function bannerStickyDesktop(responsiveSmall) {
if (isInitialized) return; if (isInitialized) return;
let body = document.body; let body = document.body;
if (!body || body.dataset.template !== 'investigation-summary') return; let panel = body.querySelector(".panel-left");
if (!panel) return;
let bannerPage = body.querySelector("#banner--page");
let sectionDl = document.querySelector("#section__dl");
let footer = document.querySelector("#site-footer"); let footer = document.querySelector("#site-footer");
if (!bannerPage || !sectionDl || !footer) return;
// Stocker la hauteur initiale du banner // Stocker la hauteur initiale du banner
const bannerInitialHeight = bannerPage.offsetHeight; const bannerInitialHeight = panel.offsetHeight;
// Stocker la position initiale du footer (calculée une seule fois au chargement)
let footerInitialTop = footer.offsetTop;
function checkScroll() { function checkScroll() {
const screenWidth = window.innerWidth; const screenWidth = window.innerWidth;
@ -24,33 +19,35 @@ export function bannerStickyDesktop(responsiveSmall) {
// Vérifier que l'écran est plus grand que responsiveSmall // Vérifier que l'écran est plus grand que responsiveSmall
if (screenWidth <= responsiveSmall) { if (screenWidth <= responsiveSmall) {
// Réinitialiser le transform si on est en dessous de responsiveSmall // Réinitialiser le transform si on est en dessous de responsiveSmall
bannerPage.style.transform = ''; panel.style.transform = '';
return; return;
} }
// Calculer la position du bas de la fenêtre // Calculer la position du bas de la fenêtre
const windowBottom = window.scrollY + window.innerHeight; const windowBottom = window.scrollY + window.innerHeight;
// Calculer de combien on dépasse le haut du footer (position initiale) // Calculer dynamiquement la position du footer à chaque scroll
const overlap = windowBottom - footerInitialTop; // Utiliser getBoundingClientRect() + scrollY pour une valeur toujours à jour
const footerTop = footer.getBoundingClientRect().top + window.scrollY;
// Calculer de combien on dépasse le haut du footer
const overlap = windowBottom - footerTop;
if (overlap > 0) { if (overlap > 0) {
// Le bas de la fenêtre a atteint le haut du footer // Le bas de la fenêtre a atteint le haut du footer
// Déplacer le banner vers le haut du nombre de pixels de dépassement // Déplacer le banner vers le haut du nombre de pixels de dépassement
const translateValue = Math.min(overlap, bannerInitialHeight); const translateValue = Math.min(overlap, bannerInitialHeight);
bannerPage.style.transform = `translateY(-${translateValue}px)`; panel.style.transform = `translateY(-${translateValue}px)`;
} else { } else {
// Réinitialiser la position si on n'a pas encore atteint le footer // Réinitialiser la position si on n'a pas encore atteint le footer
bannerPage.style.transform = 'translateY(0)'; panel.style.transform = 'translateY(0)';
} }
} }
window.addEventListener('scroll', checkScroll); window.addEventListener('scroll', checkScroll);
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
// Recalculer la position du footer lors du resize
if (window.innerWidth > responsiveSmall) { if (window.innerWidth > responsiveSmall) {
bannerPage.style.transform = ''; panel.style.transform = '';
footerInitialTop = footer.offsetTop;
} }
checkScroll(); checkScroll();
}); });

50
assets/js/banner-sticky-mobile.js
View file

@ -1,50 +0,0 @@
let isInitialized = false;
export function bannerStickyMobile(responsiveSmall) {
if (isInitialized) return;
let body = document.body;
if (!body || body.dataset.template !== 'investigation-summary') return;
let bannerPage = body.querySelector("#banner--page");
let sectionDl = document.querySelector("#section__dl");
let footer = document.querySelector("#site-footer");
if (!bannerPage || !sectionDl || !footer) return;
function checkScroll() {
const screenWidth = window.innerWidth;
// Vérifier que l'écran est plus petit que responsiveSmall
if (screenWidth >= responsiveSmall) {
bannerPage.classList.remove('is-visible');
bannerPage.style.transform = 'translateY(0)';
return;
}
const sectionTop = sectionDl.getBoundingClientRect().top;
const footerTop = footer.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
// Activer le banner quand #section__dl arrive en bas de l'écran
if (sectionTop <= windowHeight) {
bannerPage.classList.add('is-visible');
// Pousser le banner vers le haut si le footer arrive en bas de l'écran
if (footerTop < windowHeight) {
const pushUp = windowHeight - footerTop;
bannerPage.style.transform = `translateY(-${pushUp}px)`;
} else {
bannerPage.style.transform = 'translateY(0)';
}
} else {
bannerPage.classList.remove('is-visible');
bannerPage.style.transform = 'translateY(0)';
}
}
window.addEventListener('scroll', checkScroll);
checkScroll();
isInitialized = true;
}

35
assets/js/btn-group-mobile.js Normal file
View file

@ -0,0 +1,35 @@
let isInitialized = false;
export function btnGroupMobile() {
if (isInitialized) return;
const btnGroup = document.querySelector(".btn--group__mobile");
let footer = document.querySelector("#site-footer");
if (!btnGroup) return;
function checkScroll() {
const windowHeight = window.innerHeight;
const scrollY = window.scrollY;
const footerTop = footer.getBoundingClientRect().top;
if (scrollY > windowHeight * 0.6) {
btnGroup.classList.add('is-visible');
if (footerTop < windowHeight) {
btnGroup.classList.remove('is-visible');
}
} else {
btnGroup.classList.remove('is-visible');
}
}
window.addEventListener('scroll', checkScroll);
checkScroll();
isInitialized = true;
}

15
assets/js/dropdown.js
View file

@ -1,6 +1,14 @@
export function initDropdowns() { export function initDropdowns(responsiveSmall) {
const dropdowns = document.querySelectorAll('.dropdown'); const dropdowns = document.querySelectorAll('.dropdown');
function updateBodyOverflow(isOpen) {
if (isOpen && window.innerWidth < responsiveSmall) {
document.body.classList.add('is-hidden');
} else {
document.body.classList.remove('is-hidden');
}
}
dropdowns.forEach(dropdown => { dropdowns.forEach(dropdown => {
const trigger = dropdown.querySelector('.dropdown__trigger'); const trigger = dropdown.querySelector('.dropdown__trigger');
const content = dropdown.querySelector('.dropdown__content'); const content = dropdown.querySelector('.dropdown__content');
@ -44,6 +52,9 @@ export function initDropdowns() {
// Toggle le dropdown actuel // Toggle le dropdown actuel
dropdown.classList.toggle('is-open'); dropdown.classList.toggle('is-open');
trigger.classList.toggle('is-selected'); trigger.classList.toggle('is-selected');
// Gère l'overflow du body sur mobile
updateBodyOverflow(dropdown.classList.contains('is-open'));
}); });
}); });
@ -57,6 +68,7 @@ export function initDropdowns() {
dropdown.classList.remove('is-open', 'dropdown--align-right'); dropdown.classList.remove('is-open', 'dropdown--align-right');
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected'); dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
}); });
updateBodyOverflow(false);
}); });
// Ferme au press Escape // Ferme au press Escape
@ -66,6 +78,7 @@ export function initDropdowns() {
dropdown.classList.remove('is-open', 'dropdown--align-right'); dropdown.classList.remove('is-open', 'dropdown--align-right');
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected'); dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
}); });
updateBodyOverflow(false);
} }
}); });
} }

2
assets/js/header.js
View file

@ -4,7 +4,7 @@ export function headerToggle() {
if (!header || !buttonToggle) return; if (!header || !buttonToggle) return;
buttonToggle.addEventListener("click", () => { buttonToggle.addEventListener("click", () => {
document.body.classList.toggle("menu-open"); const isOpen = document.body.classList.toggle("menu-open");
}); });
} }

63
assets/js/panel.js
View file

@ -1,19 +1,60 @@
export function panelToggle() { export function panelToggle(responsiveSmall) {
const toggleBtn = document.querySelector('#toggle-panel'); const toggleBtn = document.querySelector('#toggle-panel');
const toggleBtnMobile = document.querySelector('#toggle-panel__mobile');
const main = document.querySelector('main');
const closeBtn = document.querySelector('.panel-left .panel__header');
function openPanel() {
main.classList.add('panel-open');
const screenWidth = window.innerWidth;
if (screenWidth <= responsiveSmall) {
console.log("small screen");
document.body.style.overflowY = 'hidden';
}
}
function closePanel() {
main.classList.remove('panel-open');
main.classList.add('panel-close');
document.body.style.overflowY = '';
}
if (toggleBtn) { if (toggleBtn) {
const main = document.querySelector('main'); toggleBtn.addEventListener('click', (e) => {
const closeBtn = document.querySelector('.panel-left .panel__header'); e.stopPropagation();
openPanel();
toggleBtn.addEventListener('click', () => {
main.classList.add('panel-open');
}); });
}
if (closeBtn) { if (toggleBtnMobile) {
closeBtn.addEventListener('click', () => { toggleBtnMobile.addEventListener('click', (e) => {
e.stopPropagation();
openPanel();
});
}
if (closeBtn) {
closeBtn.addEventListener('click', closePanel);
}
}
export function tocMobile(responsiveSmall) {
const toc = document.querySelector('#toc');
const main = document.querySelector('main');
if (!toc) return;
const tocLinks = toc.querySelectorAll('a');
tocLinks.forEach(link => {
link.addEventListener('click', () => {
if (window.innerWidth <= responsiveSmall) {
main.classList.remove('panel-open'); main.classList.remove('panel-open');
main.classList.add('panel-close'); main.classList.add('panel-close');
}); document.body.style.overflowY = '';
} }
} });
});
} }

14
assets/js/script.js
View file

@ -1,7 +1,7 @@
import { headerToggle, headerScrollVisibility } from './header.js'; import { headerToggle, headerScrollVisibility } from './header.js';
import { copyLink } from './share.js'; import { copyLink } from './share.js';
import { panelToggle } from './panel.js'; import { panelToggle, tocMobile } from './panel.js';
import { bannerStickyMobile } from './banner-sticky-mobile.js'; import { btnGroupMobile } from './btn-group-mobile.js';
import { bannerStickyDesktop } from './banner-sticky-desktop.js'; import { bannerStickyDesktop } from './banner-sticky-desktop.js';
import { themeToggle } from './themeToggle.js'; import { themeToggle } from './themeToggle.js';
import { initHeroSlider } from './hero-slider.js'; import { initHeroSlider } from './hero-slider.js';
@ -14,12 +14,14 @@ const responsiveSmall = 768;
window.onload = async function () { window.onload = async function () {
console.log("SCRIPT LOADED"); console.log("SCRIPT LOADED");
headerToggle(); headerToggle();
panelToggle(); panelToggle(responsiveSmall);
copyLink();
themeToggle(); themeToggle();
bannerStickyMobile(responsiveSmall);
tocMobile(responsiveSmall);
copyLink();
btnGroupMobile(responsiveSmall)
bannerStickyDesktop(responsiveSmall); bannerStickyDesktop(responsiveSmall);
initHeroSlider(); initHeroSlider();
playVideo(); playVideo();
initDropdowns(); initDropdowns(responsiveSmall);
} }

3
site/snippets/footer.php
View file

@ -1,5 +1,4 @@
<?php snippet('back-to-top') ?> <?php snippet('back-to-top') ?>
</main>
<footer id="site-footer"> <footer id="site-footer">
<div class="site-footer__container"> <div class="site-footer__container">
<div class="footer__newsletter"> <div class="footer__newsletter">

1
site/snippets/header.php
View file

@ -65,4 +65,3 @@
</div> </div>
</header> </header>
<?php snippet('nav') ?> <?php snippet('nav') ?>
<main>

2
site/templates/about.php
View file

@ -1,2 +1,4 @@
<?php snippet('header') ?> <?php snippet('header') ?>
<main>
</main>
<?php snippet('footer') ?> <?php snippet('footer') ?>

2
site/templates/impacts.php
View file

@ -1,2 +1,4 @@
<?php snippet('header') ?> <?php snippet('header') ?>
<main>
</main>
<?php snippet('footer') ?> <?php snippet('footer') ?>

23
site/templates/investigation-summary.php
View file

@ -1,10 +1,31 @@
<?php snippet('header') ?> <?php snippet('header') ?>
<?php <?php
// Récupérer le rapport (première page enfant de type report) // Récupérer le rapport (première page enfant de type report)
$report = $page->children()->filterBy('intendedTemplate', 'report')->first(); $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
?> ?>
<div class="btn--group__mobile">
<?php if ($report): ?>
<button class="btn--bold"><a href="<?= $report->url() ?>">Lire le rapport</a></button>
<?php endif ?>
<div class="dropdown dropdown--position-mobile">
<button class="dropdown__trigger btn--bold-inline no-link">
<span class="icon"><?= svg('assets/icons/share.svg') ?></span>
<span class="text">Partager</span>
</button>
<div class="dropdown__content">
<?php snippet('modal-share') ?>
</div>
</div>
</div>
<main>
<div class="panel-left" id="banner--page"> <div class="panel-left" id="banner--page">
@ -335,5 +356,5 @@ if ($relatedInvestigations->isEmpty()) {
</aside> </aside>
<?php endif ?> <?php endif ?>
</main>
<?php snippet('footer') ?> <?php snippet('footer') ?>

4
site/templates/investigations.php
View file

@ -1,5 +1,5 @@
<?php snippet('header') ?> <?php snippet('header') ?>
<main>
<header class="page__header"> <header class="page__header">
<h2 class="page__title"><?= $page->title() ?></h2> <h2 class="page__title"><?= $page->title() ?></h2>
@ -111,5 +111,5 @@
<?php endforeach ?> <?php endforeach ?>
</section> </section>
</main>
<?php snippet('footer') ?> <?php snippet('footer') ?>

21
site/templates/report.php
View file

@ -1,8 +1,25 @@
<?php snippet('header') ?> <?php snippet('header') ?>
<div class="btn--group__mobile">
<button id="toggle-panel__mobile" class="btn--bold-inline no-link btn--toc">
<span class="icon"><?= svg('assets/icons/toc.svg') ?></span>
<span class="text">Table des matières</span>
</button>
<div class="dropdown dropdown--position-mobile">
<button class="dropdown__trigger btn--bold-inline no-link">
<span class="icon"><?= svg('assets/icons/share.svg') ?></span>
<span class="text">Partager</span>
</button>
<div class="dropdown__content">
<?php snippet('modal-share') ?>
</div>
</div>
</div>
<button id="toggle-panel" class="btn--bold-inline no-link"> <main>
<button id="toggle-panel" class="btn--bold-inline no-link btn--toc">
<?= svg('assets/icons/toc.svg') ?> <?= svg('assets/icons/toc.svg') ?>
</button> </button>
@ -267,5 +284,5 @@
</div> </div>
</div> </div>
</article> </article>
</main>
<?php snippet('footer') ?> <?php snippet('footer') ?>

2
site/templates/resources.php
View file

@ -1,2 +1,4 @@
<?php snippet('header') ?> <?php snippet('header') ?>
<main>
</main>
<?php snippet('footer') ?> <?php snippet('footer') ?>