summary-investigation → delete slides, dynamic nav
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
This commit is contained in:
Julie Blanc
parent
aeb5abb7aa
commit
48ded249a3
9 changed files with 56 additions and 74 deletions
|
|
@ -229,6 +229,7 @@ button:disabled{
|
|||
border-color: var(--color-txt);
|
||||
width: fit-content;
|
||||
margin: var(--spacing) auto;
|
||||
font-size: var(--fs-xsmall);
|
||||
@media #{$small}{
|
||||
margin-bottom: calc(var(--spacing)*2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,9 @@
|
|||
#hero{
|
||||
#summary__hero{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
|
||||
|
||||
|
||||
// @media #{$small}{
|
||||
// width: 100vw;
|
||||
// left: calc(var(--padding-body)*-1);
|
||||
// }
|
||||
|
||||
figcaption{
|
||||
color: var(--color-txt-light);
|
||||
font-size: var(--fs-small);
|
||||
|
|
@ -133,7 +127,6 @@
|
|||
height: 18px;
|
||||
fill: black;
|
||||
opacity: 0.8;
|
||||
// opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -48,9 +48,6 @@ main .page__header {
|
|||
}
|
||||
|
||||
.description {
|
||||
// max-width: 68ch;
|
||||
|
||||
// font-size: var(--fs-medium);
|
||||
max-width: 58ch;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -441,6 +441,7 @@ button:disabled {
|
|||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
margin: var(--spacing) auto;
|
||||
font-size: var(--fs-xsmall);
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.btn--back-to-top {
|
||||
|
|
@ -596,36 +597,36 @@ button.sort[data-sort-type=up] .arrow {
|
|||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
#hero {
|
||||
#summary__hero {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
}
|
||||
#hero figcaption {
|
||||
#summary__hero figcaption {
|
||||
color: var(--color-txt-light);
|
||||
font-size: var(--fs-small);
|
||||
padding: calc(var(--spacing) * 0.5) var(--padding-body);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
#hero figcaption {
|
||||
#summary__hero figcaption {
|
||||
font-size: var(--fs-xsmall);
|
||||
}
|
||||
}
|
||||
#hero figure {
|
||||
#summary__hero figure {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
#hero figure img {
|
||||
#summary__hero figure img {
|
||||
width: 100%;
|
||||
aspect-ratio: 2/1;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
#hero .swiper-slide {
|
||||
#summary__hero .swiper-slide {
|
||||
position: relative;
|
||||
}
|
||||
#hero .swiper-button-prev, #hero .swiper-button-next {
|
||||
#summary__hero .swiper-button-prev, #summary__hero .swiper-button-next {
|
||||
--swiper-navigation-sides-offset: 32px;
|
||||
--swiper-navigation-size: 32px;
|
||||
opacity: 0.8;
|
||||
|
|
@ -633,52 +634,52 @@ button.sort[data-sort-type=up] .arrow {
|
|||
margin-top: 0;
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
#hero .swiper-button-prev, #hero .swiper-button-next {
|
||||
#summary__hero .swiper-button-prev, #summary__hero .swiper-button-next {
|
||||
--swiper-navigation-sides-offset: 15px;
|
||||
--swiper-navigation-size: 15px;
|
||||
}
|
||||
}
|
||||
#hero .swiper-button-prev svg, #hero .swiper-button-next svg {
|
||||
#summary__hero .swiper-button-prev svg, #summary__hero .swiper-button-next svg {
|
||||
color: white;
|
||||
}
|
||||
#hero .swiper-pagination {
|
||||
#summary__hero .swiper-pagination {
|
||||
position: static;
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
padding: 0 var(--padding-body);
|
||||
text-align: center;
|
||||
}
|
||||
#hero .swiper-pagination .swiper-pagination-bullet {
|
||||
#summary__hero .swiper-pagination .swiper-pagination-bullet {
|
||||
width: 15px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-txt-light);
|
||||
}
|
||||
#hero .swiper-pagination .swiper-pagination-bullet-active {
|
||||
#summary__hero .swiper-pagination .swiper-pagination-bullet-active {
|
||||
background: var(--color-txt);
|
||||
opacity: 0.8;
|
||||
}
|
||||
#hero .player-container {
|
||||
#summary__hero .player-container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
aspect-ratio: 2/1;
|
||||
}
|
||||
#hero .player-container .extract, #hero .player-container video {
|
||||
#summary__hero .player-container .extract, #summary__hero .player-container video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
position: relative;
|
||||
}
|
||||
#hero .player-container .video-full {
|
||||
#summary__hero .player-container .video-full {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
}
|
||||
#hero .player-container .video-full iframe {
|
||||
#summary__hero .player-container .video-full iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#hero .player-container #hero-play-video {
|
||||
#summary__hero .player-container #hero-play-video {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -689,7 +690,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#hero .player-container #hero-play-video .btn--bold {
|
||||
#summary__hero .player-container #hero-play-video .btn--bold {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -697,15 +698,15 @@ button.sort[data-sort-type=up] .arrow {
|
|||
padding: 0 1ch;
|
||||
opacity: 0.8;
|
||||
}
|
||||
#hero .player-container #hero-play-video .btn--bold:hover {
|
||||
#summary__hero .player-container #hero-play-video .btn--bold:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
#hero .player-container #hero-play-video .text {
|
||||
#summary__hero .player-container #hero-play-video .text {
|
||||
color: black;
|
||||
line-height: 1;
|
||||
padding-top: 4px;
|
||||
}
|
||||
#hero .player-container #hero-play-video svg {
|
||||
#summary__hero .player-container #hero-play-video svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: black;
|
||||
|
|
@ -2808,7 +2809,7 @@ main .page__header .description-medium {
|
|||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: normal;
|
||||
font-weight: 500;
|
||||
-webkit-text-decoration: 1px underline var(--color-txt-light);
|
||||
text-decoration: 1px underline var(--color-txt-light);
|
||||
text-underline-offset: 3px;
|
||||
|
|
@ -2865,9 +2866,6 @@ main .page__header .description-medium {
|
|||
margin-top: calc(var(--spacing) * 2);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
[data-template=investigation-summary] main #hero figcaption {
|
||||
margin: 0 var(--padding-body);
|
||||
}
|
||||
[data-template=investigation-summary] main .panel-left {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
|
||||
@import "components/figures";
|
||||
@import "components/hero";
|
||||
@import "components/summary-hero";
|
||||
@import "components/form-newsletter";
|
||||
@import "components/search-form";
|
||||
@import "components/list-socials";
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@
|
|||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: normal;
|
||||
font-weight: 500;
|
||||
text-decoration: 1px underline var(--color-txt-light);
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
|
@ -194,12 +194,7 @@
|
|||
}
|
||||
|
||||
|
||||
#hero {
|
||||
figcaption {
|
||||
margin: 0 var(--padding-body);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.panel-left {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,6 @@ tabs:
|
|||
type: select
|
||||
options:
|
||||
image: Image simple
|
||||
slider: Slider d'images
|
||||
video: Vidéo
|
||||
default: image
|
||||
width: 1/3
|
||||
|
|
@ -52,7 +51,6 @@ tabs:
|
|||
layout: cards
|
||||
when:
|
||||
heroType: image
|
||||
heroType: slider
|
||||
videoExtractUrl:
|
||||
label: URL vidéo d'extrait (autoplay)
|
||||
type: url
|
||||
|
|
|
|||
|
|
@ -31,11 +31,34 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
|||
<div class="panel-left" id="banner--page">
|
||||
<nav id="nav--page">
|
||||
<ul>
|
||||
<?php if ($page->heroType()->isNotEmpty() && ($page->heroImages()->toFile() || $page->videoExtractUrl()->isNotEmpty())): ?>
|
||||
<li><a href="#">Vidéo</a></li>
|
||||
<?php endif ?>
|
||||
<?php if ($page->synthesis()->isNotEmpty()): ?>
|
||||
<li><a href="#section__synthese">Synthèse</a></li>
|
||||
<?php endif ?>
|
||||
<li><a href="#section__impacts">Impacts</a></li>
|
||||
<li><a href="#section__folder">Dossier</a></li>
|
||||
<?php
|
||||
// Vérifier si un dossier existe pour cette investigation
|
||||
$folderSlug = $page->folder()->value();
|
||||
$hasFolder = false;
|
||||
if (!empty($folderSlug) && site()->find('dossiers')) {
|
||||
$hasFolder = site()->find('dossiers')->children()->filterBy('slug', $folderSlug)->first();
|
||||
}
|
||||
if ($hasFolder):
|
||||
?>
|
||||
<li><a href="#section__folder">Dossier</a></li>
|
||||
<?php endif ?>
|
||||
<?php
|
||||
// Vérifier s'il y a des enquêtes en lien
|
||||
$relatedInvestigations = $page->relatedInvestigations()->toPages();
|
||||
if ($relatedInvestigations->isEmpty()) {
|
||||
$relatedInvestigations = $page->parent()->children()->filterBy('intendedTemplate', 'investigation-summary')->not($page)->listed()->limit(3);
|
||||
}
|
||||
if ($relatedInvestigations->isNotEmpty()):
|
||||
?>
|
||||
<li><a href="#section__related-articles">En lien</a></li>
|
||||
<?php endif ?>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
|
@ -74,7 +97,7 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
|||
<?php if ($page->heroType()->value() == 'image'): ?>
|
||||
<?php if ($heroImage = $page->heroImages()->toFile()): ?>
|
||||
<!-- HERO IMAGE SIMPLE -->
|
||||
<div id="hero">
|
||||
<div id="summary__hero">
|
||||
<figure>
|
||||
<img src="<?= $heroImage->url() ?>" alt="<?= $page->title()->esc() ?>">
|
||||
</figure>
|
||||
|
|
@ -84,33 +107,9 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
|||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
<?php elseif ($page->heroType()->value() == 'slider'): ?>
|
||||
<?php if ($heroImages = $page->heroImages()->toFiles()): ?>
|
||||
<!-- HERO SLIDER -->
|
||||
<div id="hero" class="hero-slider swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<?php foreach ($heroImages as $image): ?>
|
||||
<div class="swiper-slide">
|
||||
<figure>
|
||||
<img src="<?= $image->url() ?>" alt="<?= $page->title()->esc() ?>">
|
||||
</figure>
|
||||
<?php if ($image->caption()->isNotEmpty()): ?>
|
||||
<figcaption><?= $image->caption() ?></figcaption>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
<?php endforeach ?>
|
||||
</div>
|
||||
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
<?php elseif ($page->heroType()->value() == 'video'): ?>
|
||||
<!-- HERO VIDEO -->
|
||||
<div id="hero" class="hero-video">
|
||||
<div id="summary__hero" class="hero-video">
|
||||
<div class="player-container">
|
||||
|
||||
<?php if ($page->videoExtractUrl()->isNotEmpty()): ?>
|
||||
|
|
@ -130,6 +129,7 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
|||
<?php endif ?>
|
||||
|
||||
|
||||
|
||||
<dl class="section__article" id="section__dl">
|
||||
<?php if ($page->incidentDate()->isNotEmpty()): ?>
|
||||
<div class="dl__group">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue