mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 16:19:19 +02:00
Refactor apropos/charte/licence pages: shared layout, TOC anchors, and UI polish
Unify the three public pages (à propos, charte, licence) onto a single grid layout (.page-content) with sticky TOC sidebar, replacing the old separate / / markup. - Merge about.php, charte.php, licence.php templates into shared .page-content / .content-section structure - Add CommonMark HeadingPermalinkExtension for stable heading anchors - Use SlugNormalizer for TOC links so they match rendered heading IDs - Standardize link styling across content blocks: bold black, accent on hover (consistent with global link style) - Fix code block wrapping: use pre-wrap instead of pre, constrain grid columns with min-width:0, auto scrollbar - Fix apropos page grid placement: force content-section into column 2 so contacts and credits stay in the content area, not the sidebar Also includes accumulated WIP changes: - Header gradient: hardcoded purple-to-green (replaces CSS variables) - Search placeholder font - Duration field: replace minutes/sec/heures with h:m:s time inputs - TFE file optional for formats 1,4,6 with client-side JS toggle - Licence form: em-dash to hyphen, details/summary classes - Pill search: block Enter key form submission when no results - Draft autosave: remove CSRF rotation (broke concurrent FilePond uploads) - Language pill: clear hints for excluded main languages - Search results: gradient placeholder cards for items without covers - TFE display: format durée values as XhYm instead of decimal
This commit is contained in:
Pontoporeia
@@ -31,97 +31,87 @@ function renderEntries(array $entries): string
|
||||
$suffix = implode(" & ", array_slice($parts, -2));
|
||||
return $prefix !== "" ? $prefix . ", " . $suffix : $suffix;
|
||||
} ?>
|
||||
<main class="apropos-main" id="main-content">
|
||||
<div class="apropos-layout">
|
||||
|
||||
<!-- LEFT: sticky table of contents -->
|
||||
<nav class="apropos-toc" aria-label="Sections de la page">
|
||||
<p class="apropos-toc-label">Parties</p>
|
||||
<ul>
|
||||
<li><a href="#apropos-intro">À propos</a></li>
|
||||
<?php if (!empty($contacts)): ?>
|
||||
<li><a href="#apropos-contacts">Contacts</a></li>
|
||||
<?php endif; ?>
|
||||
<li><a href="#apropos-credits">Crédits</a></li>
|
||||
</ul>
|
||||
<?php if (!empty($sidebarLinks)): ?>
|
||||
<?php foreach ($sidebarLinks as $sl): ?>
|
||||
<div class="apropos-toc-link">
|
||||
<a href="<?= htmlspecialchars($sl['url'] ?? '#') ?>" target="_blank" rel="noopener">
|
||||
<?= htmlspecialchars($sl['label'] ?? 'Lien') ?> ↗
|
||||
</a>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</nav>
|
||||
|
||||
<!-- MIDDLE: main prose + sections -->
|
||||
<div class="apropos-content">
|
||||
|
||||
<!-- Intro text from DB -->
|
||||
<section class="apropos-section" id="apropos-intro">
|
||||
<div class="prose">
|
||||
<?= $aboutHtml ?>
|
||||
</div>
|
||||
</section>
|
||||
<main class="page-content" id="main-content">
|
||||
|
||||
<!-- LEFT: sticky table of contents -->
|
||||
<nav class="apropos-toc" aria-label="Sections de la page">
|
||||
<p class="apropos-toc-label">PARTIES</p>
|
||||
<ul>
|
||||
<li><a href="#apropos-intro">À propos</a></li>
|
||||
<?php if (!empty($contacts)): ?>
|
||||
<!-- Contacts section -->
|
||||
<section class="apropos-section" id="apropos-contacts">
|
||||
<h2 class="apropos-section-title">Contacts</h2>
|
||||
<div class="apropos-contacts-grid">
|
||||
<?php foreach ($contacts as $group): ?>
|
||||
<address class="apropos-contact-card">
|
||||
<?= renderEntries($group["entries"] ?? []) ?>
|
||||
<?php if (!empty($group["role"])): ?>
|
||||
<span><?= htmlspecialchars($group["role"]) ?></span>
|
||||
<?php endif; ?>
|
||||
<?php
|
||||
$emails = array_filter(
|
||||
array_column($group["entries"] ?? [], "email"),
|
||||
fn($e) => !empty($e),
|
||||
);
|
||||
foreach ($emails as $email): ?>
|
||||
<a href="<?= EmailObfuscator::mailto($email) ?>"><?= EmailObfuscator::email($email) ?></a>
|
||||
<?php endforeach;
|
||||
?>
|
||||
</address>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</section>
|
||||
<li><a href="#apropos-contacts">Contacts</a></li>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Credits section (hardcoded) -->
|
||||
<section class="apropos-section" id="apropos-credits">
|
||||
<h2 class="apropos-section-title">Crédits</h2>
|
||||
<dl class="apropos-credits-list">
|
||||
<div class="apropos-credit-row">
|
||||
<dt>Design & développement</dt>
|
||||
<dd>
|
||||
<a class="apropos-entry" target="_blank" href='mailto:oli98marly@gmail.com
'>Olivia Marly</a>,
|
||||
<a class="apropos-entry" target="_blank" href='https://tgm.happyngreen.fr'>Théophile Gerveau-Mercier</a> &
|
||||
<a class="apropos-entry" target="_blank" href='https://theohennequin.com'>Théo Hennequin</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="apropos-credit-row">
|
||||
<dt>Typographies</dt>
|
||||
<dd>
|
||||
<a class="apropos-entry" target="_blank" href='https://typotheque.genderfluid.space/fr/fontes/ductus'><b>Ductus</b> - Amélie Dumont</a> &
|
||||
<a class="apropos-entry" target="_blank" href='https://typotheque.genderfluid.space/fr/fontes/bbb-dm-sans'><b>BBB DM Sans</b> - Camille Circlude, Eugénie Bidaut, Mariel Nils, Bérénice Bouin</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="apropos-credit-row">
|
||||
<dt>Iconographie</dt>
|
||||
<dd>
|
||||
<a class="apropos-entry" target="_blank" href="https://phosphoricons.com/">Phosphor Icons</a> —
|
||||
<a class="apropos-entry" target="_blank" href="https://mit-license.org/">MIT</a>,
|
||||
par Helena Zhang et Tobias Fried
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<li><a href="#apropos-credits">Crédits</a></li>
|
||||
</ul>
|
||||
<?php if (!empty($sidebarLinks)): ?>
|
||||
<?php foreach ($sidebarLinks as $sl): ?>
|
||||
<div class="apropos-toc-link">
|
||||
<a href="<?= htmlspecialchars($sl['url'] ?? '#') ?>" target="_blank" rel="noopener">
|
||||
<?= htmlspecialchars($sl['label'] ?? 'Lien') ?> ↗
|
||||
</a>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</nav>
|
||||
|
||||
<!-- Intro text from DB -->
|
||||
<section class="content-section" id="apropos-intro">
|
||||
<?= $aboutHtml ?>
|
||||
</section>
|
||||
|
||||
<?php if (!empty($contacts)): ?>
|
||||
<section class="content-section" id="apropos-contacts">
|
||||
<h2 class="content-section-title">Contacts</h2>
|
||||
<div class="apropos-contacts-grid">
|
||||
<?php foreach ($contacts as $group): ?>
|
||||
<address class="apropos-contact-card">
|
||||
<?= renderEntries($group["entries"] ?? []) ?>
|
||||
<?php if (!empty($group["role"])): ?>
|
||||
<span><?= htmlspecialchars($group["role"]) ?></span>
|
||||
<?php endif; ?>
|
||||
<?php
|
||||
$emails = array_filter(
|
||||
array_column($group["entries"] ?? [], "email"),
|
||||
fn($e) => !empty($e),
|
||||
);
|
||||
foreach ($emails as $email): ?>
|
||||
<a href="<?= EmailObfuscator::mailto($email) ?>"><?= EmailObfuscator::email($email) ?></a>
|
||||
<?php endforeach;
|
||||
?>
|
||||
</address>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</section>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Credits section (hardcoded) -->
|
||||
<section class="content-section" id="apropos-credits">
|
||||
<h2 class="content-section-title">Crédits</h2>
|
||||
<dl class="apropos-credits-list">
|
||||
<div class="apropos-credit-row">
|
||||
<dt>Design & développement</dt>
|
||||
<dd>
|
||||
<a class="apropos-entry" target="_blank" href='mailto:oli98marly@gmail.com
'>Olivia Marly</a>,
|
||||
<a class="apropos-entry" target="_blank" href='https://tgm.happyngreen.fr'>Théophile Gerveau-Mercier</a> &
|
||||
<a class="apropos-entry" target="_blank" href='https://theohennequin.com'>Théo Hennequin</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="apropos-credit-row">
|
||||
<dt>Typographies</dt>
|
||||
<dd>
|
||||
<a class="apropos-entry" target="_blank" href='https://typotheque.genderfluid.space/fr/fontes/ductus'><b>Ductus</b> - Amélie Dumont</a> &
|
||||
<a class="apropos-entry" target="_blank" href='https://typotheque.genderfluid.space/fr/fontes/bbb-dm-sans'><b>BBB DM Sans</b> - Camille Circlude, Eugénie Bidaut, Mariel Nils, Bérénice Bouin</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="apropos-credit-row">
|
||||
<dt>Iconographie</dt>
|
||||
<dd>
|
||||
<a class="apropos-entry" target="_blank" href="https://phosphoricons.com/">Phosphor Icons</a> —
|
||||
<a class="apropos-entry" target="_blank" href="https://mit-license.org/">MIT</a>,
|
||||
par Helena Zhang et Tobias Fried
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -1,30 +1,23 @@
|
||||
<main class="apropos-main" id="main-content">
|
||||
<div class="apropos-layout">
|
||||
<main class="page-content" id="main-content">
|
||||
|
||||
<!-- LEFT: sticky table of contents -->
|
||||
<?php if (!empty($tocItems)): ?>
|
||||
<nav class="apropos-toc" aria-label="Sections de la page">
|
||||
<p class="apropos-toc-label">Parties</p>
|
||||
<ul>
|
||||
<?php foreach ($tocItems as $item): ?>
|
||||
<li><a href="<?= htmlspecialchars($item['href']) ?>"><?= htmlspecialchars($item['label']) ?></a></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- LEFT: sticky table of contents -->
|
||||
<?php if (!empty($tocItems)): ?>
|
||||
<nav class="apropos-toc" aria-label="Sections de la page">
|
||||
<p class="apropos-toc-label">PARTIES</p>
|
||||
<ul>
|
||||
<?php foreach ($tocItems as $item): ?>
|
||||
<li><a href="<?= htmlspecialchars($item['href']) ?>"><?= htmlspecialchars($item['label']) ?></a></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</nav>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="content">
|
||||
<?php if (!empty(trim($content))): ?>
|
||||
<?= $html ?>
|
||||
<?php else: ?>
|
||||
<p>Contenu à venir.</p>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- MIDDLE: main prose -->
|
||||
<div class="apropos-content">
|
||||
<section class="apropos-section">
|
||||
<div class="prose">
|
||||
<?php if (!empty(trim($content))): ?>
|
||||
<?= $html ?>
|
||||
<?php else: ?>
|
||||
<p>Contenu à venir.</p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
@@ -1,30 +1,23 @@
|
||||
<main class="apropos-main" id="main-content">
|
||||
<div class="apropos-layout">
|
||||
<main class="page-content" id="main-content">
|
||||
|
||||
<!-- LEFT: sticky table of contents -->
|
||||
<?php if (!empty($tocItems)): ?>
|
||||
<nav class="apropos-toc" aria-label="Sections de la page">
|
||||
<p class="apropos-toc-label">Parties</p>
|
||||
<ul>
|
||||
<?php foreach ($tocItems as $item): ?>
|
||||
<li><a href="<?= htmlspecialchars($item['href']) ?>"><?= htmlspecialchars($item['label']) ?></a></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- LEFT: sticky table of contents -->
|
||||
<?php if (!empty($tocItems)): ?>
|
||||
<nav class="apropos-toc" aria-label="Sections de la page">
|
||||
<p class="apropos-toc-label">PARTIES</p>
|
||||
<ul>
|
||||
<?php foreach ($tocItems as $item): ?>
|
||||
<li><a href="<?= htmlspecialchars($item['href']) ?>"><?= htmlspecialchars($item['label']) ?></a></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</nav>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="content">
|
||||
<?php if (!empty(trim($content))): ?>
|
||||
<?= $html ?>
|
||||
<?php else: ?>
|
||||
<p>Contenu à venir.</p>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- MIDDLE: main prose -->
|
||||
<div class="apropos-content">
|
||||
<section class="apropos-section">
|
||||
<div class="prose">
|
||||
<?php if (!empty(trim($content))): ?>
|
||||
<?= $html ?>
|
||||
<?php else: ?>
|
||||
<p>Contenu à venir.</p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
@@ -76,15 +76,22 @@
|
||||
<ul class="results-grid">
|
||||
<?php foreach ($results as $item): ?>
|
||||
<?php $thumb = $coverMap[$item['id']] ?? null; ?>
|
||||
<li><a href="/tfe?id=<?= (int)$item['id'] ?>" class="result-card<?= $thumb ? ' result-card--has-cover' : '' ?>">
|
||||
<li><a href="/tfe?id=<?= (int)$item['id'] ?>" class="result-card">
|
||||
<?php if ($thumb): ?>
|
||||
<figure class="result-card__cover">
|
||||
<img src="/media?path=<?= urlencode($thumb) ?>"
|
||||
alt="Couverture — <?= htmlspecialchars($item['title']) ?>"
|
||||
loading="lazy">
|
||||
</figure>
|
||||
<?php else: ?>
|
||||
<div class="result-card__gradient">
|
||||
<span class="result-card__gradient-author"><?= htmlspecialchars($item['authors'] ?? '') ?></span>
|
||||
<span class="result-card__gradient-title"><?= htmlspecialchars($item['title']) ?></span>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ($thumb): ?>
|
||||
<span class="result-card__authors"><?= htmlspecialchars($item['authors'] ?? '') ?></span>
|
||||
<?php endif; ?>
|
||||
<span class="result-card__title"><?= htmlspecialchars($item['title']) ?></span>
|
||||
<small class="result-card__meta"><?= htmlspecialchars($item['year']) ?><?php if (!empty($item['orientation'])): ?> · <?= htmlspecialchars($item['orientation']) ?><?php endif; ?></small>
|
||||
</a></li>
|
||||
|
||||
@@ -50,22 +50,25 @@
|
||||
<?php
|
||||
$_dVal = (float)$data["duration_value"];
|
||||
$_dUnit = $data["duration_unit"];
|
||||
$_unitLabels = [
|
||||
'pages' => 'pages',
|
||||
'minutes' => 'minutes',
|
||||
'sec' => 'secondes',
|
||||
'heures' => 'heures',
|
||||
'mo' => 'Mo',
|
||||
];
|
||||
$_label = $_unitLabels[$_dUnit] ?? $_dUnit;
|
||||
// if float, show 0.1 or .0 as needed
|
||||
$_display = ($_dVal == (int)$_dVal) ? (int)$_dVal : $_dVal;
|
||||
$_label = match($_dUnit) {
|
||||
'pages' => 'pages',
|
||||
'mo' => 'Mo',
|
||||
'durée' => '',
|
||||
default => $_dUnit,
|
||||
};
|
||||
if ($_dUnit === 'durée') {
|
||||
$_hours = (int)floor($_dVal);
|
||||
$_mins = (int)round(($_dVal - $_hours) * 60);
|
||||
$_display = ($_mins > 0) ? "{$_hours}h{$_mins}" : "{$_hours}h";
|
||||
} else {
|
||||
$_display = ($_dVal == (int)$_dVal) ? (int)$_dVal : $_dVal;
|
||||
}
|
||||
?>
|
||||
<p class="tfe-meta-item">
|
||||
<span class="tfe-meta-label">Durée :</span>
|
||||
<?= $_display ?> <?= htmlspecialchars($_label) ?>
|
||||
<?= $_display ?><?= $_label ? ' ' . htmlspecialchars($_label) : '' ?>
|
||||
</p>
|
||||
<?php unset($_unitLabels, $_dVal, $_dUnit, $_label, $_display); endif; ?>
|
||||
<?php unset($_dVal, $_dUnit, $_label, $_display, $_hours, $_mins); endif; ?>
|
||||
|
||||
<?php if (!empty($data["languages"])): ?>
|
||||
<p class="tfe-meta-item">
|
||||
|
||||
Reference in New Issue
Block a user