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

add slider
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-27 19:58:53 +01:00
parent 8a4f9d6b64
commit 1ea9f36aa1
9 changed files with 249 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

55
assets/css/components/_swipper.scss Normal file
View 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);
}
}
}

33
assets/css/style.css
View file

@ -1633,6 +1633,24 @@ button.sort[data-sort-type=up] .arrow {
aspect-ratio: inherit; 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 { #site-header {
z-index: var(--z-header); z-index: var(--z-header);
--gap: 3ch; --gap: 3ch;
@ -1956,7 +1974,9 @@ main .page__header .description-medium {
} }
.section--home .section--inner { .section--home .section--inner {
display: grid; 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 { .section--home .col-left {
height: 100%; height: 100%;
@ -1968,7 +1988,6 @@ main .page__header .description-medium {
.section--home .col-right { .section--home .col-right {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: yellow;
} }
.section--home .title-section { .section--home .title-section {
font-size: var(--fs-medium); font-size: var(--fs-medium);
@ -1983,14 +2002,8 @@ main .page__header .description-medium {
margin-bottom: calc(var(--spacing) * 1.5); margin-bottom: calc(var(--spacing) * 1.5);
} }
#home__investigations .container-cards { #home__investigations .card--article .description, #home__investigations .card--article .dl {
max-width: var(--max-w-container); font-size: var(--fs-small);
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__description .section--inner { #home__description .section--inner {

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

@ -30,7 +30,7 @@
@import "components/card-impact"; @import "components/card-impact";
@import "components/card-folder"; @import "components/card-folder";
@import "components/card-open-graph"; @import "components/card-open-graph";
@import "components/swipper";
@import "partials/site-header"; @import "partials/site-header";
@import "partials/site-menu"; @import "partials/site-menu";

22
assets/css/template/_home.scss
View file

@ -9,7 +9,9 @@
.section--inner{ .section--inner{
display: grid; 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{ .col-right{
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: yellow;
} }
@ -45,16 +46,17 @@
} }
#home__investigations{ #home__investigations{
.container-cards{
max-width: var(--max-w-container); .card--article{
margin: 0 auto; .description, .dl{
display: grid; font-size: var(--fs-small);
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__description{ #home__description{

47
assets/js/home-investigations-slider.js Normal file
View 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}}',
},
});
}

2
assets/js/script.js
View file

@ -7,6 +7,7 @@ import { themeToggle } from './themeToggle.js';
import { initHeroSlider } from './hero-slider.js'; import { initHeroSlider } from './hero-slider.js';
import { playVideo } from './hero-video.js'; import { playVideo } from './hero-video.js';
import { initDropdowns } from './dropdown.js'; import { initDropdowns } from './dropdown.js';
import { initHomeInvestigationsSlider } from './home-investigations-slider.js';
const responsiveMedium = 1080; const responsiveMedium = 1080;
const responsiveSmall = 768; const responsiveSmall = 768;
@ -24,4 +25,5 @@ window.onload = async function () {
initHeroSlider(); initHeroSlider();
playVideo(); playVideo();
initDropdowns(responsiveSmall); initDropdowns(responsiveSmall);
initHomeInvestigationsSlider();
} }

118
site/templates/home.php
View file

@ -16,12 +16,6 @@
<section class="section--home" id="home__investigations"> <section class="section--home" id="home__investigations">
<div class="section--inner"> <div class="section--inner">
@ -40,12 +34,15 @@
<div class="col-right"> <div class="col-right">
<div class="home-investigations-slider swiper">
<div class="swiper-wrapper">
<?php <?php
$latestInvestigations = site()->find('enquetes')->children()->listed()->sortBy('created', 'desc')->limit(3); $latestInvestigations = site()->find('enquetes')->children()->listed()->sortBy('created', 'desc')->limit(3);
foreach ($latestInvestigations as $investigation): foreach ($latestInvestigations as $investigation):
?> ?>
<div class="swiper-slide">
<article class="card--article"> <article class="card--article">
<?php if ($cover = $investigation->cover()->toFile()): ?> <?php if ($cover = $investigation->cover()->toFile()): ?>
@ -113,9 +110,18 @@ foreach ($latestInvestigations as $investigation):
<a class="link-block" href="<?= $investigation->url() ?>"></a> <a class="link-block" href="<?= $investigation->url() ?>"></a>
</article> </article>
</div>
<?php endforeach ?> <?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> <!-- col-right-->
</div> </div>
@ -148,10 +154,55 @@ foreach ($latestInvestigations as $investigation):
</div> </div>
<div class="col-right"> <div class="col-right">
</div>
</div> <!-- 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>
<section class="section--home" id="home__folders"> <section class="section--home" id="home__folders">
<div class="section--inner"> <div class="section--inner">
@ -169,9 +220,54 @@ foreach ($latestInvestigations as $investigation):
</div> </div>
<div class="col-right"> <div class="col-right">
</div>
</div> <?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> </section>
</main> </main>
<?php snippet('footer') ?> <?php snippet('footer') ?>

4
site/templates/investigations.php
View file

@ -32,9 +32,7 @@
<?php foreach ($page->children()->listed() as $investigation): ?> <?php foreach ($page->children()->listed() as $investigation): ?>
<article class="card--article"> <article class="card--article">
<?php if ($cover = $investigation->cover()->toFile()): ?> <?php if ($cover = $investigation->cover()->toFile()): ?>
<figure> <figure>
<img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>"> <img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">