complete dossier

assets/css/partials/_page-header.scss

@@ -57,13 +57,30 @@ margin-bottom: calc(var(--spacing) * 1);
       max-width: var(--max-w-content);
     }
 
-    ul.details{
+    ul.list-nav{
       display: flex;
-      gap: 3ch;
+      // justify-content: space-between;
+      flex-wrap: wrap;
+      // gap: 3ch;
       list-style: none;
       margin-top: calc(var(--spacing) * -1.5);
+      @media #{$small} {
+             margin-top: calc(var(--spacing) * -0.5);
+         }
       color: var(--color-txt-light);
 
+      li{
+       white-space: nowrap;
+       margin-right: 2ch;
+       &:last-of-type{
+        margin-right: 0;
+       }
+         @media #{$small} {
+       width: 12ch;
+        }
+       margin-bottom: calc(var(--spacing) * 0.25);
+      }
+
       a{
         text-decoration: none;
         text-transform: lowercase;

assets/css/style.css

@@ -3215,21 +3215,43 @@ main .page__header .page__description {
 main .page__header .page__description {
   max-width: var(--max-w-content);
 }
-main .page__header ul.details {
+main .page__header ul.list-nav {
   display: flex;
-  gap: 3ch;
+  flex-wrap: wrap;
   list-style: none;
   margin-top: calc(var(--spacing) * -1.5);
+}
+@media screen and (max-width: 768px) {
+  main .page__header ul.list-nav {
+    margin-top: calc(var(--spacing) * -0.5);
+  }
+}
+main .page__header ul.list-nav {
   color: var(--color-txt-light);
 }
-main .page__header ul.details a {
+main .page__header ul.list-nav li {
+  white-space: nowrap;
+  margin-right: 2ch;
+}
+main .page__header ul.list-nav li:last-of-type {
+  margin-right: 0;
+}
+@media screen and (max-width: 768px) {
+  main .page__header ul.list-nav li {
+    width: 12ch;
+  }
+}
+main .page__header ul.list-nav li {
+  margin-bottom: calc(var(--spacing) * 0.25);
+}
+main .page__header ul.list-nav a {
   text-decoration: none;
   text-transform: lowercase;
 }
-main .page__header ul.details a::after {
+main .page__header ul.list-nav a::after {
   content: " ↓";
 }
-main .page__header ul.details li:hover {
+main .page__header ul.list-nav li:hover {
   color: var(--color-txt);
 }
 

site/blueprints/pages/package.yml

@@ -28,4 +28,16 @@ tabs:
         label: Impacts
         type: pages
         query: site.find('impacts').children
+      linkedResources:
+        label: Ressources
+        type: pages
+        query: site.find('ressources').children
+      linkedNews:
+        label: Brèves
+        type: pages
+        query: site.find('news').children
+      linkedProjects:
+        label: Projets (Lab)
+        type: pages
+        query: site.find('laboratoire').children
   seo: seo/page

site/languages/en.php

@@ -11,6 +11,7 @@ return [
     'impact.type.plural'    => 'Impacts',
     'impacts.title'         => 'Impacts',
     'news.type'             => 'News',
+    'news.type.plural'      => 'News',
     'news.title'            => 'News',
     'investigation.type'        => 'Investigation',
     'investigation.type.plural' => 'Investigations',
@@ -28,5 +29,6 @@ return [
     'resource.type'          => 'Resource',
     'resource.type.plural'   => 'Resources',
     'resources.title'        => 'Resources',
+    'resources.methodologies' => 'Methodologies',
   ],
 ];

site/languages/fr.php

@@ -12,6 +12,7 @@ return [
     'impact.type.plural'    => 'Impacts',
     'impacts.title'         => 'Impacts',
     'news.type'             => 'Brève',
+    'news.type.plural'      => 'Brèves',
     'news.title'            => 'Brèves',
     'investigation.type'        => 'Enquête',
     'investigation.type.plural' => 'Enquêtes',
@@ -29,5 +30,6 @@ return [
     'resource.type'          => 'Ressource',
     'resource.type.plural'   => 'Ressources',
     'resources.title'        => 'Ressources',
+    'resources.methodologies' => 'Méthodologies',
   ],
 ];

site/snippets/header.php

@@ -56,7 +56,7 @@
       <ul>
            <li class="is-selected"><a href="#investigation__hero">Vidéo</a></li>
             <li><a href="#investigation__content">Enquête</a></li>
-             <li><a href="#methodo">Méthodologies</a></li>
+             <li><a href="#methodologies">Méthodologies</a></li>
              <li><a href="#impacts">Impact</a></li>
              <li><a href="#related-investigations">En lien</a></li>
       </ul>

site/templates/investigation.php

@@ -296,6 +296,46 @@ $dateLocale = substr(is_array($locale) ? reset($locale) : $locale, 0, 5);
     </div> -->
 
 
+<?php
+$resourcesParent = site()->find('ressources');
+$resources = $resourcesParent ? $resourcesParent->children()->listed()->filter(function($resource) use ($page) {
+    return $resource->linkedInvestigations()->toPages()->has($page);
+}) : null;
+?>
+
+<?php if ($resources && $resources->isNotEmpty()): ?>
+<aside class="page__aside" id="methodologies">
+    <h3 class="aside__title"><?= t('resources.methodologies') ?></h3>
+
+    <?php foreach ($resources as $resource): ?>
+    <div class="card--block-small has-link">
+        <div class="group-top">
+            <p class="type"><?= t('resource.type') ?></p>
+            <?php if ($resource->category()->isNotEmpty()): ?>
+            <p class="category"><?= $resource->category()->esc() ?></p>
+            <?php endif ?>
+        </div>
+
+        <h4 class="title"><?= $resource->title()->esc() ?></h4>
+
+        <?php if ($resource->created()->isNotEmpty()): ?>
+        <p class="date">
+            <time datetime="<?= $resource->created()->toDate('yyyy-MM-dd') ?>"><?= $resource->created()->toDate('d MMMM yyyy', $dateLocale) ?></time>
+        </p>
+        <?php endif ?>
+
+        <button class="btn--go-to">
+            <a href="<?= $resource->url() ?>">
+                <?= svg('assets/icons/arrow-left.svg') ?>
+            </a>
+        </button>
+
+        <a class="link-block" href="<?= $resource->url() ?>" aria-hidden="true"></a>
+    </div>
+    <?php endforeach ?>
+
+</aside>
+<?php endif ?>
 
 <?php
 $impactsParent = site()->find('impacts');

site/templates/investigations.php

@@ -29,39 +29,14 @@
 
 <section class="container-cards container-cards__investigations" data-sort-container>
 
-<?php
+<?php foreach ($page->children()->listed()->sortBy('created', 'desc') as $investigation):
-$superPin = $page->superPinnedInvestigation()->toPage();
+    $cover      = $investigation->cover()->toFile();
-$pinned = $page->pinnedInvestigations()->toPages();
+    $dateAttr   = $investigation->incidentDate()->isNotEmpty()
-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();
-    $dateAttr = $investigation->incidentDate()->isNotEmpty()
         ? $investigation->incidentDate()->toDate('yyyy-MM-dd')
         : ($investigation->created()->isNotEmpty() ? $investigation->created()->toDate('yyyy-MM-dd') : '');
     $filterAttr = implode(' ', array_map(fn($c) => Str::slug($c), $investigation->incidentCountry()->split()));
 ?>
-<article class="card--article<?= $type !== 'latest' ? ' pinned' : '' ?>"
+<article class="card--article"
     data-date="<?= esc($dateAttr) ?>"
     data-filter="<?= esc($filterAttr) ?>">
 
@@ -71,10 +46,6 @@ foreach ($rest as $p) {
     </figure>
     <?php endif ?>
 
-    <?php if ($type !== 'latest'): ?>
-    <div class="pin"><?= svg('assets/icons/pin.svg') ?></div>
-    <?php endif ?>
-
     <div class="content">
 
     <h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4>

site/templates/package.php

@@ -8,21 +8,33 @@ $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();
+$impacts        = $page->linkedImpacts()->toPages();
+$resources      = $page->linkedResources()->toPages();
+$news           = $page->linkedNews()->toPages();
+$projects       = $page->linkedProjects()->toPages();
 ?>
 
 <header class="page__header">
     <p class="page__type"><?= t('package.type') ?></p>
     <h2 class="page__title"><?= $page->title() ?></h2>
 
-    <?php if ($investigations->isNotEmpty() || $impacts->isNotEmpty()): ?>
+    <?php if ($investigations->isNotEmpty() || $impacts->isNotEmpty() || $resources->isNotEmpty() || $news->isNotEmpty() || $projects->isNotEmpty()): ?>
-    <ul class="details">
+    <ul class="list-nav">
         <?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 ?>
+        <?php if ($resources->isNotEmpty()): ?>
+        <li><a href="#resources"><?= $resources->count() ?> <?= $resources->count() > 1 ? t('resource.type.plural') : t('resource.type') ?></a></li>
+        <?php endif ?>
+        <?php if ($news->isNotEmpty()): ?>
+        <li><a href="#news"><?= $news->count() ?> <?= $news->count() > 1 ? t('news.type.plural') : t('news.type') ?></a></li>
+        <?php endif ?>
+        <?php if ($projects->isNotEmpty()): ?>
+        <li><a href="#projects"><?= $projects->count() ?> <?= $projects->count() > 1 ? t('project.type.plural') : t('project.type') ?></a></li>
+        <?php endif ?>
     </ul>
     <?php endif ?>
 
@@ -110,5 +122,102 @@ $impacts = $page->linkedImpacts()->toPages();
 <?php endif ?>
 
 
+<?php if ($resources->isNotEmpty()): ?>
+<div class="package__section" id="resources">
+    <h3 class="section__title"><?= t('resources.title') ?> (<?= $resources->count() ?>)</h3>
+
+    <?php foreach ($resources as $resource): ?>
+    <div class="card--block-small has-link">
+        <div class="group-top">
+            <p class="type"><?= t('resource.type') ?></p>
+            <?php if ($resource->category()->isNotEmpty()): ?>
+            <p class="category"><?= $resource->category()->esc() ?></p>
+            <?php endif ?>
+        </div>
+
+        <h4 class="title"><?= $resource->title()->esc() ?></h4>
+
+        <?php if ($resource->created()->isNotEmpty()): ?>
+        <p class="date">
+            <time datetime="<?= $resource->created()->toDate('yyyy-MM-dd') ?>"><?= $resource->created()->toDate('d MMMM yyyy', $dateLocale) ?></time>
+        </p>
+        <?php endif ?>
+
+        <button class="btn--go-to">
+            <a href="<?= $resource->url() ?>"><?= svg('assets/icons/arrow-left.svg') ?></a>
+        </button>
+        <a class="link-block" href="<?= $resource->url() ?>" aria-hidden="true"></a>
+    </div>
+    <?php endforeach ?>
+
+</div>
+<?php endif ?>
+
+
+<?php if ($news->isNotEmpty()): ?>
+<div class="package__section" id="news">
+    <h3 class="section__title"><?= t('news.title') ?> (<?= $news->count() ?>)</h3>
+
+    <?php foreach ($news as $newsItem): ?>
+    <div class="card--block-small has-link">
+        <div class="group-top">
+            <p class="type"><?= t('news.type') ?></p>
+            <?php if ($newsItem->category()->isNotEmpty()): ?>
+            <p class="category"><?= $newsItem->category()->esc() ?></p>
+            <?php endif ?>
+        </div>
+
+        <h4 class="title"><?= $newsItem->title()->esc() ?></h4>
+
+        <?php if ($newsItem->created()->isNotEmpty()): ?>
+        <p class="date">
+            <time datetime="<?= $newsItem->created()->toDate('yyyy-MM-dd') ?>"><?= $newsItem->created()->toDate('d MMMM yyyy', $dateLocale) ?></time>
+        </p>
+        <?php endif ?>
+
+        <button class="btn--go-to">
+            <a href="<?= $newsItem->url() ?>"><?= svg('assets/icons/arrow-left.svg') ?></a>
+        </button>
+        <a class="link-block" href="<?= $newsItem->url() ?>" aria-hidden="true"></a>
+    </div>
+    <?php endforeach ?>
+
+</div>
+<?php endif ?>
+
+
+<?php if ($projects->isNotEmpty()): ?>
+<div class="package__section" id="projects">
+    <h3 class="section__title"><?= t('lab.title') ?> (<?= $projects->count() ?>)</h3>
+
+    <?php foreach ($projects as $project): ?>
+    <div class="card--block-small has-link">
+        <div class="group-top">
+            <p class="type"><?= t('project.type') ?></p>
+            <?php if ($project->category()->isNotEmpty()): ?>
+            <p class="category"><?= $project->category()->esc() ?></p>
+            <?php endif ?>
+        </div>
+
+        <h4 class="title"><?= $project->title()->esc() ?></h4>
+
+        <?php if ($project->created()->isNotEmpty()): ?>
+        <p class="date">
+            <time datetime="<?= $project->created()->toDate('yyyy-MM-dd') ?>"><?= $project->created()->toDate('d MMMM yyyy', $dateLocale) ?></time>
+        </p>
+        <?php endif ?>
+
+        <button class="btn--go-to">
+            <a href="<?= $project->url() ?>"><?= svg('assets/icons/arrow-left.svg') ?></a>
+        </button>
+        <a class="link-block" href="<?= $project->url() ?>" aria-hidden="true"></a>
+    </div>
+    <?php endforeach ?>
+
+</div>
+<?php endif ?>
+
+
+
 </main>
 <?php snippet('footer') ?>