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

refactor: rename "folder" to "package" throughout codebase

Browse source 
- Rename CSS files: _card-folder.scss → card-package
- Rename template files: _folder.scss → package
- Update all CSS class names and selectors
- Delete old folder blueprints and templates
- Add new package blueprints with improved structure
- Update investigation-summary template and blueprint
- Add "Dossiers" menu item in panel configuration
- Improve package blueprint with linkedContent field

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-11 12:40:18 +01:00
parent e228c1757e
commit 15581752b8
11 changed files with 298 additions and 346 deletions
Download patch file Download diff file Expand all files Collapse all files

256
assets/css/components/_card-folder.scss
View file

@ -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;
}
}
.short {
grid-column: span 2;
}
ul {
grid-column: 2;
grid-row: 2;
padding-top: 0;
}
}
}

8
assets/css/style.scss
View file

@ -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";

154
assets/css/template/_folder.scss
View file

@ -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;}
}

124
assets/css/template/_investigation-summary.scss
View file

@ -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;
}

2
site/blueprints/pages/investigation-summary.yml
View file

@ -88,7 +88,7 @@ tabs:
label: Métadonnées
icon: table
fields:
folder:
package:
label: Dossier
type: select
options: query

14
site/blueprints/pages/folder.yml → site/blueprints/pages/package.yml
View file

@ -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

7
site/blueprints/pages/folders.yml → site/blueprints/pages/packages.yml
View file

@ -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

9
site/config/menu.php
View file

@ -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',

44
site/templates/investigation-summary.php
View file

@ -40,14 +40,14 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
<li><a href="#section__impacts">Impacts</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();
$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):
?>
<li><a href="#section__folder">Dossier</a></li>
<li><a href="#section__package">Dossier</a></li>
<?php endif ?>
<?php
// Vérifier s'il y a des enquêtes en lien
@ -305,34 +305,34 @@ if ($relatedInvestigations->isEmpty()) {
<?php
// Récupérer le dossier associé à cette investigation
$folderSlug = $page->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):
?>
<aside class="section__article" id="section__folder">
<aside class="section__article" id="section__package">
<h3 class="section__title">Dans le dossier</h3>
<article class="card--folder">
<?php if ($cover = $folder->cover()->toFile()): ?>
<article class="card--package">
<?php if ($cover = $package->cover()->toFile()): ?>
<figure>
<img src="<?= $cover->url() ?>" alt="<?= $folder->title()->esc() ?>">
<img src="<?= $cover->url() ?>" alt="<?= $package->title()->esc() ?>">
</figure>
<?php endif ?>
<div class="content">
<h4 class="title"><a href="<?= $folder->url() ?>"><span class="icon"><?= svg('assets/icons/folder.svg') ?></span><?= $folder->title()->esc() ?></a></h4>
<h4 class="title"><a href="<?= $package->url() ?>"><span class="icon"><?= svg('assets/icons/package.svg') ?></span><?= $package->title()->esc() ?></a></h4>
<?php if ($folder->description()->isNotEmpty()): ?>
<p class="short"><?= $folder->description()->excerpt(200) ?></p>
<?php if ($package->description()->isNotEmpty()): ?>
<p class="short"><?= $package->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();
$investigationsCount = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($package) {
return $investigation->package()->value() === $package->slug();
})->count();
?>
@ -344,8 +344,8 @@ if ($folder):
</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() ?>" target="_blank" aria-hidden="true"></a>
<button class="btn--go-to"><a href="<?= $package->url() ?>" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="<?= $package->url() ?>" target="_blank" aria-hidden="true"></a>
</article>

6
site/templates/folder.php → site/templates/package.php
View file

@ -16,17 +16,17 @@
<?php
// Récupérer les enquêtes associées à ce dossier
$investigations = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($page) {
return $investigation->folder()->value() === $page->slug();
return $investigation->package()->value() === $page->slug();
});
?>
<div class="btn--group" id="nav-folder">
<div class="btn--group" id="nav-package">
<button class="btn--small"><a href="#section__investigations">Enquêtes <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>
<button class="btn--small"><a href="#section__impacts">Impacts <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>
</div>
<div class="content-folder">
<div class="content-package">
<?php if ($investigations->isNotEmpty()): ?>

20
site/templates/folders.php → site/templates/packages.php
View file

@ -16,28 +16,28 @@
<?php foreach ($page->children()->listed() as $folder): ?>
<article class="card--folder">
<?php foreach ($page->children()->listed() as $package): ?>
<article class="card--package">
<?php if ($cover = $folder->cover()->toFile()): ?>
<?php if ($cover = $package->cover()->toFile()): ?>
<figure>
<img src="<?= $cover->url() ?>" alt="<?= $folder->title()->esc() ?>">
<img src="<?= $cover->url() ?>" alt="<?= $package->title()->esc() ?>">
</figure>
<?php endif ?>
<div class="content">
<h4 class="title"><a href="<?= $folder->url() ?>"><span class="icon"><?= svg('assets/icons/folder.svg') ?></span><?= $folder->title()->esc() ?></a></h4>
<h4 class="title"><a href="<?= $package->url() ?>"><span class="icon"><?= svg('assets/icons/package.svg') ?></span><?= $package->title()->esc() ?></a></h4>
<?php if ($folder->description()->isNotEmpty()): ?>
<p class="short"><?= $folder->description()->excerpt(200) ?></p>
<?php if ($package->description()->isNotEmpty()): ?>
<p class="short"><?= $package->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();
$investigationsCount = site()->find('enquetes')->children()->listed()->filter(function($investigation) use ($package) {
return $investigation->package()->value() === $package->slug();
})->count();
?>
@ -50,7 +50,7 @@
</div>
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
<a class="link-block" href="<?= $folder->url() ?>"></a>
<a class="link-block" href="<?= $package->url() ?>"></a>
</article>
<?php endforeach ?>