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

create template packages
All checks were successful
Deploy / Deploy to Production (push) Successful in 5m17s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-25 18:22:13 +01:00
parent f73b8cb90b
commit aba8b4f37e
20 changed files with 414 additions and 526 deletions
Download patch file Download diff file Expand all files Collapse all files

4
assets/css/components/_card-article-small.scss
View file

@ -84,8 +84,8 @@
.description {
font-size: var(--fs-small);
@include clamp(2);
margin-top: calc(var(--spacing)*0.25);
display: none;
// margin-top: calc(var(--spacing)*-0.5);
// display: none;
}

6
assets/css/components/_card-article.scss
View file

@ -29,7 +29,6 @@
}
.content{
// padding: var(--padding-inner);
display: flex;
flex-direction: column;
}
@ -120,9 +119,6 @@
@media #{$small-up} {
[data-template="home"] .pinned-home{
grid-column: span 2;
@ -178,5 +174,3 @@
}
}

2
assets/css/components/_text.scss
View file

@ -1,3 +1,5 @@
[data-template="package"] .page__content,
.main__single .page__content,
#investigation__content{
font-size: var(--fs-text);

2
assets/css/partials/_page-aside.scss
View file

@ -1,3 +1,4 @@
.package__section,
.page__aside{
max-width: var(--max-w-cards);
margin-inline: auto;
@ -6,6 +7,7 @@
padding-top: calc(var(--spacing)*3);
}
.section__title,
.aside__title{
font-weight: 500;
text-transform: uppercase;

20
assets/css/partials/_page-header.scss
View file

@ -53,4 +53,24 @@ margin-bottom: calc(var(--spacing) * 1);
max-width: var(--max-w-content);
}
ul.details{
display: flex;
gap: 3ch;
list-style: none;
margin-top: calc(var(--spacing) * -1.5);
color: var(--color-txt-light);
a{
text-decoration: none;
text-transform: lowercase;
&::after{
content: " ↓";
}
}
li:hover{
color: var(--color-txt)
}
}
}

192
assets/css/style.css
View file

