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

deplace corps report to investigation-summary

Browse source
This commit is contained in:
Julie Blanc 2026-02-14 16:53:14 +01:00
parent 58ed1a3fb8
commit 06785d712c
8 changed files with 145 additions and 1096 deletions
Download patch file Download diff file Expand all files Collapse all files

38
assets/css/style.css
View file

@ -2857,23 +2857,23 @@ main .page__header .description-medium {
gap: calc(var(--spacing) * 0.25);
}
.report__content {
.investigation__content {
margin-top: calc(var(--spacing) * 4);
}
.report__content .section-content {
.investigation__content .section-content {
padding-left: calc(var(--padding-body) * 1.5);
padding-right: calc(var(--padding-body) * 1.5);
margin-bottom: calc(var(--spacing) * 6);
}
.report__content .section-content:target {
.investigation__content .section-content:target {
padding-top: calc(var(--header-h) + var(--spacing) * 2);
}
@media screen and (max-width: 768px) {
.report__content .section-content:target {
.investigation__content .section-content:target {
padding-top: calc(var(--header-h) + var(--spacing) * 0.5);
}
}
.report__content .section-title {
.investigation__content .section-title {
max-width: var(--max-w-content);
margin-inline: auto;
margin-bottom: calc(var(--spacing) * 2);
@ -2883,11 +2883,11 @@ main .page__header .description-medium {
max-width: var(--max-w-content);
color: var(--color-accent);
}
.report__content .section-txt {
.investigation__content .section-txt {
max-width: var(--max-w-content);
margin-inline: auto;
}
.report__content .subsection-w-media {
.investigation__content .subsection-w-media {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--padding-body);
@ -2895,7 +2895,7 @@ main .page__header .description-medium {
margin-top: calc(var(--spacing) * 2);
position: relative;
}
.report__content .subsection-w-media .media {
.investigation__content .subsection-w-media .media {
margin-inline: auto;
max-width: var(--max-w-content);
padding-left: var(--padding-inner);
@ -2904,39 +2904,39 @@ main .page__header .description-medium {
top: calc(var(--header-h) + var(--spacing));
align-self: start;
}
.report__content .subsection-txt {
.investigation__content .subsection-txt {
min-height: calc(100vh - var(--header-h));
max-width: var(--max-w-content);
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
padding-bottom: calc(var(--spacing) * 6);
}
.report__content .subsection-w-hscroll {
.investigation__content .subsection-w-hscroll {
position: relative;
margin-bottom: calc(var(--spacing) * 4);
}
.report__content .subsection-w-hscroll .horizontal-scroll {
.investigation__content .subsection-w-hscroll .horizontal-scroll {
height: 100vh;
width: 100vw;
overflow: hidden;
display: flex;
align-items: center;
}
.report__content .subsection-w-hscroll .horizontal-scroll-wrapper {
.investigation__content .subsection-w-hscroll .horizontal-scroll-wrapper {
display: flex;
flex-wrap: nowrap;
will-change: transform;
}
.report__content .subsection-w-hscroll .horizontal-scroll-slide {
.investigation__content .subsection-w-hscroll .horizontal-scroll-slide {
flex-shrink: 0;
width: 90vw;
max-width: 700px;
padding: 0 calc(var(--spacing) * 1);
}
.report__content .subsection-w-hscroll .horizontal-scroll-slide figure, .report__content .subsection-w-hscroll .horizontal-scroll-slide img {
.investigation__content .subsection-w-hscroll .horizontal-scroll-slide figure, .investigation__content .subsection-w-hscroll .horizontal-scroll-slide img {
width: 100%;
}
.report__content .subsection-w-hscroll .horizontal-scroll-pagination {
.investigation__content .subsection-w-hscroll .horizontal-scroll-pagination {
position: fixed;
bottom: calc(var(--spacing) * 2);
left: 50%;
@ -2945,17 +2945,17 @@ main .page__header .description-medium {
gap: 8px;
z-index: 10;
}
.report__content p {
.investigation__content p {
margin: calc(var(--spacing) * 0.75) 0;
}
.report__content ul {
.investigation__content ul {
padding-left: 3ch;
}
.report__content ul li {
.investigation__content ul li {
margin: calc(var(--spacing) * 0.5) 0;
}
.report__content:target {
.investigation__content:target {
padding-top: calc(var(--header-h) * 2 + var(--spacing)) !important;
}

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

@ -225,7 +225,7 @@
.report__content {
.investigation__content {
margin-top: calc(var(--spacing) * 4);
@ -351,7 +351,7 @@
}
}
.report__content:target {
.investigation__content:target {
padding-top: calc(var(--header-h)*2 + var(--spacing)) !important;
}

135
assets/js/report.js
View file

@ -1,135 +0,0 @@
import { initSwipers } from './swipers.js';
export function report(responsiveSmall) {
if (document.body.dataset.template === 'report') {
// Initialiser tous les sliders de type before-after
initSliderBeforeAfter();
initHorizontalScroll();
// Ne fonctionne que pour les écrans plus grands que responsiveSmall
if (window.matchMedia(responsiveSmall).matches) {
// Sur mobile : initialiser les swipers normalement car initMediaDisplay ne sera pas actif
initSwipers();
return;
}
}
}
function initSliderBeforeAfter(container = document){
const slidersBeforeAfter = container.querySelectorAll('.slider-before-after');
slidersBeforeAfter.forEach(function (sliderContainer, index) {
const sliderInput = sliderContainer.querySelector('.slider');
if (sliderInput) {
sliderInput.addEventListener('input', (e) => {
console.log('slider value:', e.target.value);
sliderContainer.style.setProperty('--position', `${e.target.value}%`);
});
}
});
}
function initHorizontalScroll(){
const sections = document.querySelectorAll('.subsection-w-hscroll');
sections.forEach(function (section) {
const container = section.querySelector('.horizontal-scroll');
if (!container) return;
const wrapper = container.querySelector('.horizontal-scroll-wrapper');
if (!wrapper) return;
const slides = wrapper.querySelectorAll('.horizontal-scroll-slide');
// Calculer la distance totale à scroller horizontalement
function calculateScrollDistance() {
const totalSlidesWidth = Array.from(slides).reduce((acc, slide) => acc + slide.offsetWidth, 0);
const endMargin = window.innerWidth * 0.3; // 30vw de marge à la fin
return totalSlidesWidth - window.innerWidth + endMargin;
}
let scrollDistance = calculateScrollDistance();
// Créer un spacer invisible qui crée l'espace de scroll
// Hauteur = scrollDistance + hauteur du viewport pour maintenir le texte en dessous
const spacer = document.createElement('div');
spacer.className = 'horizontal-scroll-spacer';
spacer.style.height = `${scrollDistance + window.innerHeight}px`;
spacer.style.width = '100%';
spacer.style.pointerEvents = 'none';
// Insérer le spacer AVANT .horizontal-scroll
section.insertBefore(spacer, container);
// Calculer la position absolue du spacer une seule fois
function getSpacerTopPosition() {
let element = spacer;
let top = 0;
while (element) {
top += element.offsetTop;
element = element.offsetParent;
}
return top;
}
let spacerTopPosition = getSpacerTopPosition();
// Fonction de mise à jour du scroll horizontal
function updateHorizontalScroll() {
const scrollY = window.pageYOffset || document.documentElement.scrollTop;
// Début et fin du scroll basé sur le spacer
const scrollStart = spacerTopPosition;
const scrollEnd = spacerTopPosition + scrollDistance;
console.log('scrollY:', scrollY, 'scrollStart:', scrollStart, 'scrollEnd:', scrollEnd);
if (scrollY >= scrollStart && scrollY <= scrollEnd) {
// Phase de scroll horizontal : fixer le container
const progress = (scrollY - scrollStart) / scrollDistance;
const translateX = progress * scrollDistance;
console.log('Horizontal scroll active - progress:', progress);
wrapper.style.transform = `translateX(-${translateX}px)`;
container.style.position = 'fixed';
container.style.top = '0';
container.style.left = '0';
} else if (scrollY < scrollStart) {
// Avant le spacer : reset
console.log('Before spacer');
wrapper.style.transform = 'translateX(0)';
container.style.position = '';
container.style.top = '';
container.style.left = '';
} else {
// Après le spacer : garder le translate final et défixer
console.log('After spacer');
wrapper.style.transform = `translateX(-${scrollDistance}px)`;
container.style.position = '';
container.style.top = '';
container.style.left = '';
}
}
// Écouter le scroll
window.addEventListener('scroll', updateHorizontalScroll, { passive: true });
// Recalculer au resize
window.addEventListener('resize', function() {
scrollDistance = calculateScrollDistance();
spacer.style.height = `${scrollDistance + window.innerHeight}px`;
spacerTopPosition = getSpacerTopPosition();
updateHorizontalScroll();
});
// Initial call
updateHorizontalScroll();
});
}