TFE page: replace dl/dt/dd with p/span for metadata, remove underlines, lowercase keywords/languages/formats, inclusive text, editable restriction messages

This commit is contained in:
Pontoporeia
2026-06-08 11:13:15 +02:00
parent 71949425c7
commit 3f200dae70
2 changed files with 108 additions and 189 deletions

View File

@@ -41,8 +41,8 @@
margin: 0; margin: 0;
} }
/* Metadata description list — target <dl> directly inside article > header */ /* Metadata block */
article dl { .tfe-meta {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-3xs); gap: var(--space-3xs);
@@ -51,38 +51,27 @@ article dl {
margin: 0; margin: 0;
} }
/* Each dt/dd pair grouped in a <div> inside <dl> */ /* Each metadata line */
article dl > div { .tfe-meta-item {
display: grid; margin: 0;
grid-template-columns: auto 1fr;
gap: var(--space-3xs);
} }
article dl dt { .tfe-meta-label {
color: var(--text-primary);
font-weight: 400; font-weight: 400;
} }
article dl dd { .tfe-meta-item a {
color: var(--text-primary);
font-weight: 700;
margin: 0;
min-width: 0;
word-break: normal;
overflow-wrap: normal;
}
article dl dd a {
color: inherit; color: inherit;
font-weight: 700;
text-decoration: none; text-decoration: none;
} }
article dl dd a:hover { .tfe-meta-item a:hover {
text-decoration: none; text-decoration: none;
} }
/* Note field: align dt/dd to top, value in italics */ /* Note field: align label to top, value in italics */
.tfe-meta-note { .tfe-meta-item.tfe-meta-note {
align-items: start; align-items: start;
} }

View File

