mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 16:19:19 +02:00
style: normalize headers, overtype editor rounded corners, remove duplicate cover preview, thesis-add-header grid layout, subtitle below header with top gradient
This commit is contained in:
Pontoporeia
@@ -38,157 +38,97 @@
|
||||
</table>
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════════════
|
||||
Blocs d'aide du formulaire étudiant·e
|
||||
Structure du formulaire étudiant·e
|
||||
═══════════════════════════════════════════════════════════════════ -->
|
||||
<h2 id="form-help-blocks" style="margin-top:2rem;">Blocs d'aide du formulaire étudiant·e</h2>
|
||||
<p>Ces textes apparaissent dans le formulaire de soumission accessible via les liens de partage.
|
||||
Ils permettent d'expliquer aux étudiant·es comment remplir chaque section. Supporte le Markdown.</p>
|
||||
<h2 id="form-help-blocks" style="margin-top:2rem;">Structure du formulaire étudiant·e</h2>
|
||||
<p class="fhb-hint">
|
||||
<strong>Glissez</strong> les blocs d'aide (cartes violettes) pour les réorganiser dans le formulaire.
|
||||
Cliquez sur <strong>Éditer</strong> pour modifier le contenu d'un bloc.
|
||||
L'ordre est sauvegardé automatiquement après chaque déplacement.
|
||||
Chaque <strong>bloc d'aide</strong> s'affiche au-dessus de sa section dans le formulaire de soumission.
|
||||
Le <strong>bouton rond</strong> active/désactive l'affichage.
|
||||
</p>
|
||||
|
||||
<?php
|
||||
// Build an ordered flat list of all blocks for the sortable form.
|
||||
// $formHelpBlocks is keyed by block key, already sorted by sort_order.
|
||||
$orderedBlocks = [];
|
||||
foreach ($formHelpBlocks as $key => $block) {
|
||||
$orderedBlocks[] = array_merge($block, [
|
||||
'key' => $key,
|
||||
'label' => Database::FORM_HELP_LABELS[$key] ?? $key,
|
||||
]);
|
||||
}
|
||||
$blocks = $formHelpBlocks;
|
||||
|
||||
// Static form structure: each item is either a 'fieldset' (visual container)
|
||||
// or an 'anchor' for a specific block key showing where it sits in the form.
|
||||
// We also need a mapping from block key → where it currently sits in the sorted list.
|
||||
// The entire sorted order is what matters; we render the form structure as a visual
|
||||
// reference alongside the sortable list.
|
||||
$formStructure = [
|
||||
['type' => 'anchor', 'key' => 'partage_intro', 'position' => 'before-form', 'label' => 'Avant le formulaire (introduction)'],
|
||||
['type' => 'fieldset', 'name' => 'Informations du TFE', 'inputs' => ['Titre', 'Sous-titre', 'Auteur·ice(s)', 'Contact', 'Synopsis']],
|
||||
['type' => 'anchor', 'key' => 'fieldset_tfe_info', 'position' => 'intro-fieldset', 'label' => 'Intro du fieldset « Informations du TFE »'],
|
||||
['type' => 'anchor', 'key' => 'fieldset_synopsis', 'position' => 'intro-fieldset', 'label' => 'Note sous le champ Synopsis'],
|
||||
['type' => 'fieldset', 'name' => 'Composition du jury', 'inputs' => ['Président·e', 'Promoteur·ice', 'Lecteur·ices (×4)']],
|
||||
['type' => 'anchor', 'key' => 'fieldset_jury', 'position' => 'intro-fieldset', 'label' => 'Intro du fieldset « Jury »'],
|
||||
['type' => 'fieldset', 'name' => 'Cadre académique', 'inputs' => ['Année', 'Orientation', 'AP', 'Finalité', 'Langues', 'Formats', 'Mots-clés']],
|
||||
['type' => 'anchor', 'key' => 'fieldset_academic', 'position' => 'intro-fieldset', 'label' => 'Intro du fieldset « Cadre académique »'],
|
||||
['type' => 'fieldset', 'name' => 'Fichiers', 'inputs' => ['Fichier principal (PDF)', 'Annexes']],
|
||||
['type' => 'anchor', 'key' => 'fieldset_files', 'position' => 'intro-fieldset', 'label' => 'Intro du fieldset « Fichiers »'],
|
||||
['type' => 'fieldset', 'name' => 'Visibilité / Accès', 'inputs' => ["Type d'accès", 'Licence']],
|
||||
['type' => 'anchor', 'key' => 'fieldset_access', 'position' => 'intro-fieldset', 'label' => 'Intro du fieldset « Visibilité »'],
|
||||
['type' => 'fieldset', 'name' => 'E-mail de confirmation', 'inputs' => ['Adresse e-mail']],
|
||||
['type' => 'anchor', 'key' => 'fieldset_email', 'position' => 'intro-fieldset', 'label' => 'Intro du fieldset « E-mail »'],
|
||||
// ── Student form structure — each help block above its fieldset ───────────
|
||||
// Pairs: [help_key, fieldset_name, fieldset_inputs]
|
||||
$pairs = [
|
||||
// Top of form
|
||||
['partage_intro', null, null],
|
||||
|
||||
// Informations du TFE
|
||||
['fieldset_tfe_info', 'Informations du TFE',
|
||||
['Titre', 'Sous-titre', 'Auteur·ice(s)', 'Contact visible', 'Synopsis']],
|
||||
|
||||
// Langue(s)
|
||||
['fieldset_languages', 'Langue(s)',
|
||||
['Langues du TFE (cases à cocher)', 'Autre(s) langue(s)']],
|
||||
|
||||
// Mots-clés
|
||||
['fieldset_keywords', 'Mots-clés',
|
||||
['Mots-clés (max 10), séparés par des virgules']],
|
||||
|
||||
// Cadre académique
|
||||
['fieldset_academic', 'Cadre académique',
|
||||
['Année', 'Orientation', 'AP', 'Finalité']],
|
||||
|
||||
// Composition du jury
|
||||
['fieldset_jury', 'Composition du jury',
|
||||
['Président·e', 'Promoteur·ice(s)', 'Lecteur·ices']],
|
||||
|
||||
// Format(s) + Fichiers
|
||||
['fieldset_files', 'Format(s) + Fichiers',
|
||||
['Formats (PDF, vidéo, audio, site web…)', 'Couverture', 'Note d\'intention', 'Fichier principal', 'Annexes']],
|
||||
|
||||
// Métadonnées complémentaires
|
||||
['fieldset_metadata', 'Métadonnées complémentaires',
|
||||
['Nombre de pages', 'Durée (minutes)']],
|
||||
|
||||
// Degrés d'ouverture et licences
|
||||
['fieldset_access', 'Degrés d\'ouverture et licences',
|
||||
['Généralités', 'Degré (libre/interne/interdit)', 'Licence', 'CC2r']],
|
||||
|
||||
// E-mail de confirmation
|
||||
['fieldset_email', 'E-mail de confirmation',
|
||||
['Adresse e-mail']],
|
||||
];
|
||||
?>
|
||||
|
||||
<div class="fhb-layout">
|
||||
|
||||
<!-- Left: sortable ordered list of help blocks -->
|
||||
<div class="fhb-sortable-panel">
|
||||
<h3 class="fhb-panel-title">Ordre des blocs</h3>
|
||||
<p class="fhb-panel-desc">Glissez pour réorganiser</p>
|
||||
|
||||
<form class="fhb-sortable sortable"
|
||||
hx-post="/admin/actions/form-help-reorder.php"
|
||||
hx-trigger="end"
|
||||
hx-include="this"
|
||||
hx-swap="none">
|
||||
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
|
||||
<div class="htmx-indicator fhb-saving">Sauvegarde…</div>
|
||||
|
||||
<?php foreach ($orderedBlocks as $b): ?>
|
||||
<div class="fhb-block-card" data-key="<?= htmlspecialchars($b['key']) ?>">
|
||||
<input type="hidden" name="block[]" value="<?= htmlspecialchars($b['key']) ?>">
|
||||
<span class="fhb-drag-handle" aria-hidden="true">⠿</span>
|
||||
<div class="fhb-block-info">
|
||||
<span class="fhb-block-label"><?= htmlspecialchars($b['label']) ?></span>
|
||||
<?php if (trim($b['content']) !== ''): ?>
|
||||
<span class="fhb-block-preview"><?= htmlspecialchars(strlen($preview = trim($b['content'])) > 60 ? substr($preview, 0, 60) . '…' : $preview) ?></span>
|
||||
<?php else: ?>
|
||||
<span class="fhb-block-empty">— vide —</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<a href="/admin/contenus-edit.php?form_block=<?= urlencode($b['key']) ?>"
|
||||
class="btn btn--primary btn--sm fhb-edit-btn">Éditer</a>
|
||||
<div class="fhb-structure">
|
||||
<?php foreach ($pairs as [$helpKey, $fieldsetName, $inputs]):
|
||||
// Help block
|
||||
$b = $blocks[$helpKey] ?? ['content' => '', 'name' => '', 'enabled' => 0];
|
||||
$title = $b['name'] ?: ($fieldsetName ?? $helpKey);
|
||||
?>
|
||||
<div class="fhb-block-wrapper" data-key="<?= htmlspecialchars($helpKey) ?>">
|
||||
<div class="fhb-inline"
|
||||
hx-get="/admin/form-help-inline-fragment.php?key=<?= urlencode($helpKey) ?>"
|
||||
hx-trigger="load"
|
||||
hx-swap="outerHTML">
|
||||
<div class="fhb-inline-name"><?= htmlspecialchars($title) ?></div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Right: static form structure reference -->
|
||||
<div class="fhb-form-preview-panel">
|
||||
<h3 class="fhb-panel-title">Structure du formulaire</h3>
|
||||
<p class="fhb-panel-desc">Référence visuelle — non modifiable</p>
|
||||
|
||||
<div class="fhb-form-preview">
|
||||
<?php foreach ($formStructure as $item): ?>
|
||||
<?php if ($item['type'] === 'anchor'): ?>
|
||||
<?php
|
||||
$bData = $formHelpBlocks[$item['key']] ?? ['content' => '', 'sort_order' => 99];
|
||||
$hasContent = trim($bData['content'] ?? '') !== '';
|
||||
?>
|
||||
<div class="fhb-anchor <?= $hasContent ? 'fhb-anchor--filled' : 'fhb-anchor--empty' ?>">
|
||||
<span class="fhb-anchor-icon"><?= $hasContent ? '✎' : '○' ?></span>
|
||||
<span class="fhb-anchor-label"><?= htmlspecialchars(Database::FORM_HELP_LABELS[$item['key']] ?? $item['key']) ?></span>
|
||||
<?php if ($hasContent): ?>
|
||||
<span class="fhb-anchor-pos">#<?= (int)$bData['sort_order'] + 1 ?></span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php elseif ($item['type'] === 'fieldset'): ?>
|
||||
<div class="fhb-fieldset-preview">
|
||||
<div class="fhb-fieldset-legend"><?= htmlspecialchars($item['name']) ?></div>
|
||||
<ul class="fhb-fieldset-inputs">
|
||||
<?php foreach ($item['inputs'] as $inp): ?>
|
||||
<li><?= htmlspecialchars($inp) ?></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.fhb-layout -->
|
||||
<?php if ($fieldsetName !== null): ?>
|
||||
<div class="fhb-fieldset-card">
|
||||
<div class="fhb-fieldset-card-legend"><?= htmlspecialchars($fieldsetName) ?></div>
|
||||
<?php if ($inputs): ?>
|
||||
<ul class="fhb-fieldset-card-inputs">
|
||||
<?php foreach ($inputs as $inp): ?>
|
||||
<li><?= htmlspecialchars($inp) ?></li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var script = document.createElement('script');
|
||||
script.src = '<?= App::assetV('/assets/js/sortable.min.js') ?>';
|
||||
script.onload = initSortable;
|
||||
document.head.appendChild(script);
|
||||
|
||||
function initSortable() {
|
||||
htmx.onLoad(function (content) {
|
||||
var sortables = content.querySelectorAll('.sortable');
|
||||
for (var i = 0; i < sortables.length; i++) {
|
||||
(function (sortable) {
|
||||
var sortableInstance = new Sortable(sortable, {
|
||||
animation: 150,
|
||||
handle: '.fhb-drag-handle',
|
||||
ghostClass: 'fhb-ghost',
|
||||
chosenClass: 'fhb-chosen',
|
||||
dragClass: 'fhb-dragging',
|
||||
|
||||
filter: '.htmx-indicator',
|
||||
onMove: function (evt) {
|
||||
return evt.related.className.indexOf('htmx-indicator') === -1;
|
||||
},
|
||||
|
||||
onEnd: function () {
|
||||
this.option('disabled', true);
|
||||
}
|
||||
});
|
||||
|
||||
sortable.addEventListener('htmx:afterRequest', function () {
|
||||
sortableInstance.option('disabled', false);
|
||||
});
|
||||
})(sortables[i]);
|
||||
}
|
||||
});
|
||||
}
|
||||
var otScript = document.createElement('script');
|
||||
otScript.src = '<?= App::assetV('/assets/js/overtype.min.js') ?>';
|
||||
document.head.appendChild(otScript);
|
||||
})();
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user