diff --git a/assets/css/components/_card-folder.scss b/assets/css/components/_card-folder.scss index 415dbbe..0264d68 100644 --- a/assets/css/components/_card-folder.scss +++ b/assets/css/components/_card-folder.scss @@ -1,171 +1,145 @@ -.card--folder{ - position: relative; - max-width: var(--max-w-cards); - border: var(--border-light); - padding: var(--padding-inner); - @include grid-content(); - @include figure-16-9(); +.card--package { + position: relative; + max-width: var(--max-w-cards); + border: var(--border-light); + padding: var(--padding-inner); + @include grid-content(); + @include figure-16-9(); + container-type: inline-size; + container-name: cardpackage; - container-type: inline-size; - container-name: cardfolder; + figure { + border-radius: var(--radius-small); + background-color: var(--color-accent); + img { + opacity: 0.8; + filter: grayscale(1); + } + } - figure{ + .content { + display: flex; + flex-direction: column; + font-size: var(--fs-small); + } - border-radius: var(--radius-small); - background-color: var(--color-accent); - - img{ - opacity: 0.8; - filter: grayscale(1); - } - + .title { + font-weight: 500; + font-size: var(--fs-normal); + line-height: var(--leading-title); + margin-bottom: 0.75em; + text-wrap: balance; + max-width: 42ch; + text-transform: uppercase; + padding-top: calc(var(--spacing) * 0.25); + a { + text-decoration: none; } - .content{ - display: flex; - flex-direction: column; - font-size: var(--fs-small); - + @media #{$small} { + font-size: var(--fs-normal); } - - .title{ - - font-weight: 500; - font-size: var(--fs-normal); - line-height: var(--leading-title); - - margin-bottom: 0.75em; - text-wrap: balance; - max-width: 42ch; - text-transform: uppercase; - padding-top: calc(var(--spacing)*0.25); - a{ text-decoration: none;} - - @media #{$small}{ - font-size: var(--fs-normal); - } - - .icon{ - padding-right: 1ch; - position: relative; - top: 1px; - svg{ - height: 15px; - width: 15px; - fill: var(--color-txt); - } - } - + .icon { + padding-right: 1ch; + position: relative; + top: 1px; + svg { + height: 15px; + width: 15px; + fill: var(--color-txt); + } } + } - .short{ - @include clamp(3); - flex-grow: 1; - padding-right: calc(var(--padding-inner)*2); + .short { + @include clamp(3); + flex-grow: 1; + padding-right: calc(var(--padding-inner) * 2); + } + + ul { + display: flex; + list-style: none; + gap: 1ch; + color: var(--color-txt-light); + padding-top: calc(var(--spacing) * 0.5); + + li + li { + &::before { + content: "|"; + padding-right: 1ch; + } } - - ul{ - display: flex; - list-style: none; - gap: 1ch; - color: var(--color-txt-light); - padding-top: calc(var(--spacing)*0.5); - - li + li{ - &::before{ - content: "|"; - padding-right: 1ch; - } - } - @media #{$small}{ - font-size: var(--fs-small); - } + @media #{$small} { + font-size: var(--fs-small); } + } - .btn--go-to{ - position: absolute; - right: calc(var(--padding-inner)*1); - bottom: var(--padding-inner); - } + .btn--go-to { + position: absolute; + right: calc(var(--padding-inner) * 1); + bottom: var(--padding-inner); + } @include btn--go-to(); - &:hover{ - background-color: var(--grey-950); - border-color: var(--color-txt); - } - - - + &:hover { + background-color: var(--grey-950); + border-color: var(--color-txt); + } } +[data-template="investigation-summary"] .card--package { + border: none; + padding-left: 0; + padding-right: 0; + border-bottom: var(--border-light); + &:first-of-type { + border-top: var(--border-light); + } + &.has-link { + @include hover-card-line(); + } -[data-template="investigation-summary"] .card--folder{ - - border: none; - padding-left: 0; - padding-right: 0; - border-bottom: var(--border-light); - - &:first-of-type{ - border-top: var(--border-light); - } - &.has-link { - @include hover-card-line(); + figure { + @media #{$x-small} { + margin-left: 0px; } + } - figure{ - @media #{$x-small}{ margin-left: 0px; } - - } - - .title{ - font-size: var(--fs-small); - } - - - + .title { + font-size: var(--fs-small); + } } - - - - @media #{$x-small} { - - .card--folder{ - - .content { - display: contents; - } - figure { - grid-row: 1/3; - } - - .title { - font-size: var(--fs-small); - padding-top: calc(var(--spacing)*0.25); - margin-bottom: 0; - } - - .short { - grid-column: span 2; - } - - ul{ - grid-column: 2; - grid-row: 2; - padding-top: 0; - - } - + .card--package { + .content { + display: contents; + } + figure { + grid-row: 1/3; } - + .title { + font-size: var(--fs-small); + padding-top: calc(var(--spacing) * 0.25); + margin-bottom: 0; + } -} \ No newline at end of file + .short { + grid-column: span 2; + } + + ul { + grid-column: 2; + grid-row: 2; + padding-top: 0; + } + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss index 224252e..9ae6a61 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -14,9 +14,6 @@ @import "components/sort"; @import "components/btn-group-mobile"; - - - @import "components/figures"; @import "components/summary-hero"; @import "components/form-newsletter"; @@ -29,12 +26,11 @@ @import "components/card-article-small"; @import "components/card-impact"; @import "components/card-impact-small"; -@import "components/card-folder"; +@import "components/card-package"; @import "components/card-open-graph"; @import "components/swiper"; @import "components/slider-before-after"; - @import "partials/site-header"; @import "partials/site-menu"; @import "partials/site-footer"; @@ -45,5 +41,5 @@ @import "template/home"; @import "template/investigation-summary"; @import "template/report"; -@import "template/folder"; +@import "template/package"; @import "template/impacts"; diff --git a/assets/css/template/_folder.scss b/assets/css/template/_folder.scss index ac5f2ad..263e37f 100644 --- a/assets/css/template/_folder.scss +++ b/assets/css/template/_folder.scss @@ -1,92 +1,88 @@ -.content-folder{ - // max-width: 1300px; - max-width: var(--max-w-cards); - margin: 0 auto; - display: grid; - grid-gap: calc(var(--padding-body)*1.5); - // grid-template-columns: 60% cacl(40% - var(--padding-body)*1.5); +.content-package { + // max-width: 1300px; + max-width: var(--max-w-cards); + margin: 0 auto; + display: grid; + grid-gap: calc(var(--padding-body) * 1.5); + // grid-template-columns: 60% cacl(40% - var(--padding-body)*1.5); - position: relative; - - .container-cards{ - display: block; - align-self: start; + position: relative; + + .container-cards { + display: block; + align-self: start; + } + + #section__investigations article { + margin-bottom: calc(var(--spacing) * 1); + } + + .container__title { + font-weight: normal; + font-size: var(--fs-small); + font-weight: 500; + + text-transform: uppercase; + margin-bottom: calc(var(--spacing) * 0.75); + } + + @media #{$medium} { + #section__investigations { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: calc(var(--padding-inner) * 1.5) !important; + margin-bottom: calc(var(--spacing) * 3); + article { + margin-bottom: 0px; + } + .container__title { + grid-column: span 2; + margin-bottom: 0px; + } } - - #section__investigations article{ - margin-bottom: calc(var(--spacing)*1); + section:target { + padding-top: calc(var(--header-h) + var(--spacing)); } - + } - .container__title{ - font-weight: normal; - font-size: var(--fs-small); - font-weight: 500; - - text-transform: uppercase; - margin-bottom: calc(var(--spacing)*0.75); - + @media #{$medium-up} { + #nav-package { + display: none; } - - - - - @media #{$medium}{ - #section__investigations{ - display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: calc(var(--padding-inner)*1.5)!important; - margin-bottom: calc(var(--spacing)*3); - article{ margin-bottom: 0px;} - .container__title{ - grid-column: span 2; - margin-bottom: 0px; - } - } - section:target{ - padding-top: calc(var(--header-h) + var(--spacing)); - - } - + grid-template-columns: 1fr 1fr; + #section__investigations { + display: block; + margin-bottom: 0px; + article { + margin-bottom: calc(var(--spacing) * 1); + } } + } - @media #{$medium-up}{ - #nav-folder{ display: none; } - grid-template-columns: 1fr 1fr; - #section__investigations{ - display: block; - margin-bottom: 0px; - article{ - margin-bottom: calc(var(--spacing)*1); - } - } + @media #{$small} { + display: block; + #section__investigations { + display: block; } - - - @media #{$small}{ - display: block; - #section__investigations{ - display: block; - } - .container__title{ - margin-bottom: calc(var(--spacing)*0.5)!important; - } + .container__title { + margin-bottom: calc(var(--spacing) * 0.5) !important; } - + } } +#nav-package { + display: flex; + margin-top: calc(var(--spacing) * -1); + margin-bottom: calc(var(--spacing) * 2); -#nav-folder{ - display: flex; - margin-top: calc(var(--spacing)*-1); - margin-bottom: calc(var(--spacing)*2); - - svg{ - width: 10px; - height: 10px; - transform: rotate(90deg); - } + svg { + width: 10px; + height: 10px; + transform: rotate(90deg); + } +} +@media #{$medium-up} { + #nav-package { + display: none; + } } -@media #{$medium-up}{ - #nav-folder{ display: none;} -} \ No newline at end of file diff --git a/assets/css/template/_investigation-summary.scss b/assets/css/template/_investigation-summary.scss index 4a5dc29..68b07f2 100644 --- a/assets/css/template/_investigation-summary.scss +++ b/assets/css/template/_investigation-summary.scss @@ -1,47 +1,41 @@ [data-template="investigation-summary"] main { position: relative; - - .page__header{ + .page__header { margin-inline: auto; max-width: var(--max-w-content); } - - - - .panel-left{ - width: calc((100vw - var(--max-w-cards) - var(--padding-body)*4)*0.5); + .panel-left { + width: calc((100vw - var(--max-w-cards) - var(--padding-body) * 4) * 0.5); } - @media screen and (max-width: 1340px){ + @media screen and (max-width: 1340px) { margin-left: auto; - margin-right: calc(var(--padding-body)*3); - .panel-left{ - width: calc(100vw - var(--max-w-cards) - var(--padding-body)*6); - } + margin-right: calc(var(--padding-body) * 3); + .panel-left { + width: calc(100vw - var(--max-w-cards) - var(--padding-body) * 6); + } } - - @media screen and (max-width: 1220px){ + @media screen and (max-width: 1220px) { margin-left: auto; margin-right: 0px; - width: calc(100% - var(--panel-w)*0.5 - var(--padding-body)); - .panel-left{ - width: calc(var(--panel-w)*0.5); - } + width: calc(100% - var(--panel-w) * 0.5 - var(--padding-body)); + .panel-left { + width: calc(var(--panel-w) * 0.5); + } } - .section__article { margin-top: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3); max-width: var(--max-w-content); - margin-inline: auto; + margin-inline: auto; - &:target{ - padding-top: calc(var(--header-h) + var(--spacing)*1); - } + &:target { + padding-top: calc(var(--header-h) + var(--spacing) * 1); + } a:hover { color: var(--grey-200); @@ -56,18 +50,13 @@ } } - #section__dl, #section__impacts, - #section__folder, - #section__related-articles{ + #section__package, + #section__related-articles { font-size: var(--fs-small); } - - - - #section__dl { margin-top: calc(var(--spacing) * 1.5); border-bottom: var(--border-light); @@ -95,14 +84,11 @@ } } - - #section__synthese { - max-width: var(--max-w-content); margin-inline: auto; - p+p { + p + p { margin-top: 1em; } @@ -116,66 +102,54 @@ } } - - - - .panel-left{ + .panel-left { //background-color: yellow; height: calc(100vh - var(--header-h)); position: fixed; left: var(--padding-body); - padding-bottom: calc(var(--padding-body)*1); + padding-bottom: calc(var(--padding-body) * 1); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; z-index: calc(var(--z-header) - 1); - #nav--page { - padding-bottom: var(--spacing); - width: calc(var(--panel-w)*0.5); - ul { - list-style: none; + #nav--page { + padding-bottom: var(--spacing); + width: calc(var(--panel-w) * 0.5); + ul { + list-style: none; - li { - text-align: center; - color: var(--color-txt-light); - margin-bottom: 4px; - font-weight: 500; - font-size: var(--fs-small); + li { + text-align: center; + color: var(--color-txt-light); + margin-bottom: 4px; + font-weight: 500; + font-size: var(--fs-small); - a { - display: block; - padding: 5px 1ch; - text-decoration: none; + a { + display: block; + padding: 5px 1ch; + text-decoration: none; + } } } } - } - .btn--group{ - width: calc(var(--panel-w)*0.5); - display: flex; - flex-direction: column; - gap:calc(var(--spacing)*0.25); + .btn--group { + width: calc(var(--panel-w) * 0.5); + display: flex; + flex-direction: column; + gap: calc(var(--spacing) * 0.25); - button, .dropdown{ - flex-grow: 1; - width: 100%; + button, + .dropdown { + flex-grow: 1; + width: 100%; + } } } - - - } - - - - - - - - } // SMALL ---------------------------------------------------------- @@ -194,8 +168,6 @@ margin-bottom: calc(var(--spacing) * 2); } - - .panel-left { display: none; } diff --git a/site/blueprints/pages/investigation-summary.yml b/site/blueprints/pages/investigation-summary.yml index 82d6877..cea3011 100644 --- a/site/blueprints/pages/investigation-summary.yml +++ b/site/blueprints/pages/investigation-summary.yml @@ -88,7 +88,7 @@ tabs: label: Métadonnées icon: table fields: - folder: + package: label: Dossier type: select options: query diff --git a/site/blueprints/pages/folder.yml b/site/blueprints/pages/package.yml similarity index 68% rename from site/blueprints/pages/folder.yml rename to site/blueprints/pages/package.yml index 88b7da7..53adfe5 100644 --- a/site/blueprints/pages/folder.yml +++ b/site/blueprints/pages/package.yml @@ -5,18 +5,22 @@ tabs: label: Contenu icon: page fields: - description: - label: Description - type: textarea - size: medium - buttons: false cover: label: Visuel de couverture type: files multiple: false layout: cards + width: 1/3 image: ratio: 12/7 cover: true help: Image utilisée dans la liste des dossiers + description: + label: Description + type: writer + width: 2/3 + linkedContent: + label: Contenu + type: pages + query: site.find('enquetes').children seo: seo/page diff --git a/site/blueprints/pages/folders.yml b/site/blueprints/pages/packages.yml similarity index 66% rename from site/blueprints/pages/folders.yml rename to site/blueprints/pages/packages.yml index 8a692ca..668dc8e 100644 --- a/site/blueprints/pages/folders.yml +++ b/site/blueprints/pages/packages.yml @@ -4,15 +4,16 @@ tabs: contentTab: label: Contenu sections: - folders: + packages: + label: Dossiers type: pages text: "{{ page.title }}" - info: "{{ page.description }}" + info: "{{ page.linkedContent.toPages.count }} contenus" layout: cards size: huge search: true image: cover: true ratio: 12/7 - template: folder + template: package seo: seo/page diff --git a/site/config/menu.php b/site/config/menu.php index a9f5b13..25f80fc 100644 --- a/site/config/menu.php +++ b/site/config/menu.php @@ -22,6 +22,15 @@ return [ ], '-' , + 'dossiers' => [ + 'label' => 'Dossiers', + 'icon' => 'folder', + 'link' => 'pages/dossiers', + 'current' => function (string $current): bool { + $path = Kirby\Cms\App::instance()->path(); + return Str::contains($path, 'pages/dossiers'); + } + ], 'database' => [ 'label' => 'Bases de données', 'icon' => 'table', diff --git a/site/templates/investigation-summary.php b/site/templates/investigation-summary.php index baab14c..c5a6800 100644 --- a/site/templates/investigation-summary.php +++ b/site/templates/investigation-summary.php @@ -40,14 +40,14 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
  • Impacts
  • folder()->value(); - $hasFolder = false; - if (!empty($folderSlug) && site()->find('dossiers')) { - $hasFolder = site()->find('dossiers')->children()->filterBy('slug', $folderSlug)->first(); + $packageSlug = $page->package()->value(); + $hasPackage = false; + if (!empty($packageSlug) && site()->find('dossiers')) { + $hasPackage = site()->find('dossiers')->children()->filterBy('slug', $packageSlug)->first(); } - if ($hasFolder): + if ($hasPackage): ?> -
  • Dossier
  • +
  • Dossier
  • isEmpty()) { folder()->value(); -$folder = null; -if (!empty($folderSlug) && site()->find('dossiers')) { - $folder = site()->find('dossiers')->children()->filterBy('slug', $folderSlug)->first(); +$packageSlug = $page->package()->value(); +$package = null; +if (!empty($packageSlug) && site()->find('dossiers')) { + $package = site()->find('dossiers')->children()->filterBy('slug', $packageSlug)->first(); } -if ($folder): +if ($package): ?> -