This commit is contained in:
Julie Blanc
parent
8a4f9d6b64
commit
1ea9f36aa1
9 changed files with 249 additions and 36 deletions
55
assets/css/components/_swipper.scss
Normal file
55
assets/css/components/_swipper.scss
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
#home__investigations{
|
||||
// .col-right{
|
||||
// position: relative;
|
||||
// overflow: visible;
|
||||
// background-color: red;
|
||||
// }
|
||||
|
||||
// .home-investigations-slider{
|
||||
// position: relative;
|
||||
// overflow: hidden;
|
||||
// margin: 0 60px;
|
||||
// }
|
||||
|
||||
// .swiper-button-prev,
|
||||
// .swiper-button-next{
|
||||
// --swiper-navigation-size: 32px;
|
||||
// color: var(--color-txt);
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// transform: translateY(-50%);
|
||||
// z-index: 10;
|
||||
|
||||
// &:after{
|
||||
// font-size: var(--swiper-navigation-size);
|
||||
// }
|
||||
// }
|
||||
|
||||
// .swiper-button-prev{
|
||||
// left: 0;
|
||||
// }
|
||||
|
||||
// .swiper-button-next{
|
||||
// right: 0;
|
||||
// }
|
||||
|
||||
.swiper-slide{
|
||||
padding-left: 60px;
|
||||
padding-right: 60px;
|
||||
}
|
||||
.swiper-pagination{
|
||||
position: relative;
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
|
||||
.swiper-pagination-bullet{
|
||||
width: 15px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-txt-light);
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active{
|
||||
background: var(--color-txt);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1633,6 +1633,24 @@ button.sort[data-sort-type=up] .arrow {
|
|||
aspect-ratio: inherit;
|
||||
}
|
||||
}
|
||||
#home__investigations .swiper-slide {
|
||||
padding-left: 60px;
|
||||
padding-right: 60px;
|
||||
}
|
||||
#home__investigations .swiper-pagination {
|
||||
position: relative;
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
}
|
||||
#home__investigations .swiper-pagination .swiper-pagination-bullet {
|
||||
width: 15px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-txt-light);
|
||||
}
|
||||
#home__investigations .swiper-pagination .swiper-pagination-bullet-active {
|
||||
background: var(--color-txt);
|
||||
}
|
||||
|
||||
#site-header {
|
||||
z-index: var(--z-header);
|
||||
--gap: 3ch;
|
||||
|
|
@ -1956,7 +1974,9 @@ main .page__header .description-medium {
|
|||
}
|
||||
.section--home .section--inner {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
--gap: calc(var(--padding-body)*2);
|
||||
grid-template-columns: repeat(2, calc((100% - var(--gap)) * 0.5));
|
||||
grid-gap: var(--gap);
|
||||
}
|
||||
.section--home .col-left {
|
||||
height: 100%;
|
||||
|
|
@ -1968,7 +1988,6 @@ main .page__header .description-medium {
|
|||
.section--home .col-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: yellow;
|
||||
}
|
||||
.section--home .title-section {
|
||||
font-size: var(--fs-medium);
|
||||
|
|
@ -1983,14 +2002,8 @@ main .page__header .description-medium {
|
|||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
|
||||
#home__investigations .container-cards {
|
||||
max-width: var(--max-w-container);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
grid-gap: calc(var(--padding-body) * 1.5);
|
||||
margin-bottom: 10vh;
|
||||
#home__investigations .card--article .description, #home__investigations .card--article .dl {
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
|
||||
#home__description .section--inner {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -30,7 +30,7 @@
|
|||
@import "components/card-impact";
|
||||
@import "components/card-folder";
|
||||
@import "components/card-open-graph";
|
||||
|
||||
@import "components/swipper";
|
||||
|
||||
@import "partials/site-header";
|
||||
@import "partials/site-menu";
|
||||
|
|
|
|||
|
|
@ -9,7 +9,9 @@
|
|||
|
||||
.section--inner{
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
--gap: calc(var(--padding-body)*2);
|
||||
grid-template-columns: repeat(2, calc((100% - var(--gap))*0.5));
|
||||
grid-gap: var(--gap);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -24,7 +26,6 @@
|
|||
.col-right{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -45,17 +46,18 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#home__investigations{
|
||||
.container-cards{
|
||||
max-width: var(--max-w-container);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
grid-gap: calc(var(--padding-body)*1.5);
|
||||
margin-bottom: 10vh;
|
||||
|
||||
.card--article{
|
||||
.description, .dl{
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
#home__description{
|
||||
|
||||
|
||||
|
|
|
|||
47
assets/js/home-investigations-slider.js
Normal file
47
assets/js/home-investigations-slider.js
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs';
|
||||
|
||||
export function initHomeInvestigationsSlider() {
|
||||
const slider = document.querySelector('.home-investigations-slider');
|
||||
|
||||
if (!slider) {
|
||||
return;
|
||||
}
|
||||
|
||||
const swiper = new Swiper('.home-investigations-slider', {
|
||||
// Optional parameters
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 20,
|
||||
speed: 600,
|
||||
|
||||
// Touch/Swipe settings
|
||||
touchRatio: 1,
|
||||
touchAngle: 45,
|
||||
grabCursor: true,
|
||||
simulateTouch: true,
|
||||
allowTouchMove: true,
|
||||
|
||||
// Navigation arrows
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
|
||||
// Pagination
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
|
||||
// Keyboard control
|
||||
keyboard: {
|
||||
enabled: true,
|
||||
},
|
||||
|
||||
// Accessibility
|
||||
a11y: {
|
||||
prevSlideMessage: 'Investigation précédente',
|
||||
nextSlideMessage: 'Investigation suivante',
|
||||
paginationBulletMessage: 'Aller à l\'investigation {{index}}',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@ import { themeToggle } from './themeToggle.js';
|
|||
import { initHeroSlider } from './hero-slider.js';
|
||||
import { playVideo } from './hero-video.js';
|
||||
import { initDropdowns } from './dropdown.js';
|
||||
import { initHomeInvestigationsSlider } from './home-investigations-slider.js';
|
||||
|
||||
const responsiveMedium = 1080;
|
||||
const responsiveSmall = 768;
|
||||
|
|
@ -24,4 +25,5 @@ window.onload = async function () {
|
|||
initHeroSlider();
|
||||
playVideo();
|
||||
initDropdowns(responsiveSmall);
|
||||
initHomeInvestigationsSlider();
|
||||
}
|
||||
|
|
@ -16,12 +16,6 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="section--home" id="home__investigations">
|
||||
<div class="section--inner">
|
||||
|
||||
|
|
@ -40,12 +34,15 @@
|
|||
|
||||
<div class="col-right">
|
||||
|
||||
|
||||
<div class="home-investigations-slider swiper">
|
||||
<div class="swiper-wrapper">
|
||||
|
||||
<?php
|
||||
$latestInvestigations = site()->find('enquetes')->children()->listed()->sortBy('created', 'desc')->limit(3);
|
||||
foreach ($latestInvestigations as $investigation):
|
||||
?>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<article class="card--article">
|
||||
|
||||
<?php if ($cover = $investigation->cover()->toFile()): ?>
|
||||
|
|
@ -113,9 +110,18 @@ foreach ($latestInvestigations as $investigation):
|
|||
|
||||
<a class="link-block" href="<?= $investigation->url() ?>"></a>
|
||||
</article>
|
||||
</div>
|
||||
<?php endforeach ?>
|
||||
|
||||
</div> <!-- swiper-wrapper -->
|
||||
|
||||
<!-- Navigation buttons -->
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div> <!-- home-investigations-slider -->
|
||||
|
||||
</div> <!-- col-right-->
|
||||
</div>
|
||||
|
|
@ -148,10 +154,55 @@ foreach ($latestInvestigations as $investigation):
|
|||
</div>
|
||||
|
||||
<div class="col-right">
|
||||
|
||||
<!-- Contenu statique temporaire - sera dynamique quand les pages impacts seront créées -->
|
||||
<div class="card--impact" data-impact-type="media">
|
||||
<p class="tag">Médiatique</p>
|
||||
<div class="content">
|
||||
<p>12 articles et reprises</p>
|
||||
<p>1.5M de vues cumulées</p>
|
||||
</div>
|
||||
<details class="open-graph__details">
|
||||
<summary><p class="summary-inner">Détails <span class="arrow-details"><?= svg('assets/icons/arrow-details.svg') ?></span><p></summary>
|
||||
<div class="open-graph__inner">
|
||||
<?php snippet('card-open-graph') ?>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="card--impact" data-impact-type="judiciaire">
|
||||
<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>
|
||||
|
||||
<div class="card--impact" data-impact-type="judiciaire">
|
||||
<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>
|
||||
|
||||
|
||||
</div><!-- col-right -->
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="section--home" id="home__folders">
|
||||
<div class="section--inner">
|
||||
|
||||
|
|
@ -169,9 +220,54 @@ foreach ($latestInvestigations as $investigation):
|
|||
</div>
|
||||
|
||||
<div class="col-right">
|
||||
|
||||
<?php
|
||||
$latestFolders = site()->find('dossiers') ? site()->find('dossiers')->children()->listed()->sortBy('created', 'desc')->limit(2) : [];
|
||||
if (count($latestFolders) > 0):
|
||||
foreach ($latestFolders as $folder):
|
||||
?>
|
||||
<article class="card--folder">
|
||||
|
||||
<?php if ($cover = $folder->cover()->toFile()): ?>
|
||||
<figure>
|
||||
<img src="<?= $cover->url() ?>" alt="<?= $folder->title()->esc() ?>">
|
||||
</figure>
|
||||
<?php endif ?>
|
||||
|
||||
<div class="content">
|
||||
<h4 class="title"><a href="<?= $folder->url() ?>"><?= $folder->title()->esc() ?></a></h4>
|
||||
|
||||
<?php if ($folder->description()->isNotEmpty()): ?>
|
||||
<p class="short"><?= $folder->description()->excerpt(200) ?></p>
|
||||
<?php endif ?>
|
||||
|
||||
<?php
|
||||
// Compter les enquêtes associées à ce dossier
|
||||
$investigationsCount = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($folder) {
|
||||
return $investigation->folder()->value() === $folder->slug();
|
||||
})->count();
|
||||
?>
|
||||
|
||||
<ul>
|
||||
<?php if ($investigationsCount > 0): ?>
|
||||
<li><?= $investigationsCount ?> enquête<?= $investigationsCount > 1 ? 's' : '' ?></li>
|
||||
<?php endif ?>
|
||||
<li>8 impacts</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<button class="btn--go-to"><a href="<?= $folder->url() ?>" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="<?= $folder->url() ?>"></a>
|
||||
</article>
|
||||
<?php endforeach ?>
|
||||
<?php endif ?>
|
||||
|
||||
</div> <!-- col-right -->
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
<?php snippet('footer') ?>
|
||||
|
|
@ -33,8 +33,6 @@
|
|||
<?php foreach ($page->children()->listed() as $investigation): ?>
|
||||
<article class="card--article">
|
||||
|
||||
|
||||
|
||||
<?php if ($cover = $investigation->cover()->toFile()): ?>
|
||||
<figure>
|
||||
<img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue