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

pinned invesetigations front
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-19 16:25:44 +01:00
parent 347c45bc22
commit f1ace8cc05
7 changed files with 338 additions and 159 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/css/base/_var.scss
View file

@ -29,7 +29,7 @@
--leading-tight: 1.05; --leading-tight: 1.05;
--leading-normal: 1.3; --leading-normal: 1.3;
--leading-title: 1.1; --leading-title: 1.2;
// --leading-relaxed: 1.4; // --leading-relaxed: 1.4;
// --leading-loose: 1.8; // --leading-loose: 1.8;

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

@ -6,16 +6,26 @@
padding: var(--padding-inner); padding: var(--padding-inner);
@include figure-16-9(); @include figure-16-9();
@include pin(); @include pin();
& > figure{ & > figure,
.video-extract{
width: calc(100% + var(--padding-inner)*2); width: calc(100% + var(--padding-inner)*2);
position: relative; position: relative;
left: calc(var(--padding-inner)*-1); left: calc(var(--padding-inner)*-1);
top: calc(var(--padding-inner)*-1); top: calc(var(--padding-inner)*-1);
}
.video-extract video{
width: 100%;
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
position: relative;
} }
.content{ .content{
@ -41,13 +51,13 @@
line-height: var(--leading-title); line-height: var(--leading-title);
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
text-wrap: balance; // text-wrap: balance;
a{ text-decoration: none;} a{ text-decoration: none;}
} }
.description{ .description{
margin-top: calc(var(--spacing)*0.5); margin-top: calc(var(--spacing)*1.25);
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -56,14 +66,18 @@
} }
.dl{ .dl{
margin-top: calc(var(--spacing)*0.5); margin-top: calc(var(--spacing)*0.75);
// font-size: var(--fs-small); // font-size: var(--fs-small);
border-bottom: var(--border-light);
font-size: var(--fs-small); font-size: var(--fs-small);
flex-grow: 2;
.dl__group{ .dl__group{
@include grid-content(); @include grid-content();
border-top: var(--border-light); border-top: var(--border-light);
padding: calc(var(--spacing)*0.5) 0; padding: calc(var(--spacing)*0.5) 0;
&:last-of-type{
border-bottom: var(--border-light);
}
} }
dt{ dt{
@ -90,8 +104,111 @@
z-index: 2000; z-index: 2000;
} }
.keywords-wrapper{
padding-top: calc(var(--spacing)*0.75);
z-index: 100;
.keywords li a{
font-size: var(--fs-xsmall);
}
}
} }
[data-template="home"] .pinned-home{
grid-column: span 2;
display: grid;
grid-template-columns: 1fr 1fr;
padding: calc(var(--padding-inner)*2);
figure,
picture,
.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);
}
.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);
}
.description{
grid-column: 1;
grid-row: 3;
padding-right: 3ch;
display: block;
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
overflow: visible;
font-size: var(--fs-normal);
margin-top: 0px;
}
dl{
margin-top: 0px;
grid-column: 2;
grid-row: 3;
}
.keywords-wrapper{
grid-column: span 2;
grid-row: 4;
}
}
// .card--article:first-of-type{
// grid-column: span 2;
// display: grid;
// grid-template-columns: 1fr 1fr;
// figure,
// picture{
// grid-column: span 2;
// }
// .title{
// grid-column: span 2;
// font-size: var(--fs-medium);
// padding-right: 3ch;
// margin-bottom: calc(var(--spacing)*1);
// }
// .description{
// grid-column: 1;
// grid-row: 3;
// padding-right: 3ch;
// display: block;
// -webkit-line-clamp: unset;
// -webkit-box-orient: unset;
// overflow: visible;
// }
// dl{
// grid-column: 2;
// grid-row: 3;
// }
// .keywords-wrapper{
// grid-column: 2;
// grid-row: 4;
// }
// }

114
assets/css/style.css
View file

@ -23,7 +23,7 @@
:root { :root {
--leading-tight: 1.05; --leading-tight: 1.05;
--leading-normal: 1.3; --leading-normal: 1.3;
--leading-title: 1.1; --leading-title: 1.2;
--fw-normal: 400; --fw-normal: 400;
--fw-medium: 500; --fw-medium: 500;
--fw-bold: 600; --fw-bold: 600;
@ -1196,12 +1196,21 @@ button.sort[data-sort-type=up] .arrow {
height: 100%; height: 100%;
fill: var(--color-txt); fill: var(--color-txt);
} }
.card--article > figure { .card--article > figure,
.card--article .video-extract {
width: calc(100% + var(--padding-inner) * 2); width: calc(100% + var(--padding-inner) * 2);
position: relative; position: relative;
left: calc(var(--padding-inner) * -1); left: calc(var(--padding-inner) * -1);
top: calc(var(--padding-inner) * -1); top: calc(var(--padding-inner) * -1);
} }
.card--article .video-extract video {
width: 100%;
width: 100%;
aspect-ratio: 16/9;
-o-object-fit: cover;
object-fit: cover;
position: relative;
}
.card--article .content { .card--article .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -1222,13 +1231,12 @@ button.sort[data-sort-type=up] .arrow {
line-height: var(--leading-title); line-height: var(--leading-title);
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
text-wrap: balance;
} }
.card--article .title a { .card--article .title a {
text-decoration: none; text-decoration: none;
} }
.card--article .description { .card--article .description {
margin-top: calc(var(--spacing) * 0.5); margin-top: calc(var(--spacing) * 1.25);
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -1236,9 +1244,9 @@ button.sort[data-sort-type=up] .arrow {
font-size: var(--fs-small); font-size: var(--fs-small);
} }
.card--article .dl { .card--article .dl {
margin-top: calc(var(--spacing) * 0.5); margin-top: calc(var(--spacing) * 0.75);
border-bottom: var(--border-light);
font-size: var(--fs-small); font-size: var(--fs-small);
flex-grow: 2;
} }
.card--article .dl .dl__group { .card--article .dl .dl__group {
display: grid; display: grid;
@ -1248,6 +1256,9 @@ button.sort[data-sort-type=up] .arrow {
border-top: var(--border-light); border-top: var(--border-light);
padding: calc(var(--spacing) * 0.5) 0; padding: calc(var(--spacing) * 0.5) 0;
} }
.card--article .dl .dl__group:last-of-type {
border-bottom: var(--border-light);
}
.card--article .dl dt { .card--article .dl dt {
color: var(--color-txt-light); color: var(--color-txt-light);
padding-right: 1ch; padding-right: 1ch;
@ -1265,6 +1276,57 @@ button.sort[data-sort-type=up] .arrow {
.card--article .link-block { .card--article .link-block {
z-index: 2000; z-index: 2000;
} }
.card--article .keywords-wrapper {
padding-top: calc(var(--spacing) * 0.75);
z-index: 100;
}
.card--article .keywords-wrapper .keywords li a {
font-size: var(--fs-xsmall);
}
[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 {
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 {
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 {
grid-column: 1;
grid-row: 3;
padding-right: 3ch;
display: block;
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
overflow: visible;
font-size: var(--fs-normal);
margin-top: 0px;
}
[data-template=home] .pinned-home dl {
margin-top: 0px;
grid-column: 2;
grid-row: 3;
}
[data-template=home] .pinned-home .keywords-wrapper {
grid-column: span 2;
grid-row: 4;
}
.card--package, .card--package,
.card--article-small { .card--article-small {
@ -2322,9 +2384,8 @@ main .page__header .description {
margin-bottom: calc(var(--spacing) * 4); margin-bottom: calc(var(--spacing) * 4);
padding-top: calc(var(--spacing) * 4); padding-top: calc(var(--spacing) * 4);
display: grid; display: grid;
--gap: calc(var(--padding-body)*2); grid-template-columns: minmax(360px, 1fr) 2fr;
grid-template-columns: 1fr 2fr; grid-gap: calc(var(--padding-body) * 3);
grid-gap: var(--gap);
} }
.section--home .col-left { .section--home .col-left {
align-self: start; align-self: start;
@ -2352,44 +2413,15 @@ main .page__header .description {
} }
} }
#home__investigations .section--inner {
padding-top: calc(var(--spacing) * 1.5);
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
#home__investigations .col-right { #home__investigations .col-right {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: var(--padding-body); gap: var(--padding-body);
} }
#home__investigations .col-right .card--article:first-of-type {
grid-column: span 2;
display: grid;
grid-template-columns: 1fr 1fr;
}
#home__investigations .col-right .card--article:first-of-type figure,
#home__investigations .col-right .card--article:first-of-type picture {
grid-column: span 2;
}
#home__investigations .col-right .card--article:first-of-type .title {
grid-column: span 2;
font-size: var(--fs-medium);
padding-right: 3ch;
margin-bottom: calc(var(--spacing) * 1);
}
#home__investigations .col-right .card--article:first-of-type .description {
grid-column: 1;
grid-row: 3;
padding-right: 3ch;
display: block;
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
overflow: visible;
}
#home__investigations .col-right .card--article:first-of-type dl {
grid-column: 2;
grid-row: 3;
}
#home__investigations .col-right .card--article:first-of-type .keywords-wrapper {
grid-column: 2;
grid-row: 4;
}
#home__investigations .col-right .see-more { #home__investigations .col-right .see-more {
grid-column: span 2; grid-column: span 2;
} }

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

File diff suppressed because one or more lines are too long

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

@ -7,12 +7,14 @@
@media #{$medium} { @media #{$medium} {
padding-bottom: calc(var(--spacing)*4); padding-bottom: calc(var(--spacing)*4);
margin-bottom: calc(var(--spacing)*4); margin-bottom: calc(var(--spacing)*4);
&:first-of-type{
&:first-of-type{
padding-top: calc(var(--spacing)*2); padding-top: calc(var(--spacing)*2);
} }
.col-left{ .col-left{
margin-bottom: calc(var(--spacing)*3); margin-bottom: calc(var(--spacing)*3);
} }
} }
.baseline-section { .baseline-section {
@ -45,9 +47,9 @@
margin-bottom: calc(var(--spacing)*4); margin-bottom: calc(var(--spacing)*4);
padding-top: calc(var(--spacing)*4); padding-top: calc(var(--spacing)*4);
display: grid; display: grid;
--gap: calc(var(--padding-body)*2); // grid-template-columns: 1fr 2fr;
grid-template-columns: 1fr 2fr; grid-template-columns: minmax(360px, 1fr) 2fr;
grid-gap: var(--gap); grid-gap: calc(var(--padding-body)*3);
} }
@ -100,53 +102,19 @@
#home__investigations { #home__investigations {
.section--inner{
padding-top: calc(var(--spacing)*1.5);
}
@media #{$small-up} { @media #{$small-up} {
.col-right{ .col-right{
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: var(--padding-body); gap: var(--padding-body);
.card--article:first-of-type{
grid-column: span 2;
display: grid;
grid-template-columns: 1fr 1fr;
figure,
picture{
grid-column: span 2;
}
.title{
grid-column: span 2;
font-size: var(--fs-medium);
padding-right: 3ch;
margin-bottom: calc(var(--spacing)*1);
}
.description{
grid-column: 1;
grid-row: 3;
padding-right: 3ch;
display: block;
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
overflow: visible;
}
dl{
grid-column: 2;
grid-row: 3;
}
.keywords-wrapper{
grid-column: 2;
grid-row: 4;
}
}
.see-more{ .see-more{
grid-column: span 2; grid-column: span 2;

145
site/templates/home.php
View file

@ -18,76 +18,107 @@
<div class="col-right"> <div class="col-right">
<?php $latestInvestigations = site()->find('enquetes')->children()->listed()->sortBy('created', 'desc')->limit(5); <?php
foreach ($latestInvestigations as $investigation): $enquetesPage = page('enquetes');
?> $superPin = $enquetesPage->superPinnedInvestigation()->toPage();
$pinned = $enquetesPage->pinnedInvestigations()->toPages();
if ($superPin) $pinned = $pinned->not($superPin);
<article class="card--article"> $list = [];
$shownIds = [];
<?php if ($cover = $investigation->cover()->toFile()): ?>
<figure>
<img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
</figure>
<?php endif ?>
if ($superPin) {
$list[] = ['page' => $superPin, 'type' => 'super'];
$shownIds[] = $superPin->id();
}
<h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4> foreach ($pinned as $p) {
if (count($list) >= 5) break;
$list[] = ['page' => $p, 'type' => 'pinned'];
$shownIds[] = $p->id();
}
if (count($list) < 5) {
$latest = $enquetesPage->children()->listed()->sortBy('created', 'desc')
->filter(fn($p) => !in_array($p->id(), $shownIds))
->limit(5 - count($list));
foreach ($latest as $p) {
$list[] = ['page' => $p, 'type' => 'latest'];
}
}
?>
<?php if ($investigation->chapo()->isNotEmpty()): ?> <?php foreach ($list as $item):
<p class="description"><?= $investigation->chapo()->excerpt(200) ?></p> $investigation = $item['page'];
<?php endif ?> $type = $item['type'];
$cover = $investigation->cover()->toFile();
?>
<article class="card--article<?= $type === 'super' ? ' pinned-home' : ($type === 'pinned' ? ' pinned' : '') ?>">
<dl class="dl"> <?php if ($type === 'super' && ($videoPreview = $investigation->videoPreview()->toFile())): ?>
<?php if ($investigation->incidentDate()->isNotEmpty()): ?> <div class="video-extract">
<div class="dl__group"> <video class="vjs-tech" id="player-element_html5_api" tabindex="-1" loop="" muted="muted" playsinline="playsinline" autoplay="" src="<?= $videoPreview->url() ?>"></video>
<dt>Date de l'incident</dt> </div>
<dd><time datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time></dd> <?php elseif ($cover): ?>
</div> <figure>
<?php endif ?> <img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
</figure>
<?php endif ?>
<?php if ($partners = $investigation->partners()->toStructure()): ?> <?php if ($type === 'pinned'): ?>
<?php if ($partners->isNotEmpty()): ?> <div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
<div class="dl__group"> <?php endif ?>
<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()): ?> <h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4>
<div class="dl__group">
<dt>Lieu de l'incident</dt>
<dd><?= $investigation->incidentLocation()->esc() ?></dd>
</div>
<?php endif ?>
<?php if ($investigation->chapo()->isNotEmpty()): ?>
<p class="description"><?= $investigation->chapo()->excerpt(200) ?></p>
<?php endif ?>
</dl> <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 ($keywords = $investigation->keywords()->split()): ?> <?php if ($partners = $investigation->partners()->toStructure()): ?>
<div class="keywords-wrapper"> <?php if ($partners->isNotEmpty()): ?>
<ul class="keywords"> <div class="dl__group">
<?php foreach ($keywords as $keyword): ?> <dt>Partenaire(s)</dt>
<li><a href="#keyword" target="_blank"><?= esc($keyword) ?></a></li> <dd>
<?php endforeach ?> <?php $partnerNames = [] ?>
</ul> <?php foreach ($partners as $partner): ?>
</div> <?php $partnerNames[] = $partner->name()->value() ?>
<?php endif ?> <?php endforeach ?>
<?= implode(', ', $partnerNames) ?>
</dd>
</div>
<?php endif ?>
<?php endif ?>
<?php if ($investigation->pinned()->toBool()): ?> <?php if ($investigation->incidentLocation()->isNotEmpty()): ?>
<div class="pin"><?= svg('assets/icons/pin.svg') ?></div> <div class="dl__group">
<?php endif ?> <dt>Lieu de l'incident</dt>
<dd><?= $investigation->incidentLocation()->esc() ?></dd>
</div>
<?php endif ?>
</dl>
<a class="link-block" href="<?= $investigation->url() ?>"></a> <?php if ($keywords = $investigation->keywords()->split()): ?>
</article> <div class="keywords-wrapper">
<?php endforeach ?> <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>
</article>
<?php endforeach ?>

47
site/templates/investigations.php
View file

@ -29,15 +29,46 @@
<section class="container-cards container-cards__investigations"> <section class="container-cards container-cards__investigations">
<?php foreach ($page->children()->listed() as $investigation): ?> <?php
<article class="card--article"> $superPin = $page->superPinnedInvestigation()->toPage();
$pinned = $page->pinnedInvestigations()->toPages();
<?php if ($cover = $investigation->cover()->toFile()): ?> if ($superPin) $pinned = $pinned->not($superPin);
$shownIds = [];
$list = [];
if ($superPin) {
$list[] = ['page' => $superPin, 'type' => 'super'];
$shownIds[] = $superPin->id();
}
foreach ($pinned as $p) {
$list[] = ['page' => $p, 'type' => 'pinned'];
$shownIds[] = $p->id();
}
$rest = $page->children()->listed()->sortBy('created', 'desc')
->filter(fn($p) => !in_array($p->id(), $shownIds));
foreach ($rest as $p) {
$list[] = ['page' => $p, 'type' => 'latest'];
}
?>
<?php foreach ($list as $item):
$investigation = $item['page'];
$type = $item['type'];
$cover = $investigation->cover()->toFile();
?>
<article class="card--article<?= $type !== 'latest' ? ' pinned' : '' ?>">
<?php if ($cover): ?>
<figure> <figure>
<img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>"> <img src="<?= $cover->url() ?>" alt="<?= $investigation->title()->esc() ?>">
</figure> </figure>
<?php endif ?> <?php endif ?>
<?php if ($type !== 'latest'): ?>
<div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
<?php endif ?>
<div class="content"> <div class="content">
<h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4> <h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4>
@ -76,20 +107,20 @@
</div> </div>
<?php endif ?> <?php endif ?>
</dl> </dl>
</div> </div>
<?php if ($keywords = $investigation->keywords()->split()): ?> <?php if ($keywords = $investigation->keywords()->split()): ?>
<div class="keywords-wrapper"> <div class="keywords-wrapper">
<ul class="keywords"> <ul class="keywords">
<?php foreach ($keywords as $keyword): ?> <?php foreach ($keywords as $keyword): ?>
<li><a href="#keyword" target="_blank"><?= esc($keyword) ?></a></li> <li><a href="#keyword" target="_blank"><?= esc($keyword) ?></a></li>
<?php endforeach ?> <?php endforeach ?>
</ul> </ul>
</div> </div>
<?php endif ?> <?php endif ?>
<a class="link-block" href="<?= $investigation->url() ?>"></a> <a class="link-block" href="<?= $investigation->url() ?>"></a>
</article> </article>
<?php endforeach ?> <?php endforeach ?>