cedricAbonnel/varlog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit form: categorie, date et SEO deplaces en colonne droite

Browse Source
This commit is contained in:
Cedric Abonnel
2026-05-12 01:05:10 +02:00
parent 1f64d461e7
commit 048cd06b2a
1 changed files with 235 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/post_form.php
+152 -62
View File
@@ -13,11 +13,19 @@ $dateValue = isset($published_at)
data-uuid="<?= htmlspecialchars($uuid) ?>" data-uuid="<?= htmlspecialchars($uuid) ?>"
data-insert-url="<?= htmlspecialchars($insertUrl ?? '') ?>" data-insert-url="<?= htmlspecialchars($insertUrl ?? '') ?>"
hidden></div> hidden></div>
<form method="POST" action="<?= htmlspecialchars($formAction) ?>">
<div class="row g-4"> <div class="row g-4">
<div class="col-lg-8"> <div class="col-lg-8">
<?php endif; ?>
<h1 class="mb-4"><?= $action === 'edit' ? 'Modifier l\'article' : 'Nouvel article' ?></h1> <h1 class="mb-4">Modifier l'article</h1>
<?php else: ?>
<h1 class="mb-4">Nouvel article</h1>
<form method="POST" action="<?= htmlspecialchars($formAction) ?>" enctype="multipart/form-data">
<?php endif; ?>
<?php if (!empty($errors)): ?> <?php if (!empty($errors)): ?>
<div class="alert alert-danger"> <div class="alert alert-danger">
@@ -29,7 +37,6 @@ $dateValue = isset($published_at)
</div> </div>
<?php endif; ?> <?php endif; ?>
<form method="POST" action="<?= htmlspecialchars($formAction) ?>"<?= $action === 'create' ? ' enctype="multipart/form-data"' : '' ?>>
<div class="mb-3"> <div class="mb-3">
<label for="title" class="form-label">Titre</label> <label for="title" class="form-label">Titre</label>
<input type="text" class="form-control" id="title" name="title" required <input type="text" class="form-control" id="title" name="title" required
@@ -46,6 +53,7 @@ $dateValue = isset($published_at)
placeholder="généré automatiquement depuis le titre"> placeholder="généré automatiquement depuis le titre">
</div> </div>
<?php if ($action === 'create'): ?>
<div class="mb-3"> <div class="mb-3">
<label for="category" class="form-label">Catégorie</label> <label for="category" class="form-label">Catégorie</label>
<div class="d-flex align-items-center gap-2"> <div class="d-flex align-items-center gap-2">
@@ -58,7 +66,7 @@ $dateValue = isset($published_at)
<small id="cat-hint" class="text-muted d-block mt-1"></small> <small id="cat-hint" class="text-muted d-block mt-1"></small>
<div id="cat-free-swatches" class="d-flex flex-wrap gap-1 mt-2"></div> <div id="cat-free-swatches" class="d-flex flex-wrap gap-1 mt-2"></div>
</div> </div>
<?php endif; ?>
<div class="mb-2"> <div class="mb-2">
<small class="text-muted"> <small class="text-muted">
@@ -72,6 +80,7 @@ $dateValue = isset($published_at)
<textarea class="form-control font-monospace" id="content" name="content" rows="12"><?= htmlspecialchars($content ?? '') ?></textarea> <textarea class="form-control font-monospace" id="content" name="content" rows="12"><?= htmlspecialchars($content ?? '') ?></textarea>
</div> </div>
<?php if ($action === 'create'): ?>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-6"> <div class="col-md-6">
<label for="published_at" class="form-label">Date de publication</label> <label for="published_at" class="form-label">Date de publication</label>
@@ -86,7 +95,6 @@ $dateValue = isset($published_at)
</div> </div>
</div> </div>
<?php if ($action === 'create'): ?>
<div class="mb-3"> <div class="mb-3">
<label for="files" class="form-label">Ajouter des fichiers</label> <label for="files" class="form-label">Ajouter des fichiers</label>
<input type="file" class="form-control" id="files" name="files[]" multiple> <input type="file" class="form-control" id="files" name="files[]" multiple>
@@ -185,12 +193,38 @@ $dateValue = isset($published_at)
<?php endif; ?> <?php endif; ?>
<?php if ($action === 'edit'): ?> <?php if ($action === 'edit'): ?>
</div><!-- /col-lg-8 -->
<div class="col-lg-4">
<div class="mb-3">
<label for="category" class="form-label">Catégorie</label>
<div class="d-flex align-items-center gap-2">
<input type="text" class="form-control form-control-sm" id="category" name="category"
value="<?= htmlspecialchars($category ?? '') ?>"
placeholder="ex : informatique, loisirs, photo…"
autocomplete="off">
<div id="cat-swatch" title="" style="width:40px;height:28px;border-radius:6px;flex-shrink:0;background:#e5e7eb;transition:background .25s"></div>
</div>
<small id="cat-hint" class="text-muted d-block mt-1"></small>
<div id="cat-free-swatches" class="d-flex flex-wrap gap-1 mt-2"></div>
</div>
<div class="mb-3">
<label for="published_at" class="form-label">Date de publication</label>
<input type="datetime-local" class="form-control" id="published_at" name="published_at" value="<?= $dateValue ?>">
<div class="form-check mt-2">
<input class="form-check-input" type="checkbox" id="published" name="published"
<?= ($published ?? false) ? 'checked' : '' ?>>
<label class="form-check-label" for="published">Publié</label>
</div>
</div>
<div class="mb-3"> <div class="mb-3">
<label for="revision_comment" class="form-label">Commentaire de révision <small class="text-muted">(optionnel)</small></label> <label for="revision_comment" class="form-label">Commentaire de révision <small class="text-muted">(optionnel)</small></label>
<input type="text" class="form-control" id="revision_comment" name="revision_comment" <input type="text" class="form-control" id="revision_comment" name="revision_comment"
placeholder="ex. Correction typos, ajout section X…"> placeholder="ex. Correction typos, ajout section X…">
</div> </div>
<?php endif; ?>
<div class="card mb-3 border-secondary"> <div class="card mb-3 border-secondary">
<div class="card-header bg-transparent py-2"> <div class="card-header bg-transparent py-2">
@@ -243,67 +277,14 @@ $dateValue = isset($published_at)
</div> </div>
</div> </div>
<div class="d-flex align-items-center gap-3 flex-wrap"> <div class="d-flex align-items-center gap-3 flex-wrap mb-4">
<button type="submit" class="btn btn-success">Enregistrer</button> <button type="submit" class="btn btn-success">Enregistrer</button>
<a href="/" class="btn btn-secondary">Annuler</a> <a href="/" class="btn btn-secondary">Annuler</a>
<?php if ($action === 'edit'): ?>
<span id="autosave-indicator" class="text-muted small"></span> <span id="autosave-indicator" class="text-muted small"></span>
<?php endif; ?>
</div> </div>
</form>
<?php if ($action === 'edit' && !empty($existingFiles)): ?> <hr class="my-3">
<?php foreach ($existingFiles as $i => $f): ?>
<form id="del-file-<?= $i ?>" method="POST"
action="/?action=delete_file&uuid=<?= rawurlencode($uuid) ?>">
<input type="hidden" name="name" value="<?= htmlspecialchars($f['name']) ?>">
</form>
<?php endforeach; ?>
<?php endif; ?>
<?php if ($action === 'edit' && !empty($article['revisions'])): ?>
<hr class="my-4">
<div>
<button class="btn btn-sm btn-link text-secondary text-decoration-none p-0 fw-semibold"
type="button" data-bs-toggle="collapse" data-bs-target="#historyPanel">
▸ Historique des révisions (<?= count($article['revisions']) ?>)
</button>
<div class="collapse mt-3" id="historyPanel">
<table class="table table-sm table-hover align-middle">
<thead>
<tr><th>#</th><th>Date</th><th>Titre à l'époque</th><th>Commentaire</th><th></th></tr>
</thead>
<tbody>
<?php foreach (array_reverse($article['revisions']) as $rev): ?>
<tr>
<td class="text-muted small"><?= (int)($rev['n'] ?? 0) ?></td>
<td class="small text-nowrap">
<?= htmlspecialchars(date('d/m/Y H:i', strtotime((string)($rev['date'] ?? '')))) ?>
</td>
<td class="small text-truncate" style="max-width:200px">
<?= htmlspecialchars($rev['title'] ?? '') ?>
</td>
<td class="small text-muted">
<?= htmlspecialchars($rev['comment'] ?? '') ?: '<span class="text-muted">–</span>' ?>
</td>
<td>
<a href="/?action=diff&uuid=<?= rawurlencode($uuid) ?>&rev=<?= (int)($rev['n'] ?? 0) ?>"
class="btn btn-outline-secondary btn-sm" target="_blank">
Diff
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
<?php endif; ?>
<?php if ($action === 'edit'): ?>
</div><!-- /col-lg-8 -->
<div class="col-lg-4">
<?php $sidebarImages = array_filter($existingFiles ?? [], fn ($f) => $f['is_image']); ?> <?php $sidebarImages = array_filter($existingFiles ?? [], fn ($f) => $f['is_image']); ?>
<?php if ($sidebarImages): ?> <?php if ($sidebarImages): ?>
@@ -375,9 +356,118 @@ $dateValue = isset($published_at)
</a> </a>
<?php endif; ?> <?php endif; ?>
</div> </div>
</div><!-- /col-lg-4 -->
</div><!-- /col-lg-4 -->
</div><!-- /row --> </div><!-- /row -->
</form>
<?php if (!empty($existingFiles)): ?>
<?php foreach ($existingFiles as $i => $f): ?>
<form id="del-file-<?= $i ?>" method="POST"
action="/?action=delete_file&uuid=<?= rawurlencode($uuid) ?>">
<input type="hidden" name="name" value="<?= htmlspecialchars($f['name']) ?>">
</form>
<?php endforeach; ?>
<?php endif; ?>
<?php if (!empty($article['revisions'])): ?>
<hr class="my-4">
<div>
<button class="btn btn-sm btn-link text-secondary text-decoration-none p-0 fw-semibold"
type="button" data-bs-toggle="collapse" data-bs-target="#historyPanel">
▸ Historique des révisions (<?= count($article['revisions']) ?>)
</button>
<div class="collapse mt-3" id="historyPanel">
<table class="table table-sm table-hover align-middle">
<thead>
<tr><th>#</th><th>Date</th><th>Titre à l'époque</th><th>Commentaire</th><th></th></tr>
</thead>
<tbody>
<?php foreach (array_reverse($article['revisions']) as $rev): ?>
<tr>
<td class="text-muted small"><?= (int)($rev['n'] ?? 0) ?></td>
<td class="small text-nowrap">
<?= htmlspecialchars(date('d/m/Y H:i', strtotime((string)($rev['date'] ?? '')))) ?>
</td>
<td class="small text-truncate" style="max-width:200px">
<?= htmlspecialchars($rev['title'] ?? '') ?>
</td>
<td class="small text-muted">
<?= htmlspecialchars($rev['comment'] ?? '') ?: '<span class="text-muted">–</span>' ?>
</td>
<td>
<a href="/?action=diff&uuid=<?= rawurlencode($uuid) ?>&rev=<?= (int)($rev['n'] ?? 0) ?>"
class="btn btn-outline-secondary btn-sm" target="_blank">
Diff
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
<?php endif; ?>
<?php else: /* create */ ?>
<div class="card mb-3 border-secondary">
<div class="card-header bg-transparent py-2">
<button class="btn btn-sm btn-link text-secondary text-decoration-none p-0 fw-semibold"
type="button" data-bs-toggle="collapse" data-bs-target="#seoPanel" aria-expanded="false">
▸ SEO — titre, description, image
</button>
</div>
<div class="collapse" id="seoPanel">
<div class="card-body">
<div class="mb-3">
<label for="seo_title" class="form-label">
Titre SEO
<small class="text-muted">(balise &lt;title&gt; et og:title)</small>
</label>
<input type="text" class="form-control" id="seo_title" name="seo_title"
maxlength="70"
value="<?= htmlspecialchars($seoTitle ?? '') ?>"
placeholder="Généré automatiquement depuis le titre">
<div class="d-flex justify-content-between mt-1">
<small class="text-muted">Idéal : 30–60 caractères</small>
<small id="seo_title_counter" class="text-muted">0 / 60</small>
</div>
</div>
<div class="mb-3">
<label for="seo_description" class="form-label">
Description SEO
<small class="text-muted">(meta description et og:description)</small>
</label>
<textarea class="form-control" id="seo_description" name="seo_description"
rows="3" maxlength="200"
placeholder="Générée automatiquement depuis le début du contenu"><?= htmlspecialchars($seoDescription ?? '') ?></textarea>
<div class="d-flex justify-content-between mt-1">
<small class="text-muted">Idéal : 120–155 caractères</small>
<small id="seo_desc_counter" class="text-muted">0 / 155</small>
</div>
</div>
<div class="mb-2">
<label for="og_image" class="form-label">
Image Open Graph
<small class="text-muted">(URL absolue, optionnel)</small>
</label>
<input type="url" class="form-control font-monospace" id="og_image" name="og_image"
value="<?= htmlspecialchars($ogImage ?? '') ?>"
placeholder="https://varlog.a5l.fr/…">
</div>
</div>
</div>
</div>
<div class="d-flex align-items-center gap-3 flex-wrap">
<button type="submit" class="btn btn-success">Enregistrer</button>
<a href="/" class="btn btn-secondary">Annuler</a>
</div>
</form>
<?php endif; ?> <?php endif; ?>