This commit is contained in:
Julie Blanc
parent
b3f985a41b
commit
453b29c246
11 changed files with 184 additions and 54 deletions
|
|
@ -9,9 +9,10 @@
|
|||
--swiper-navigation-size: 32px;
|
||||
color: var(--color-txt);
|
||||
background-color: var(--color-bg);
|
||||
background-color: red;
|
||||
height: 100%;
|
||||
width: var(--slide-padding);
|
||||
top: 0px!important;
|
||||
height: calc(100% - var(--spacing)*1);
|
||||
// background-color: red;
|
||||
|
||||
svg {
|
||||
|
|
@ -28,13 +29,13 @@
|
|||
}
|
||||
|
||||
.swiper-button-prev {
|
||||
left: 0px;
|
||||
left: 0px!important;
|
||||
top: 0px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.swiper-button-next {
|
||||
right: 0px;
|
||||
right: 0px!important;
|
||||
top: 0px;
|
||||
justify-content: flex-end;
|
||||
|
||||
|
|
@ -47,7 +48,8 @@
|
|||
|
||||
.swiper-pagination {
|
||||
position: relative;
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
margin-top: 0px!important;
|
||||
margin-top: calc(var(--spacing)*0.5)!important;
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
width: 15px;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
|
||||
#site-title {
|
||||
flex-grow: 2;
|
||||
opacity: 0;
|
||||
// opacity: 0;
|
||||
svg{
|
||||
width: 100px;
|
||||
@media #{$small}{
|
||||
|
|
|
|||
|
|
@ -178,7 +178,6 @@ body.is-hidden .btn--back-to-top {
|
|||
}
|
||||
#site-header #site-title {
|
||||
flex-grow: 2;
|
||||
opacity: 0;
|
||||
}
|
||||
#site-header #site-title svg {
|
||||
width: 100px;
|
||||
|
|
@ -2131,9 +2130,10 @@ button.sort[data-sort-type=up] .arrow {
|
|||
--swiper-navigation-size: 32px;
|
||||
color: var(--color-txt);
|
||||
background-color: var(--color-bg);
|
||||
background-color: red;
|
||||
height: 100%;
|
||||
width: var(--slide-padding);
|
||||
top: 0px !important;
|
||||
height: calc(100% - var(--spacing) * 1);
|
||||
}
|
||||
.swiper .swiper-button-prev svg,
|
||||
.swiper .swiper-button-next svg {
|
||||
|
|
@ -2148,12 +2148,12 @@ button.sort[data-sort-type=up] .arrow {
|
|||
opacity: 0.05;
|
||||
}
|
||||
.swiper .swiper-button-prev {
|
||||
left: 0px;
|
||||
left: 0px !important;
|
||||
top: 0px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.swiper .swiper-button-next {
|
||||
right: 0px;
|
||||
right: 0px !important;
|
||||
top: 0px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
|
@ -2163,7 +2163,8 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
.swiper .swiper-pagination {
|
||||
position: relative;
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-top: 0px !important;
|
||||
margin-top: calc(var(--spacing) * 0.5) !important;
|
||||
}
|
||||
.swiper .swiper-pagination .swiper-pagination-bullet {
|
||||
width: 15px;
|
||||
|
|
@ -2283,7 +2284,6 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
#site-header #site-title {
|
||||
flex-grow: 2;
|
||||
opacity: 0;
|
||||
}
|
||||
#site-header #site-title svg {
|
||||
width: 100px;
|
||||
|
|
@ -2677,7 +2677,6 @@ main .page__header .description-medium {
|
|||
#home__investigations .card--article .time-alone {
|
||||
display: block;
|
||||
}
|
||||
#home__investigations .card--article .description,
|
||||
#home__investigations .card--article .dl,
|
||||
#home__investigations .card--article .pin {
|
||||
display: none;
|
||||
|
|
@ -2782,6 +2781,7 @@ main .page__header .description-medium {
|
|||
}
|
||||
[data-template=investigation-summary] main #section__synthese {
|
||||
max-width: var(--max-w-content);
|
||||
margin-inline: auto;
|
||||
}
|
||||
[data-template=investigation-summary] main #section__synthese p + p {
|
||||
margin-top: 0.5em;
|
||||
|
|
@ -2893,6 +2893,25 @@ main .page__header .description-medium {
|
|||
left: 0px;
|
||||
}
|
||||
}
|
||||
.arrow-report {
|
||||
font-size: 14px;
|
||||
color: var(--color-txt-light);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.media-anchor {
|
||||
width: 100%;
|
||||
height: 0px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.media-anchor .arrow-report {
|
||||
position: relative;
|
||||
left: 50px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
[data-template=report] .report__header {
|
||||
margin-inline: auto;
|
||||
|
|
@ -2903,7 +2922,7 @@ main .page__header .description-medium {
|
|||
[data-template=report] .report__content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: var(--padding-body);
|
||||
grid-gap: calc(var(--padding-body) * 2.5);
|
||||
z-index: calc(var(--z-header) - 100);
|
||||
}
|
||||
[data-template=report] .report__content .report__txt {
|
||||
|
|
@ -2920,6 +2939,20 @@ main .page__header .description-medium {
|
|||
grid-column: 2;
|
||||
min-height: 100px;
|
||||
}
|
||||
[data-template=report] .report__content #arrow__medias {
|
||||
z-index: calc(var(--z-header) - 100);
|
||||
position: sticky;
|
||||
top: calc(var(--header-h) + var(--padding-body));
|
||||
align-self: start;
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
transform: rotate(180deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
[data-template=report] .report__content #arrow__medias span {
|
||||
position: relative;
|
||||
left: 26px;
|
||||
}
|
||||
[data-template=report] #toggle-panel {
|
||||
position: fixed;
|
||||
top: var(--header-h);
|
||||
|
|
@ -3049,6 +3082,8 @@ main .page__header .description-medium {
|
|||
margin-bottom: var(--spacing);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
}
|
||||
.report__content p {
|
||||
margin: calc(var(--spacing) * 0.5) 0;
|
||||
|
|
@ -3071,6 +3106,10 @@ main .page__header .description-medium {
|
|||
font-size: var(--fs-small);
|
||||
line-height: 1.1;
|
||||
}
|
||||
.media .swiper {
|
||||
width: calc(100% - 60px);
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
#toggle-panel {
|
||||
width: calc(var(--h-block) * 1);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -144,14 +144,11 @@
|
|||
}
|
||||
|
||||
.card--article {
|
||||
// align-items: flex-start;
|
||||
// justify-content: flex-start;
|
||||
|
||||
.time-alone {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.description,
|
||||
.dl,
|
||||
.pin {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@
|
|||
#section__synthese {
|
||||
|
||||
max-width: var(--max-w-content);
|
||||
margin-inline: auto;
|
||||
|
||||
p+p {
|
||||
margin-top: 0.5em;
|
||||
|
|
|
|||
|
|
@ -49,6 +49,29 @@
|
|||
}
|
||||
|
||||
|
||||
.arrow-report{
|
||||
font-size: 14px;
|
||||
color: var(--color-txt-light);
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
}
|
||||
|
||||
.media-anchor{
|
||||
width: 100%;
|
||||
height: 0px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.arrow-report{
|
||||
position: relative;
|
||||
left: 50px;
|
||||
top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media #{$small-up}{
|
||||
[data-template="report"] {
|
||||
|
|
@ -64,7 +87,7 @@
|
|||
.report__content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: var(--padding-body);
|
||||
grid-gap: calc(var(--padding-body)*2.5);
|
||||
z-index: calc(var(--z-header) - 100);
|
||||
|
||||
.report__txt {
|
||||
|
|
@ -83,6 +106,24 @@
|
|||
grid-column: 2;
|
||||
// border: var(--border-light);
|
||||
min-height: 100px;
|
||||
|
||||
}
|
||||
|
||||
#arrow__medias{
|
||||
z-index: calc(var(--z-header) - 100);
|
||||
position: sticky;
|
||||
top: calc(var(--header-h) + var(--padding-body));
|
||||
align-self: start;
|
||||
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
transform: rotate(180deg);
|
||||
transform-origin: center;
|
||||
|
||||
span{
|
||||
position: relative;
|
||||
left: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -255,6 +296,8 @@
|
|||
margin-bottom: var(--spacing);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -286,6 +329,10 @@
|
|||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.swiper{
|
||||
width: calc(100% - 60px);
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -4,14 +4,18 @@ import { initSwipers } from './swipers.js';
|
|||
export function report(responsiveSmall) {
|
||||
if (document.body.dataset.template === 'report') {
|
||||
|
||||
// Initialiser tous les sliders et swipers de la page
|
||||
// Initialiser tous les sliders de type before-after
|
||||
initSliderBeforeAfter();
|
||||
initSwipers();
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Sur desktop : initMediaDisplay va gérer les media dynamiquement
|
||||
// Les swipers seront initialisés au moment de l'insertion dans #report__medias
|
||||
initMediaDisplay();
|
||||
}
|
||||
}
|
||||
|
|
@ -62,12 +66,7 @@ function initMediaDisplay() {
|
|||
const anchor = document.createElement('div');
|
||||
anchor.className = 'media-anchor';
|
||||
anchor.dataset.mediaId = media.id;
|
||||
|
||||
// Style visuel pour debug (carré rouge de 10px)
|
||||
anchor.style.width = '10px';
|
||||
anchor.style.height = '10px';
|
||||
anchor.style.backgroundColor = 'red';
|
||||
anchor.style.position = 'relative';
|
||||
anchor.innerHTML = '<span class="arrow-report">▶</span>'
|
||||
|
||||
// Vérifier si le media est précédé d'un titre
|
||||
let previousElement = media.previousElementSibling;
|
||||
|
|
@ -96,8 +95,12 @@ function initMediaDisplay() {
|
|||
|
||||
// 2. Fonction pour trouver et afficher le media le plus proche de la ligne de déclenchement
|
||||
let currentMediaId = null;
|
||||
let isUpdating = false; // Flag pour éviter les mises à jour simultanées
|
||||
|
||||
function updateActiveMedia() {
|
||||
// Éviter les mises à jour simultanées
|
||||
if (isUpdating) return;
|
||||
|
||||
// Trouver l'ancre qui est la plus proche de la ligne de déclenchement (totalOffset du haut)
|
||||
let closestAnchor = null;
|
||||
let closestDistance = Infinity;
|
||||
|
|
@ -128,16 +131,29 @@ function initMediaDisplay() {
|
|||
const mediaData = mediaElements.find(m => m.anchor === closestAnchor);
|
||||
|
||||
if (mediaData) {
|
||||
isUpdating = true;
|
||||
|
||||
// Utiliser requestAnimationFrame pour éviter les conflits de reflow
|
||||
requestAnimationFrame(() => {
|
||||
// Vider le conteneur
|
||||
reportMedias.innerHTML = '';
|
||||
|
||||
// Ajouter le nouveau media
|
||||
reportMedias.appendChild(mediaData.media.cloneNode(true));
|
||||
const newMediaElement = mediaData.media.cloneNode(true);
|
||||
reportMedias.appendChild(newMediaElement);
|
||||
currentMediaId = mediaId;
|
||||
|
||||
// Réinitialiser les sliders et swipers dans le media nouvellement inséré
|
||||
// Attendre le prochain frame pour initialiser les sliders/swipers
|
||||
requestAnimationFrame(() => {
|
||||
initSliderBeforeAfter(reportMedias);
|
||||
initSwipers(reportMedias);
|
||||
|
||||
// Débloquer les mises à jour après un court délai
|
||||
setTimeout(() => {
|
||||
isUpdating = false;
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// Aucune ancre n'a encore franchi la ligne, vider le conteneur
|
||||
|
|
|
|||
|
|
@ -30,5 +30,5 @@ window.onload = async function () {
|
|||
initHeroSlider();
|
||||
playVideo();
|
||||
initDropdowns(responsiveSmall);
|
||||
// initSwipers();
|
||||
initSwipers();
|
||||
}
|
||||
|
|
@ -61,11 +61,12 @@
|
|||
|
||||
<h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4>
|
||||
|
||||
<time class="time-alone" datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time>
|
||||
|
||||
<?php if ($investigation->chapo()->isNotEmpty()): ?>
|
||||
<p class="description"><?= $investigation->chapo()->excerpt(200) ?></p>
|
||||
<?php endif ?>
|
||||
|
||||
<time class="time-alone" datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -134,54 +135,81 @@
|
|||
|
||||
<div class="col-right">
|
||||
|
||||
<div class="card--impact" data-impact-type="media">
|
||||
<!-- Contenu statique temporaire -->
|
||||
<div class="card--impact" data-impact-type="media">
|
||||
<div class="card--impact__inner">
|
||||
<p class="tag">Médiatique</p>
|
||||
<div class="content">
|
||||
<?php snippet('card-open-graph') ?>
|
||||
|
||||
</div>
|
||||
<?php snippet('card-open-graph') ?>
|
||||
<ul class="investigations">
|
||||
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
|
||||
<li><a href="/enquetes/l-homicide-de-nahel-merzouk"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L’homicide de Nahel Merzouk</a></li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<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 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>
|
||||
|
||||
<ul class="investigations">
|
||||
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
<ul class="investigations">
|
||||
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
|
||||
</ul>
|
||||
<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 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><!-- col-right -->
|
||||
<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><!-- col-right -->
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -127,9 +127,9 @@
|
|||
|
||||
|
||||
<div class="report__content">
|
||||
<div id="arrow__medias" class="arrow-report"><span>▶</span></div>
|
||||
|
||||
<div class="report__medias" id="report__medias">
|
||||
<!-- <span class="arrow">▶</span> -->
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue