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>
|
||||
|
||||
Reference in New Issue
Block a user