@@ -15,273 +15,203 @@
<?php endif; ?> <?php endif; ?>
</h1> </h1>
<dl> <div class="tfe-meta">
<?php if (!empty($data["orientation"])): ?> <?php if (!empty($data["orientation"])): ?>
<div> <p class="tfe-meta-item">
<dt>Orientation :</dt> <span class="tfe-meta-label">Orientation :</span>
<dd><a href="/repertoire?or[]=<?= urlencode( <a href="/repertoire?or[]=<?= urlencode($data["orientation"]) ?>"><?= htmlspecialchars($data["orientation"]) ?></a>
$data["orientation"], </p>
) ?>"><?= htmlspecialchars($data["orientation"]) ?></a></dd>
</div>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data["ap_program"])): ?> <?php if (!empty($data["ap_program"])): ?>
<div> <p class="tfe-meta-item">
<dt>Atelier pluridisciplinaire :</dt> <span class="tfe-meta-label">Atelier pluridisciplinaire :</span>
<dd><a href="/repertoire?ap[]=<?= urlencode( <a href="/repertoire?ap[]=<?= urlencode($data["ap_program"]) ?>"><?= htmlspecialchars($data["ap_program"]) ?></a>
$data["ap_program"], </p>
) ?>"><?= htmlspecialchars($data["ap_program"]) ?></a></dd>
</div>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data["year"])): ?> <?php if (!empty($data["year"])): ?>
<div> <p class="tfe-meta-item">
<dt>Date :</dt> <span class="tfe-meta-label">Date :</span>
<dd><a href="/repertoire?fy[]=<?= urlencode( <a href="/repertoire?fy[]=<?= urlencode($data["year"]) ?>"><?= htmlspecialchars($data["year"]) ?></a>
$data["year"], </p>
) ?>"><?= htmlspecialchars($data["year"]) ?></a></dd>
</div>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data["languages"])): ?> <?php if (!empty($data["languages"])): ?>
<div> <p class="tfe-meta-item">
<dt>Langue :</dt> <span class="tfe-meta-label">Langue :</span>
<dd><?php <?php
$langs = array_map( $langs = array_map("trim", explode(",", $data["languages"]));
"trim",
explode(",", $data["languages"]),
);
$langLinks = array_map( $langLinks = array_map(
fn($l) => '<a href="/search?query=' . fn($l) => '<a href="/search?query=' . urlencode($l) . '">' . htmlspecialchars(mb_strtolower($l)) . '</a>',
urlencode($l) .
'">' .
htmlspecialchars(mb_strtolower($l)) .
"</a>",
$langs, $langs,
); );
echo implode(", ", $langLinks); echo implode(", ", $langLinks);
?></dd> ?>
</div> </p>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data["formats"])): ?> <?php if (!empty($data["formats"])): ?>
<div> <p class="tfe-meta-item">
<dt>Format :</dt> <span class="tfe-meta-label">Format :</span>
<dd><?php <?php
$fmts = array_map("trim", explode(",", $data["formats"])); $fmts = array_map("trim", explode(",", $data["formats"]));
$fmtLinks = array_map( $fmtLinks = array_map(
fn($f) => '<a href="/search?query=' . fn($f) => '<a href="/search?query=' . urlencode($f) . '">' . htmlspecialchars(mb_strtolower($f)) . '</a>',
urlencode($f) .
'">' .
htmlspecialchars(mb_strtolower($f)) .
"</a>",
$fmts, $fmts,
); );
echo implode(", ", $fmtLinks); echo implode(", ", $fmtLinks);
?></dd> ?>
</div> </p>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data["keywords"])): ?> <?php if (!empty($data["keywords"])): ?>
<div> <p class="tfe-meta-item">
<dt>Mots-clés :</dt> <span class="tfe-meta-label">Mots-clés :</span>
<dd><?php <?php
$kws = array_map("trim", explode(",", $data["keywords"])); $kws = array_map("trim", explode(",", $data["keywords"]));
$kwLinks = array_map( $kwLinks = array_map(
fn($k) => '<a href="/repertoire?kw[]=' . fn($k) => '<a href="/repertoire?kw[]=' . urlencode($k) . '">' . htmlspecialchars(mb_strtolower($k)) . '</a>',
urlencode($k) .
'">' .
htmlspecialchars(mb_strtolower($k)) .
"</a>",
$kws, $kws,
); );
echo implode(", ", $kwLinks); echo implode(", ", $kwLinks);
?></dd> ?>
</div> </p>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($promoteursInternes)): ?> <?php if (!empty($promoteursInternes)): ?>
<div> <p class="tfe-meta-item">
<dt>Promoteur·ice interne :</dt> <span class="tfe-meta-label">Promoteur·ice interne :</span>
<dd><?php <?php
$links = array_map( $links = array_map(
fn($n) => '<a href="/search?query=' . fn($n) => '<a href="/search?query=' . urlencode($n) . '">' . htmlspecialchars($n) . '</a>',
urlencode($n) .
'">' .
htmlspecialchars($n) .
"</a>",
$promoteursInternes, $promoteursInternes,
); );
echo implode(", ", $links); echo implode(", ", $links);
?></dd> ?>
</div> </p>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($promoteursExternes)): ?> <?php if (!empty($promoteursExternes)): ?>
<div> <p class="tfe-meta-item">
<dt>Promoteur·ice externe :</dt> <span class="tfe-meta-label">Promoteur·ice externe :</span>
<dd><?php <?php
$links = array_map( $links = array_map(
fn($n) => '<a href="/search?query=' . fn($n) => '<a href="/search?query=' . urlencode($n) . '">' . htmlspecialchars($n) . '</a>',
urlencode($n) .
'">' .
htmlspecialchars($n) .
"</a>",
$promoteursExternes, $promoteursExternes,
); );
echo implode(", ", $links); echo implode(", ", $links);
?></dd> ?>
</div> </p>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($promoteursUlb)): ?> <?php if (!empty($promoteursUlb)): ?>
<div> <p class="tfe-meta-item">
<dt>Promoteur·ice ULB :</dt> <span class="tfe-meta-label">Promoteur·ice ULB :</span>
<dd><?php <?php
$links = array_map( $links = array_map(
fn($n) => '<a href="/search?query=' . fn($n) => '<a href="/search?query=' . urlencode($n) . '">' . htmlspecialchars($n) . '</a>',
urlencode($n) .
'">' .
htmlspecialchars($n) .
"</a>",
$promoteursUlb, $promoteursUlb,
); );
echo implode(", ", $links); echo implode(", ", $links);
?></dd> ?>
</div> </p>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($juryPresidents)): ?> <?php if (!empty($juryPresidents)): ?>
<div> <p class="tfe-meta-item">
<dt>Président·e du jury :</dt> <span class="tfe-meta-label">Président·e du jury :</span>
<dd><?php <?php
$links = array_map( $links = array_map(
fn($n) => '<a href="/search?query=' . fn($n) => '<a href="/search?query=' . urlencode($n) . '">' . htmlspecialchars($n) . '</a>',
urlencode($n) .
'">' .
htmlspecialchars($n) .
"</a>",
$juryPresidents, $juryPresidents,
); );
echo implode(", ", $links); echo implode(", ", $links);
?></dd> ?>
</div> </p>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($juryLecteursInternes)): ?> <?php if (!empty($juryLecteursInternes)): ?>
<div> <p class="tfe-meta-item">
<dt>Lecteur·ice(s) interne :</dt> <span class="tfe-meta-label">Lecteur·ice(s) interne :</span>
<dd><?php <?php
$links = array_map( $links = array_map(
fn($n) => '<a href="/search?query=' . fn($n) => '<a href="/search?query=' . urlencode($n) . '">' . htmlspecialchars($n) . '</a>',
urlencode($n) .
'">' .
htmlspecialchars($n) .
"</a>",
$juryLecteursInternes, $juryLecteursInternes,
); );
echo implode(", ", $links); echo implode(", ", $links);
?></dd> ?>
</div> </p>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($juryLecteursExternes)): ?> <?php if (!empty($juryLecteursExternes)): ?>
<div> <p class="tfe-meta-item">
<dt>Lecteur·ice(s) externe :</dt> <span class="tfe-meta-label">Lecteur·ice(s) externe :</span>
<dd><?php <?php
$links = array_map( $links = array_map(
fn($n) => '<a href="/search?query=' . fn($n) => '<a href="/search?query=' . urlencode($n) . '">' . htmlspecialchars($n) . '</a>',
urlencode($n) .
'">' .
htmlspecialchars($n) .
"</a>",
$juryLecteursExternes, $juryLecteursExternes,
); );
echo implode(", ", $links); echo implode(", ", $links);
?></dd> ?>
</div> </p>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data["access_type"])): ?> <?php if (!empty($data["access_type"])): ?>
<div> <p class="tfe-meta-item">
<dt>Accès :</dt> <span class="tfe-meta-label">Accès :</span>
<dd><?= htmlspecialchars($data["access_type"]) ?></dd> <?= htmlspecialchars($data["access_type"]) ?>
</div> </p>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data["license_type"])): ?> <?php if (!empty($data["license_type"])): ?>
<div> <p class="tfe-meta-item">
<dt>Licence :</dt> <span class="tfe-meta-label">Licence :</span>
<dd><?= htmlspecialchars($data["license_type"]) ?></dd> <?= htmlspecialchars($data["license_type"]) ?>
</div> </p>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data["context_note"])): ?> <?php if (!empty($data["context_note"])): ?>
<div class="tfe-meta-note"> <p class="tfe-meta-item tfe-meta-note">
<dt>Note :</dt> <span class="tfe-meta-label">Note :</span>
<dd class="tfe-note-value"><?= nl2br( <span class="tfe-note-value"><?= nl2br(htmlspecialchars($data["context_note"])) ?></span>
htmlspecialchars($data["context_note"]), </p>
) ?></dd>
</div>
<?php endif; ?> <?php endif; ?>
<?php if ( <?php if (!empty($data["contact_interne"]) && !empty($data["contact_public"])): ?>
!empty($data["contact_interne"]) && <p class="tfe-meta-item">
!empty($data["contact_public"]) <span class="tfe-meta-label">Contact :</span>
): ?>
<div>
<dt>Contact :</dt>
<dd>
<?php <?php
$_contact = $data["contact_interne"]; $_contact = $data["contact_interne"];
$_isUrl = $_isUrl = filter_var($_contact, FILTER_VALIDATE_URL) !== false;
filter_var($_contact, FILTER_VALIDATE_URL) !==
false;
$_isEmail = !$_isUrl && str_contains($_contact, "@"); $_isEmail = !$_isUrl && str_contains($_contact, "@");
if ($_isUrl): ?> if ($_isUrl): ?>
<a href="<?= htmlspecialchars( <a href="<?= htmlspecialchars($_contact) ?>" target="_blank" rel="noopener">
$_contact, <?= htmlspecialchars(preg_replace("#^https?://#i", "", rtrim($_contact, "/"))) ?>
) ?>" target="_blank" rel="noopener">
<?= htmlspecialchars(
preg_replace(
"#^https?://#i",
"",
rtrim($_contact, "/"),
),
) ?>
<span class="sr-only">(ouvre dans un nouvel onglet)</span> <span class="sr-only">(ouvre dans un nouvel onglet)</span>
</a> </a>
<?php elseif ($_isEmail): ?> <?php elseif ($_isEmail): ?>
<a href="<?= EmailObfuscator::mailto($_contact) ?>"><?= htmlspecialchars($_contact) ?></a> <a href="<?= EmailObfuscator::mailto($_contact) ?>"><?= htmlspecialchars($_contact) ?></a>
<?php else: ?> <?php else: ?>
<?= htmlspecialchars($_contact) ?> <?= htmlspecialchars($_contact) ?>
<?php endif; <?php endif; ?>
?> </p>
</dd>
</div>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($data["baiu_link"])): ?> <?php if (!empty($data["baiu_link"])): ?>
<?php <?php
$_baiuHref = htmlspecialchars($data["baiu_link"]); $_baiuHref = htmlspecialchars($data["baiu_link"]);
$_baiuLabel = preg_replace( $_baiuLabel = preg_replace("#^https?://#i", "", rtrim($data["baiu_link"], "/"));
"#^https?://#i",
"",
rtrim($data["baiu_link"], "/"),
);
?> ?>
<div> <p class="tfe-meta-item">
<dt>Lien :</dt> <span class="tfe-meta-label">Lien :</span>
<dd> <a href="<?= $_baiuHref ?>" target="_blank" rel="noopener">
<a href="<?= $_baiuHref ?>" target="_blank" rel="noopener"> <?= htmlspecialchars($_baiuLabel) ?>
<?= htmlspecialchars($_baiuLabel) ?> <span class="sr-only">(ouvre dans un nouvel onglet)</span>
<span class="sr-only">(ouvre dans un nouvel onglet)</span> </a>
</a> </p>
</dd>
</div>
<?php endif; ?> <?php endif; ?>
</dl> </div>
<?php if (!empty($data["synopsis"])): ?> <?php if (!empty($data["synopsis"])): ?>
<p class="tfe-synopsis-text"> <p class="tfe-synopsis-text">