@ -1388,17 +1388,24 @@ button.sort[data-sort-type=up] .arrow {
transform: translateX(0);
}
[data-template=package] .page__content,
.main__single .page__content,
#investigation__content {
font-size: var(--fs-text);
}
.main__single .page__content p, .main__single .page__content li, .main__single .page__content ul,
[data-template=package] .page__content p, [data-template=package] .page__content li, [data-template=package] .page__content ul,
.main__single .page__content p,
.main__single .page__content li,
.main__single .page__content ul,
#investigation__content p,
#investigation__content li,
#investigation__content ul {
font-size: var(--fs-text);
}
.main__single .page__content h3, .main__single .page__content h4, .main__single .page__content h5,
[data-template=package] .page__content h3, [data-template=package] .page__content h4, [data-template=package] .page__content h5,
.main__single .page__content h3,
.main__single .page__content h4,
.main__single .page__content h5,
#investigation__content h3,
#investigation__content h4,
#investigation__content h5 {
@ -1406,6 +1413,7 @@ button.sort[data-sort-type=up] .arrow {
max-width: var(--max-w-content);
margin-inline: auto;
}
[data-template=package] .page__content h3,
.main__single .page__content h3,
#investigation__content h3 {
margin-top: calc(var(--spacing) * 4);
@ -1413,6 +1421,7 @@ button.sort[data-sort-type=up] .arrow {
font-size: 1.45em;
text-transform: uppercase;
}
[data-template=package] .page__content h4,
.main__single .page__content h4,
#investigation__content h4 {
margin-top: calc(var(--spacing) * 3);
@ -1420,6 +1429,7 @@ button.sort[data-sort-type=up] .arrow {
font-size: 1.2em;
text-transform: uppercase;
}
[data-template=package] .page__content h5,
.main__single .page__content h5,
#investigation__content h5 {
margin-top: calc(var(--spacing) * 1.5);
@ -1429,19 +1439,24 @@ button.sort[data-sort-type=up] .arrow {
text-decoration: 1px underline var(--grey-600);
text-underline-offset: 5px;
}
[data-template=package] .page__content p,
.main__single .page__content p,
#investigation__content p {
margin: calc(var(--spacing) * 0.75) 0;
}
[data-template=package] .page__content ul,
.main__single .page__content ul,
#investigation__content ul {
padding-left: 3ch;
}
[data-template=package] .page__content ul li,
.main__single .page__content ul li,
#investigation__content ul li {
margin: calc(var(--spacing) * 0.5) 0;
}
.main__single .page__content figcaption, .main__single .page__content .caption,
[data-template=package] .page__content figcaption, [data-template=package] .page__content .caption,
.main__single .page__content figcaption,
.main__single .page__content .caption,
#investigation__content figcaption,
#investigation__content .caption {
font-size: var(--fs-small);
@ -1450,13 +1465,18 @@ button.sort[data-sort-type=up] .arrow {
line-height: 1.1;
margin: calc(var(--spacing) * 0.5) 0 !important;
}
.main__single .page__content video, .main__single .page__content figure, .main__single .page__content img, .main__single .page__content picture,
[data-template=package] .page__content video, [data-template=package] .page__content figure, [data-template=package] .page__content img, [data-template=package] .page__content picture,
.main__single .page__content video,
.main__single .page__content figure,
.main__single .page__content img,
.main__single .page__content picture,
#investigation__content video,
#investigation__content figure,
#investigation__content img,
#investigation__content picture {
width: 100%;
}
[data-template=package] .page__content .insert,
.main__single .page__content .insert,
#investigation__content .insert {
max-width: var(--max-w-cards);
@ -1465,28 +1485,37 @@ button.sort[data-sort-type=up] .arrow {
padding: calc(var(--padding-inner) * 3);
}
@media screen and (max-width: 768px) {
[data-template=package] .page__content .insert,
.main__single .page__content .insert,
#investigation__content .insert {
padding: calc(var(--padding-inner) * 1);
}
}
[data-template=package] .page__content .insert,
.main__single .page__content .insert,
#investigation__content .insert {
background-color: var(--grey-800);
}
[data-template=package] .page__content .insert .insert--inner,
.main__single .page__content .insert .insert--inner,
#investigation__content .insert .insert--inner {
max-width: var(--max-w-content);
margin-inline: auto;
}
.main__single .page__content .insert h3, .main__single .page__content .insert h4, .main__single .page__content .insert h5,
[data-template=package] .page__content .insert h3, [data-template=package] .page__content .insert h4, [data-template=package] .page__content .insert h5,
.main__single .page__content .insert h3,
.main__single .page__content .insert h4,
.main__single .page__content .insert h5,
#investigation__content .insert h3,
#investigation__content .insert h4,
#investigation__content .insert h5 {
margin-top: 0;
}
@media screen and (max-width: 768px) {
.main__single .page__content .insert h3, .main__single .page__content .insert h4, .main__single .page__content .insert h5,
[data-template=package] .page__content .insert h3, [data-template=package] .page__content .insert h4, [data-template=package] .page__content .insert h5,
.main__single .page__content .insert h3,
.main__single .page__content .insert h4,
.main__single .page__content .insert h5,
#investigation__content .insert h3,
#investigation__content .insert h4,
#investigation__content .insert h5 {
@ -1494,7 +1523,11 @@ button.sort[data-sort-type=up] .arrow {
margin-bottom: calc(var(--spacing) * 0.75);
}
}
.main__single .page__content > .insert, .main__single .page__content > .swiper, .main__single .page__content > .slider-before-after, .main__single .page__content > figure,
[data-template=package] .page__content > .insert, [data-template=package] .page__content > .swiper, [data-template=package] .page__content > .slider-before-after, [data-template=package] .page__content > figure,
.main__single .page__content > .insert,
.main__single .page__content > .swiper,
.main__single .page__content > .slider-before-after,
.main__single .page__content > figure,
#investigation__content > .insert,
#investigation__content > .swiper,
#investigation__content > .slider-before-after,
@ -1502,7 +1535,11 @@ button.sort[data-sort-type=up] .arrow {
margin-top: calc(var(--spacing) * 2);
margin-bottom: calc(var(--spacing) * 2);
}
.main__single .page__content > .insert + .caption, .main__single .page__content > .swiper + .caption, .main__single .page__content > .slider-before-after + .caption, .main__single .page__content > figure + .caption,
[data-template=package] .page__content > .insert + .caption, [data-template=package] .page__content > .swiper + .caption, [data-template=package] .page__content > .slider-before-after + .caption, [data-template=package] .page__content > figure + .caption,
.main__single .page__content > .insert + .caption,
.main__single .page__content > .swiper + .caption,
.main__single .page__content > .slider-before-after + .caption,
.main__single .page__content > figure + .caption,
#investigation__content > .insert + .caption,
#investigation__content > .swiper + .caption,
#investigation__content > .slider-before-after + .caption,
@ -1626,31 +1663,30 @@ button.sort[data-sort-type=up] .arrow {
font-size: var(--fs-xsmall);
}
@media screen and (min-width: 768px) {
[data-template=home] .pinned-home {
[data-template=home] .pinned-home {
grid-column: span 2;
display: grid;
grid-template-columns: 1fr 1fr;
padding: calc(var(--padding-inner) * 2);
}
[data-template=home] .pinned-home figure,
[data-template=home] .pinned-home picture,
[data-template=home] .pinned-home .video-extract {
}
[data-template=home] .pinned-home figure,
[data-template=home] .pinned-home picture,
[data-template=home] .pinned-home .video-extract {
grid-column: span 2;
display: flex;
width: calc(100% + var(--padding-inner) * 4);
position: relative;
left: calc(var(--padding-inner) * -2);
top: calc(var(--padding-inner) * -2);
}
[data-template=home] .pinned-home .title {
}
[data-template=home] .pinned-home .title {
grid-column: span 2;
font-size: var(--fs-text);
padding-right: 3ch;
margin-bottom: calc(var(--spacing) * 1);
margin-top: calc(var(--spacing) * 0.5);
}
[data-template=home] .pinned-home .description {
}
[data-template=home] .pinned-home .description {
grid-column: 1;
grid-row: 3;
padding-right: 3ch;
@ -1660,17 +1696,17 @@ button.sort[data-sort-type=up] .arrow {
overflow: visible;
font-size: var(--fs-normal);
margin-top: 0px;
}
[data-template=home] .pinned-home dl {
}
[data-template=home] .pinned-home dl {
margin-top: 0px;
grid-column: 2;
grid-row: 3;
}
[data-template=home] .pinned-home .keywords-wrapper {
}
[data-template=home] .pinned-home .keywords-wrapper {
grid-column: span 2;
grid-row: 4;
}
}
.card--package,
.card--article-small {
display: grid;
@ -1768,8 +1804,6 @@ button.sort[data-sort-type=up] .arrow {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: calc(var(--spacing) * 0.25);
display: none;
}
.card--package,
.card--article-small {
@ -2964,17 +2998,39 @@ main .page__header .page__description {
main .page__header .page__description {
max-width: var(--max-w-content);
}
main .page__header ul.details {
display: flex;
gap: 3ch;
list-style: none;
margin-top: calc(var(--spacing) * -1.5);
color: var(--color-txt-light);
}
main .page__header ul.details a {
text-decoration: none;
text-transform: lowercase;
}
main .page__header ul.details a::after {
content: " ↓";
}
main .page__header ul.details li:hover {
color: var(--color-txt);
}
.package__section,
.page__aside {
max-width: var(--max-w-cards);
margin-inline: auto;
padding-top: calc(var(--spacing) * 4);
}
@media screen and (max-width: 768px) {
.package__section,
.page__aside {
padding-top: calc(var(--spacing) * 3);
}
}
.package__section .section__title,
.package__section .aside__title,
.page__aside .section__title,
.page__aside .aside__title {
font-weight: 500;
text-transform: uppercase;
@ -2982,6 +3038,9 @@ main .page__header .page__description {
font-size: 1.2em;
}
@media screen and (max-width: 768px) {
.package__section .section__title,
.package__section .aside__title,
.page__aside .section__title,
.page__aside .aside__title {
font-size: var(--fs-normal);
}
@ -3318,87 +3377,4 @@ main .page__header .page__description {
}
.media figure {
height: auto;
}
.content-package {
max-width: var(--max-w-cards);
margin: 0 auto;
display: grid;
grid-gap: calc(var(--padding-body) * 1.5);
position: relative;
}
.content-package .container-cards {
display: block;
align-self: start;
}
.content-package #section__investigations article {
margin-bottom: calc(var(--spacing) * 1);
}
.content-package .container__title {
font-weight: normal;
font-size: var(--fs-small);
font-weight: 500;
text-transform: uppercase;
margin-bottom: calc(var(--spacing) * 0.75);
}
@media screen and (max-width: 1080px) {
.content-package #section__investigations {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: calc(var(--padding-inner) * 1.5) !important;
margin-bottom: calc(var(--spacing) * 3);
}
.content-package #section__investigations article {
margin-bottom: 0px;
}
.content-package #section__investigations .container__title {
grid-column: span 2;
margin-bottom: 0px;
}
.content-package section:target {
padding-top: calc(var(--header-h) + var(--spacing));
}
}
@media screen and (min-width: 1080px) {
.content-package #nav-package {
display: none;
}
.content-package {
grid-template-columns: 1fr 1fr;
}
.content-package #section__investigations {
display: block;
margin-bottom: 0px;
}
.content-package #section__investigations article {
margin-bottom: calc(var(--spacing) * 1);
}
}
@media screen and (max-width: 768px) {
.content-package {
display: block;
}
.content-package #section__investigations {
display: block;
}
.content-package .container__title {
margin-bottom: calc(var(--spacing) * 0.5) !important;
}
}
#nav-package {
display: flex;
margin-top: calc(var(--spacing) * -1);
margin-bottom: calc(var(--spacing) * 2);
}
#nav-package svg {
width: 10px;
height: 10px;
transform: rotate(90deg);
}
@media screen and (min-width: 1080px) {
#nav-package {
display: none;
}
}/*# sourceMappingURL=style.css.map */

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

File diff suppressed because one or more lines are too long

156
assets/css/template/_package.scss
View file

@ -1,88 +1,88 @@
.content-package {
// max-width: 1300px;
max-width: var(--max-w-cards);
margin: 0 auto;
display: grid;
grid-gap: calc(var(--padding-body) * 1.5);
// grid-template-columns: 60% cacl(40% - var(--padding-body)*1.5);
// .content-package {
// // max-width: 1300px;
// max-width: var(--max-w-cards);
// margin: 0 auto;
// display: grid;
// grid-gap: calc(var(--padding-body) * 1.5);
// // grid-template-columns: 60% cacl(40% - var(--padding-body)*1.5);
position: relative;
// position: relative;
.container-cards {
display: block;
align-self: start;
}
// .container-cards {
// display: block;
// align-self: start;
// }
#section__investigations article {
margin-bottom: calc(var(--spacing) * 1);
}
// #section__investigations article {
// margin-bottom: calc(var(--spacing) * 1);
// }
.container__title {
font-weight: normal;
font-size: var(--fs-small);
font-weight: 500;
// .container__title {
// font-weight: normal;
// font-size: var(--fs-small);
// font-weight: 500;
text-transform: uppercase;
margin-bottom: calc(var(--spacing) * 0.75);
}
// text-transform: uppercase;
// margin-bottom: calc(var(--spacing) * 0.75);
// }
@media #{$medium} {
#section__investigations {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: calc(var(--padding-inner) * 1.5) !important;
margin-bottom: calc(var(--spacing) * 3);
article {
margin-bottom: 0px;
}
.container__title {
grid-column: span 2;
margin-bottom: 0px;
}
}
section:target {
padding-top: calc(var(--header-h) + var(--spacing));
}
}
// @media #{$medium} {
// #section__investigations {
// display: grid;
// grid-template-columns: 1fr 1fr;
// grid-gap: calc(var(--padding-inner) * 1.5) !important;
// margin-bottom: calc(var(--spacing) * 3);
// article {
// margin-bottom: 0px;
// }
// .container__title {
// grid-column: span 2;
// margin-bottom: 0px;
// }
// }
// section:target {
// padding-top: calc(var(--header-h) + var(--spacing));
// }
// }
@media #{$medium-up} {
#nav-package {
display: none;
}
grid-template-columns: 1fr 1fr;
#section__investigations {
display: block;
margin-bottom: 0px;
article {
margin-bottom: calc(var(--spacing) * 1);
}
}
}
// @media #{$medium-up} {
// #nav-package {
// display: none;
// }
// grid-template-columns: 1fr 1fr;
// #section__investigations {
// display: block;
// margin-bottom: 0px;
// article {
// margin-bottom: calc(var(--spacing) * 1);
// }
// }
// }
@media #{$small} {
display: block;
#section__investigations {
display: block;
}
.container__title {
margin-bottom: calc(var(--spacing) * 0.5) !important;
}
}
}
// @media #{$small} {
// display: block;
// #section__investigations {
// display: block;
// }
// .container__title {
// margin-bottom: calc(var(--spacing) * 0.5) !important;
// }
// }
// }
#nav-package {
display: flex;
margin-top: calc(var(--spacing) * -1);
margin-bottom: calc(var(--spacing) * 2);
// #nav-package {
// display: flex;
// margin-top: calc(var(--spacing) * -1);
// margin-bottom: calc(var(--spacing) * 2);
svg {
width: 10px;
height: 10px;
transform: rotate(90deg);
}
}
@media #{$medium-up} {
#nav-package {
display: none;
}
}
// svg {
// width: 10px;
// height: 10px;
// transform: rotate(90deg);
// }
// }
// @media #{$medium-up} {
// #nav-package {
// display: none;
// }
// }

59
assets/js/bottom-bar.js Normal file
View file

@ -0,0 +1,59 @@
export function progressBar(){
const bar = document.getElementById('progressBar');
if (!bar) return;
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
bar.style.width = `${progress}vw`;
}, { passive: true });
}
export function scrollBack(){
const bottomBar = document.getElementById('bottom-bar');
const navInvestigation = document.getElementById('nav-investigation');
const header = document.getElementById('site-header');
const footerEl = document.getElementById('support-bar') || document.getElementById('site-footer');
let lastY = window.scrollY;
let peakY = window.scrollY;
let visible = false;
window.addEventListener('scroll', () => {
const currentY = window.scrollY;
// header : basé uniquement sur la position absolue
if (navInvestigation && header) {
header.classList.toggle('has-nav-investigation', currentY >= 160);
}
// zone footer : bottom-bar masquée et verrouillée
const inFooterZone = footerEl && (currentY + window.innerHeight >= footerEl.offsetTop);
if (inFooterZone) {
if (visible) {
visible = false;
if (bottomBar) bottomBar.classList.remove('is-visible');
}
} else if (currentY > lastY) {
// scroll bas
peakY = currentY;
if (!visible && currentY > 280) {
visible = true;
if (bottomBar) bottomBar.classList.add('is-visible');
}
} else {
// scroll haut : hide après 200px remontés
if (visible && peakY - currentY >= 200) {
visible = false;
if (bottomBar) bottomBar.classList.remove('is-visible');
}
}
lastY = currentY;
}, { passive: true });
}

