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

View File

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