72
assets/js/investigation.js
View file

@ -1,16 +1,3 @@
export 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) => {
sliderContainer.style.setProperty('--position', `${e.target.value}%`);
});
}
});
}
export function navInvestigation(){
const nav = document.getElementById('nav-investigation');
if (!nav) return;
@ -43,62 +30,3 @@ export function navInvestigation(){
}
export function progressBar(){
const bar = document.getElementById('progressBar');
if (!bar) return;
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
const progress = docHeight > 0 ? (scrollTop / docHeight) * 160 : 0;
bar.style.width = `${progress}%`;
}, { passive: true });
}
export function scrollBack(){
const bottomBar = document.getElementById('bottom-bar');
const navInvestigation = document.getElementById('nav-investigation');
const header = document.getElementById('site-header');
const footerEl = document.getElementById('support-bar') || document.getElementById('site-footer');
let lastY = window.scrollY;
let peakY = window.scrollY;
let visible = false;
window.addEventListener('scroll', () => {
const currentY = window.scrollY;
// header : basé uniquement sur la position absolue
if (navInvestigation && header) {
header.classList.toggle('has-nav-investigation', currentY >= 160);
}
// zone footer : bottom-bar masquée et verrouillée
const inFooterZone = footerEl && (currentY + window.innerHeight >= footerEl.offsetTop);
if (inFooterZone) {
if (visible) {
visible = false;
if (bottomBar) bottomBar.classList.remove('is-visible');
}
} else if (currentY > lastY) {
// scroll bas
peakY = currentY;
if (!visible && currentY > 280) {
visible = true;
if (bottomBar) bottomBar.classList.add('is-visible');
}
} else {
// scroll haut : hide après 200px remontés
if (visible && peakY - currentY >= 200) {
visible = false;
if (bottomBar) bottomBar.classList.remove('is-visible');
}
}
lastY = currentY;
}, { passive: true });
}

8
assets/js/script.js
View file

@ -5,7 +5,9 @@ import { themeToggle } from './themeToggle.js';
import { playVideo } from './hero-video.js';
import { initDropdowns } from './dropdown.js';
import { initSwipers } from './swipers.js';
import { initSliderBeforeAfter, progressBar, scrollBack, navInvestigation } from './investigation.js';
import { initSliderBeforeAfter} from './sliderBeforeAfter.js';
import { navInvestigation } from './investigation.js';
import { progressBar, scrollBack} from './bottom-bar.js';
import { initSort } from './sort.js';
const responsiveMedium = 1080;
@ -19,6 +21,8 @@ window.onload = async function () {
themeToggle();
backToTop();
initSliderBeforeAfter();
copyLink();
playVideo();
initDropdowns(responsiveSmall, responsiveSmallX);
@ -26,7 +30,7 @@ window.onload = async function () {
progressBar();
initSliderBeforeAfter();
scrollBack();
navInvestigation();

11
assets/js/sliderBeforeAfter.js Normal file
View file

@ -0,0 +1,11 @@
export 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) => {
sliderContainer.style.setProperty('--position', `${e.target.value}%`);
});
}
});
}

7
site/blueprints/pages/package.yml
View file

@ -9,6 +9,7 @@ tabs:
label: Visuel de couverture
type: files
multiple: false
required: true
layout: cards
width: 1/3
image:
@ -20,7 +21,11 @@ tabs:
type: writer
width: 2/3
linkedContent:
label: Contenu
label: Enquêtes
type: pages
query: site.find('enquetes').children
linkedImpacts:
label: Impacts
type: pages
query: site.find('impacts').children
seo: seo/page

6
site/config/menu.php
View file

@ -47,13 +47,13 @@ return [
return Str::contains($path, 'pages/news');
}
],
'dossiers' => [
'packages' => [
'label' => 'Dossiers',
'icon' => 'folder',
'link' => 'pages/dossiers',
'link' => 'pages/packages',
'current' => function (string $current): bool {
$path = Kirby\Cms\App::instance()->path();
return Str::contains($path, 'pages/dossiers');
return Str::contains($path, 'pages/packages');
}
],
'laboratoire' => [

5
site/languages/en.php
View file

@ -8,13 +8,18 @@ return [
'url' => '/en',
'translations' => [
'impact.type' => 'Impact',
'impact.type.plural' => 'Impacts',
'impacts.title' => 'Impacts',
'news.type' => 'News',
'news.title' => 'News',
'investigation.type' => 'Investigation',
'investigation.type.plural' => 'Investigations',
'investigations.title' => 'Investigations',
'investigations.related' => 'Related investigations',
'investigations.see_all' => 'See all investigations',
'filter.all' => 'All',
'filter.all.m' => 'All',
'package.type' => 'Folder',
'packages.title' => 'Folders',
],
];

5
site/languages/fr.php
View file

@ -9,13 +9,18 @@ return [
'url' => '/',
'translations' => [
'impact.type' => 'Impact',
'impact.type.plural' => 'Impacts',
'impacts.title' => 'Impacts',
'news.type' => 'Brève',
'news.title' => 'Brèves',
'investigation.type' => 'Enquête',
'investigation.type.plural' => 'Enquêtes',
'investigations.title' => 'Enquêtes',
'investigations.related' => 'Enquêtes liées',
'investigations.see_all' => 'Voir toutes les enquêtes',
'filter.all' => 'Toutes',
'filter.all.m' => 'Tous',
'package.type' => 'Dossier',
'packages.title' => 'Dossiers',
],
];

2
site/snippets/nav.php
View file

@ -20,7 +20,7 @@ de la vérité et de la justice.</p>
<li><a href="#">À propos</a></li> <!-- page à créer -->
<li><a href="/enquêtes">Equêtes</a></li>
<li><a href="/dossiers">Dossiers</a></li>
<li><a href="/packages">Dossiers</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Ressources</a></li>

32
site/templates/investigation.php
View file

@ -350,17 +350,17 @@ if ($relatedInvestigations->isEmpty()) {
<?php
// Récupérer le dossier associé à cette investigation
$packageSlug = $page->package()->value();
$package = null;
if (!empty($packageSlug) && site()->find('dossiers')) {
$package = site()->find('dossiers')->children()->filterBy('slug', $packageSlug)->first();
}
// Récupérer le dossier associé à cette investigation (reverse lookup via linkedContent)
$packagesParent = site()->find('packages');
$package = $packagesParent
? $packagesParent->children()->listed()->filter(fn($p) => $p->linkedContent()->toPages()->has($page))->first()
: null;
if ($package):
$investigationsCount = $package->linkedContent()->toPages()->count();
?>
<aside class="page__aside" id="package">
<h3 class="aside__title">Dans le dossier</h3>
<h3 class="aside__title"><?= t('packages.title') ?></h3>
<article class="card--package">
<?php if ($cover = $package->cover()->toFile()): ?>
@ -369,26 +369,17 @@ if ($package):
</figure>
<?php endif ?>
<div class="content">
<p class="type">Dossier</p>
<p class="type"><?= t('package.type') ?></p>
<h4 class="title"><a href="<?= $package->url() ?>"><span class="icon"><?= svg('assets/icons/package.svg') ?></span><?= $package->title()->esc() ?></a></h4>
<?php
// Compter les enquêtes associées à ce dossier
$investigationsCount = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($package) {
return $investigation->package()->value() === $package->slug();
})->count();
?>
<ul class="details">
<?php if ($investigationsCount > 0): ?>
<ul class="details">
<li><?= $investigationsCount ?> enquête<?= $investigationsCount > 1 ? 's' : '' ?></li>
<?php endif ?>
<li>8 impacts</li>
</ul>
<?php endif ?>
</div>
<button class="btn--go-to"><a href="<?= $package->url() ?>" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="<?= $package->url() ?>" target="_blank" aria-hidden="true"></a>
</article>
</aside>
@ -443,10 +434,7 @@ if ($package):
</main>
<?php snippet('bottom-bar') ?>
<?php snippet('footer') ?>

225
site/templates/package.php
View file

@ -2,212 +2,99 @@
<?php snippet('header') ?>
<main>
<?php
$lang = kirby()->language();
$locale = $lang ? $lang->locale(LC_ALL) : 'fr_FR.UTF-8';
$dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
$investigations = $page->linkedContent()->toPages();
$impacts = $page->linkedImpacts()->toPages();
?>
<header class="page__header">
<p class="page__type">Dossier</p>
<p class="page__type"><?= t('package.type') ?></p>
<h2 class="page__title"><?= $page->title() ?></h2>
<?php if ($page->description()->isNotEmpty()): ?>
<div class="description">
<p><?= $page->description() ?></p>
</div>
<?php if ($investigations->isNotEmpty() || $impacts->isNotEmpty()): ?>
<ul class="details">
<?php if ($investigations->isNotEmpty()): ?>
<li><a href="#investigations"><?= $investigations->count() ?> <?= $investigations->count() > 1 ? t('investigation.type.plural') : t('investigation.type') ?></a></li>
<?php endif ?>
<?php if ($impacts->isNotEmpty()): ?>
<li><a href="#impacts"><?= $impacts->count() ?> <?= $impacts->count() > 1 ? t('impact.type.plural') : t('impact.type') ?></a></li>
<?php endif ?>
</ul>
<?php endif ?>
</header>
<?php
// Récupérer les enquêtes associées à ce dossier
$investigations = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($page) {
return $investigation->package()->value() === $page->slug();
});
?>
<div class="btn--group" id="nav-package">
<button class="btn--small"><a href="#section__investigations">Enquêtes <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>
<button class="btn--small"><a href="#section__impacts">Impacts <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>
<?php if ($page->description()->isNotEmpty()): ?>
<div class="page__content">
<p><?= $page->description() ?></p>
</div>
<?php endif ?>
<div class="content-package">
<?php if ($investigations->isNotEmpty()): ?>
<section class="container-cards" id="section__investigations">
<h3 class="container__title">2 enquêtes</h3>
<div class="package__section" id="investigations">
<h3 class="section__title"><?= t('investigations.title') ?> (<?= $investigations->count() ?>)</h3>
<?php foreach ($investigations as $investigation): ?>
<article class="card--article">
<article class="card--article-small">
<?php if ($cover = $investigation->cover()->toFile()): ?>
<figure>
<img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
</figure>
<?php endif ?>
<div class="content">
<p class="type"><?= t('investigation.type') ?></p>
<h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4>
<?php if ($investigation->incidentDate()->isNotEmpty()): ?>
<time class="date" datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', $dateLocale) ?></time>
<?php endif ?>
<?php if ($investigation->chapo()->isNotEmpty()): ?>
<p class="description"><?= $investigation->chapo()->excerpt(200) ?></p>
<?php endif ?>
<dl class="dl">
<?php if ($investigation->incidentDate()->isNotEmpty()): ?>
<div class="dl__group">
<dt>Date de l'incident</dt>
<dd><time datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time></dd>
</div>
<?php endif ?>
<?php if ($partners = $investigation->partners()->toStructure()): ?>
<?php if ($partners->isNotEmpty()): ?>
<div class="dl__group">
<dt>Partenaire(s)</dt>
<dd>
<?php $partnerNames = [] ?>
<?php foreach ($partners as $partner): ?>
<?php $partnerNames[] = $partner->name()->value() ?>
<?php endforeach ?>
<?= implode(', ', $partnerNames) ?>
</dd>
</div>
<?php endif ?>
<?php endif ?>
<?php if ($investigation->incidentLocation()->isNotEmpty()): ?>
<div class="dl__group">
<dt>Lieu de l'incident</dt>
<dd><?= $investigation->incidentLocation()->esc() ?></dd>
</div>
<?php endif ?>
</dl>
</div>
<?php if ($keywords = $investigation->keywords()->split()): ?>
<div class="keywords-wrapper">
<ul class="keywords">
<?php foreach ($keywords as $keyword): ?>
<li><a href="#keyword" target="_blank"><?= esc($keyword) ?></a></li>
<?php endforeach ?>
</ul>
</div>
<?php endif ?>
<a class="link-block" href="<?= $investigation->url() ?>"></a>
<button class="btn--go-to"><a href="<?= $investigation->url() ?>"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="<?= $investigation->url() ?>" aria-hidden="true"></a>
</article>
<?php endforeach ?>
</section>
<?php else: ?>
<p>Aucune enquête associée à ce dossier pour le moment.</p>
</div>
<?php endif ?>
<?php if ($impacts->isNotEmpty()): ?>
<div class="package__section" id="impacts">
<h3 class="section__title"><?= t('impacts.title') ?> (<?= $impacts->count() ?>)</h3>
<section id="section__impacts">
<?php foreach ($impacts as $impact): ?>
<div class="card--block-small has-link">
<div class="group-top">
<p class="type"><?= t('impact.type') ?></p>
<?php if ($impact->category()->isNotEmpty()): ?>
<p class="category"><?= $impact->category()->esc() ?></p>
<?php endif ?>
</div>
<h4 class="title"><?= $impact->title()->esc() ?></h4>
<h3 class="container__title">4 impacts</h3>
<!-- Contenu statique temporaire -->
<div class="card--impact has-link" data-impact-type="judiciaire">
<div class="card--impact__inner">
<p class="tag">Judiciaire</p>
<p class="date">12 Dec 2025</p>
<div class="content">
<p>La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah".
<?php if ($impact->created()->isNotEmpty()): ?>
<p class="date">
<time datetime="<?= $impact->created()->toDate('yyyy-MM-dd') ?>"><?= $impact->created()->toDate('d MMMM yyyy', $dateLocale) ?></time>
</p>
<?php endif ?>
<button class="btn--go-to">
<a href="<?= $impact->url() ?>"><?= svg('assets/icons/arrow-left.svg') ?></a>
</button>
<a class="link-block" href="<?= $impact->url() ?>" aria-hidden="true"></a>
</div>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
</ul>
</div>
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="#" target="_blank"></a>
</div>
</div>
<div class="card--impact has-link" data-impact-type="judiciaire">
<div class="card--impact__inner">
<p class="tag">Judiciaire</p>
<p class="date">12 Dec 2025</p>
<div class="content">
<p>La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah"
</p>
</div>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
<li><a href="#keyword" target="_blank">Forces armées</a></li>
</ul>
</div>
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="#" target="_blank"></a>
</div>
</div>
<div class="card--impact" data-impact-type="media">
<div class="card--impact__inner">
<p class="tag">Médiatique</p>
<?php snippet('card-open-graph') ?>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Occupation</a></li>
<li><a href="#keyword" target="_blank">Colonialité</a></li>
<li><a href="#keyword" target="_blank">Forces armées</a></li>
</ul>
</div>
</div>
</div>
<div class="card--impact" data-impact-type="public">
<div class="card--impact__inner">
<p class="tag">Judiciaire</p>
<p class="date">12 Dec 2025</p>
<div class="content">
<p>Index présente une série d'enquêtes récentes au Festival du Réel 2025.
</p>
<?php endforeach ?>
</div>
<div class="keywords-wrapper">
<ul class="keywords">
<li><a href="#keyword" target="_blank">Evènement</a></li>
<li><a href="#keyword" target="_blank">Actualité d’Index</a></li>
</ul>
</div>
</div>
</div>
</section>
</div>
<?php endif ?>
</main>

38
site/templates/packages.php
View file

@ -17,41 +17,43 @@
<?php foreach ($page->children()->listed() as $package): ?>
<article class="card--package">
<article class="card--package">
<?php if ($cover = $package->cover()->toFile()): ?>
<figure>
<img src="<?= $cover->url() ?>" alt="<?= $package->title()->esc() ?>">
</figure>
<?php endif ?>
<div class="content">
<p class="type"><?= t('package.type') ?></p>
<h4 class="title"><a href="<?= $package->url() ?>"><span class="icon"><?= svg('assets/icons/package.svg') ?></span><?= $package->title()->esc() ?></a></h4>
<?php if ($package->description()->isNotEmpty()): ?>
<p class="short"><?= $package->description()->excerpt(200) ?></p>
<?php endif ?>
<!-- <?php if ($package->description()->isNotEmpty()): ?>
<p class="description"><?= $package->description()->excerpt(100) ?></p>
<?php endif ?> -->
<?php
// Compter les enquêtes associées à ce dossier
$investigationsCount = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($package) {
return $investigation->package()->value() === $package->slug();
})->count();
$investigationsCount = $package->linkedContent()->toPages()->count();
$impactsCount = $package->linkedImpacts()->toPages()->count();
?>
<ul>
<?php if ($investigationsCount > 0 || $impactsCount > 0): ?>
<ul class="details">
<?php if ($investigationsCount > 0): ?>
<li><?= $investigationsCount ?> enquête<?= $investigationsCount > 1 ? 's' : '' ?></li>
<?php endif ?>
<li>8 impacts</li>
<?php if ($impactsCount > 0): ?>
<li><?= $impactsCount ?> impact<?= $impactsCount > 1 ? 's' : '' ?></li>
<?php endif ?>
</ul>
<?php endif ?>
</div>
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="<?= $package->url() ?>"></a>
</article>
<button class="btn--go-to"><a href="<?= $package->url() ?>" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="<?= $package->url() ?>" target="_blank" aria-hidden="true"></a>
</article>
<?php endforeach ?>
</section>