Remove inline styles from admin templates; extract to admin.css utility classes

- login.php: removed style= on .admin-form-row and .admin-label (already covered
  by .admin-login-box scoped rules); extracted submit-wrap spacing and full-width
  button to .admin-login-box .admin-submit-wrap and .admin-login-box .admin-btn
- account.php: style="margin-top:3rem" on danger-zone heading moved to
  .admin-section-title--danger modifier; <span style="color:..."> replaced with
  <small> element styled via .admin-danger-zone__description small
- add.php / edit.php / pages-edit.php: all style="align-items:start" removed from
  .admin-form-row (redundant — already the CSS default at line 116 of admin.css);
  banner preview inline styles extracted to .admin-banner-preview / .admin-banner-preview img;
  add-jury button margin extracted to .admin-add-jury-btn; cancel links use .admin-cancel-link

Zero inline style= attributes remain in login, account, add, edit, pages-edit.
This commit is contained in:
Pontoporeia
2026-04-01 16:55:29 +02:00
parent 573747303f
commit 77576e966c
7 changed files with 80 additions and 38 deletions

23
TODO.md
View File

@@ -601,8 +601,7 @@ Goal: rename the tables and column to the canonical M2M pattern (`tags`, `thesis
- `tfe.php` lines 148, 170-172, 193: `font-style:italic`, `margin-top:1.5rem`, - `tfe.php` lines 148, 170-172, 193: `font-style:italic`, `margin-top:1.5rem`,
`font-size:.88rem;color:#666`, `color:#999;font-style:italic``.tfe-note-value`, `font-size:.88rem;color:#666`, `color:#999;font-style:italic``.tfe-note-value`,
`.tfe-back-link`, `.tfe-restricted` in `tfe.css` `.tfe-back-link`, `.tfe-restricted` in `tfe.css`
- `admin/edit.php`: multiple `style=` on `.admin-form-row` and banner preview → modifier - [x] `admin/edit.php` + `add.php` + `pages-edit.php`: `style="align-items:start;"` on `.admin-form-row` removed (already default in CSS); banner preview → `.admin-banner-preview` + `.admin-banner-preview img`; jury add-button → `.admin-add-jury-btn`; cancel links → `.admin-cancel-link`
classes in `admin.css`
- [x] `index.php` line 146: `style="padding:2rem;color:#666;"``.cards-empty` in `main.css` - [x] `index.php` line 146: `style="padding:2rem;color:#666;"``.cards-empty` in `main.css`
- [x] **`.site-nav__right` is a duplicate of `.site-nav__link`** - removed `.site-nav__right` block - [x] **`.site-nav__right` is a duplicate of `.site-nav__link`** - removed `.site-nav__right` block
@@ -960,15 +959,12 @@ Once the above is applied, the following classes become deletable (element name
the badge/code stays as `<dd>` content. the badge/code stays as `<dd>` content.
Removes three classes. Removes three classes.
- [ ] **`<h2 class="admin-section-title">` is correct** - scoped subsection headings inside - [x] **`<h2 class="admin-section-title">` is correct** `style="margin-top:3rem;"` on the
`<main>` at level 2 are right. The `style="margin-top:3rem;"` on the danger zone heading danger zone heading moved to `.admin-section-title--danger` modifier rule in `admin.css`.
→ move to CSS (`.admin-section-title + .admin-danger-zone` or a modifier class).
- [ ] **`<div class="admin-danger-zone">` containing a `<div class="admin-danger-zone__description">` - [x] **Inline muted description text in `.admin-danger-zone__description`**`<span style="color:…">` replaced
and a `<form>`** - the description div wrapping a `<strong>` and a `<span>` is over-wrapped. with `<small>` element; CSS rule `.admin-danger-zone__description small` provides the muted colour/size.
The `<strong>` and following text are already inline; they don't need a block wrapper. (Full replacement of wrapper div with `<p>` tracked separately as structural change.)
Replace `<div class="admin-danger-zone__description">` with `<p>` (it is a paragraph of
warning text). Removes one class and one div.
### XIV - `public/admin/login.php` ### XIV - `public/admin/login.php`
@@ -978,9 +974,10 @@ Once the above is applied, the following classes become deletable (element name
no semantic HTML counterpart). Minor improvement: wrap the whole login box in `<main>` so no semantic HTML counterpart). Minor improvement: wrap the whole login box in `<main>` so
it is the page's main landmark (currently there is none on the login page). it is the page's main landmark (currently there is none on the login page).
- [ ] **Inline styles on the login form rows** - `style="grid-template-columns:1fr;border:none;padding:.4rem 0;"` - [x] **Inline styles on the login form rows** `style="grid-template-columns:1fr;…"` and
on `.admin-form-row` and `style="margin-top:1rem;padding-top:.5rem;"` on `.admin-submit-wrap` `style="font-size:…"` removed (already handled by `.admin-login-box .admin-form-row` /
→ extract as a `.admin-form-row--compact` modifier and use in `admin.css`. `.admin-login-box .admin-label` in CSS). Submit-wrap spacing and full-width button extracted
to `.admin-login-box .admin-submit-wrap` and `.admin-login-box .admin-btn` rules in `admin.css`.
### XV - `public/admin/pages-edit.php` ### XV - `public/admin/pages-edit.php`

View File

@@ -99,14 +99,14 @@ if (empty($_SESSION['csrf_token'])) {
<?php if ($hasPassword): ?> <?php if ($hasPassword): ?>
<!-- Danger zone: remove password --> <!-- Danger zone: remove password -->
<h2 class="admin-section-title admin-section-title--danger" style="margin-top:3rem;">Zone de danger</h2> <h2 class="admin-section-title admin-section-title--danger">Zone de danger</h2>
<div class="admin-danger-zone"> <div class="admin-danger-zone">
<div class="admin-danger-zone__description"> <div class="admin-danger-zone__description">
<strong>Supprimer la configuration du mot de passe PHP</strong><br> <strong>Supprimer la configuration du mot de passe PHP</strong><br>
<span style="color:var(--admin-text-muted);font-size:.9rem;"> <small>
Supprime <code>config/admin_credentials.php</code>. L'accès admin Supprime <code>config/admin_credentials.php</code>. L'accès admin
dépendra uniquement de l'authentification nginx Basic Auth si elle est configurée. dépendra uniquement de l'authentification nginx Basic Auth si elle est configurée.
</span> </small>
</div> </div>
<form method="post" action="/admin/actions/account.php" <form method="post" action="/admin/actions/account.php"
onsubmit="return confirm('Supprimer le fichier de mot de passe PHP ? L\'accès admin ne sera protégé que par nginx Basic Auth.')"> onsubmit="return confirm('Supprimer le fichier de mot de passe PHP ? L\'accès admin ne sera protégé que par nginx Basic Auth.')">

View File

@@ -107,7 +107,7 @@ function wasSelected($key, $value) {
</div> </div>
<!-- Lecteur·ices (dynamic) --> <!-- Lecteur·ices (dynamic) -->
<div class="admin-form-row" style="align-items:start;"> <div class="admin-form-row">
<label class="admin-label">Lecteur·ices :</label> <label class="admin-label">Lecteur·ices :</label>
<div id="jury-lecteurs-list" class="admin-jury-list"> <div id="jury-lecteurs-list" class="admin-jury-list">
<!-- rows injected by JS; start with one empty row --> <!-- rows injected by JS; start with one empty row -->
@@ -119,7 +119,7 @@ function wasSelected($key, $value) {
<button type="button" class="admin-btn-remove" onclick="removeJuryRow(this)" aria-label="Supprimer ce lecteur">✕</button> <button type="button" class="admin-btn-remove" onclick="removeJuryRow(this)" aria-label="Supprimer ce lecteur">✕</button>
</div> </div>
</div> </div>
<button type="button" class="admin-btn-secondary" style="margin-top:.5rem;" <button type="button" class="admin-btn-secondary admin-add-jury-btn"
onclick="addJuryRow()">+ Ajouter un·e lecteur·ice</button> onclick="addJuryRow()">+ Ajouter un·e lecteur·ice</button>
</div> </div>
</fieldset> </fieldset>
@@ -235,7 +235,7 @@ function wasSelected($key, $value) {
</div> </div>
<!-- Synopsis --> <!-- Synopsis -->
<div class="admin-form-row" style="align-items:start;"> <div class="admin-form-row">
<label class="admin-label" for="synopsis">Synopsis :</label> <label class="admin-label" for="synopsis">Synopsis :</label>
<textarea class="admin-textarea" id="synopsis" name="synopsis" <textarea class="admin-textarea" id="synopsis" name="synopsis"
rows="7" required><?= old('synopsis') ?></textarea> rows="7" required><?= old('synopsis') ?></textarea>
@@ -275,7 +275,7 @@ function wasSelected($key, $value) {
</div> </div>
<!-- Image couverture --> <!-- Image couverture -->
<div class="admin-form-row" style="align-items:start;"> <div class="admin-form-row">
<label class="admin-label">Image de couverture :</label> <label class="admin-label">Image de couverture :</label>
<div class="admin-file-input"> <div class="admin-file-input">
<input type="file" id="couverture" name="couverture" accept="image/jpeg,image/png"> <input type="file" id="couverture" name="couverture" accept="image/jpeg,image/png">
@@ -284,7 +284,7 @@ function wasSelected($key, $value) {
</div> </div>
<!-- Image bannière --> <!-- Image bannière -->
<div class="admin-form-row" style="align-items:start;"> <div class="admin-form-row">
<label class="admin-label">Image bannière (accueil) :</label> <label class="admin-label">Image bannière (accueil) :</label>
<div class="admin-file-input"> <div class="admin-file-input">
<input type="file" id="banner" name="banner" accept="image/jpeg,image/png,image/webp"> <input type="file" id="banner" name="banner" accept="image/jpeg,image/png,image/webp">
@@ -293,7 +293,7 @@ function wasSelected($key, $value) {
</div> </div>
<!-- Fichiers --> <!-- Fichiers -->
<div class="admin-form-row" style="align-items:start;"> <div class="admin-form-row">
<label class="admin-label">Fichiers du TFE :</label> <label class="admin-label">Fichiers du TFE :</label>
<div class="admin-file-input"> <div class="admin-file-input">
<input type="file" id="files" name="files[]" multiple <input type="file" id="files" name="files[]" multiple

View File

@@ -170,7 +170,7 @@ try {
</div> </div>
</div> </div>
<div class="admin-form-row" style="align-items:start;"> <div class="admin-form-row">
<label class="admin-label">Lecteur·ices :</label> <label class="admin-label">Lecteur·ices :</label>
<div> <div>
<div id="jury-lecteurs-list" class="admin-jury-list"> <div id="jury-lecteurs-list" class="admin-jury-list">
@@ -196,7 +196,7 @@ try {
<?php endforeach; ?> <?php endforeach; ?>
<?php endif; ?> <?php endif; ?>
</div> </div>
<button type="button" class="admin-btn-secondary" style="margin-top:.5rem;" <button type="button" class="admin-btn-secondary admin-add-jury-btn"
onclick="addJuryRow()">+ Ajouter un·e lecteur·ice</button> onclick="addJuryRow()">+ Ajouter un·e lecteur·ice</button>
</div> </div>
</div> </div>
@@ -236,7 +236,7 @@ try {
</select> </select>
</div> </div>
<div class="admin-form-row" style="align-items:start;"> <div class="admin-form-row">
<label class="admin-label" for="context_note">Note contextuelle :</label> <label class="admin-label" for="context_note">Note contextuelle :</label>
<div> <div>
<textarea class="admin-textarea" id="context_note" name="context_note" <textarea class="admin-textarea" id="context_note" name="context_note"
@@ -270,7 +270,7 @@ try {
value="<?= htmlspecialchars($thesis['subtitle'] ?? '') ?>"> value="<?= htmlspecialchars($thesis['subtitle'] ?? '') ?>">
</div> </div>
<div class="admin-form-row" style="align-items:start;"> <div class="admin-form-row">
<label class="admin-label" for="synopsis">Synopsis :</label> <label class="admin-label" for="synopsis">Synopsis :</label>
<textarea class="admin-textarea" id="synopsis" name="synopsis" rows="7" required><?= htmlspecialchars($thesis['synopsis'] ?? '') ?></textarea> <textarea class="admin-textarea" id="synopsis" name="synopsis" rows="7" required><?= htmlspecialchars($thesis['synopsis'] ?? '') ?></textarea>
</div> </div>
@@ -323,15 +323,14 @@ try {
</div> </div>
<!-- Image bannière --> <!-- Image bannière -->
<div class="admin-form-row" style="align-items:start;"> <div class="admin-form-row">
<label class="admin-label">Image bannière (accueil) :</label> <label class="admin-label">Image bannière (accueil) :</label>
<div> <div>
<?php if (!empty($thesis['banner_path'])): ?> <?php if (!empty($thesis['banner_path'])): ?>
<div style="margin-bottom:.5rem;"> <div class="admin-banner-preview">
<img src="/media.php?path=<?= urlencode($thesis['banner_path']) ?>" <img src="/media.php?path=<?= urlencode($thesis['banner_path']) ?>"
alt="Bannière actuelle" alt="Bannière actuelle">
style="max-width:320px;max-height:100px;object-fit:cover;border:1px solid #444;"> <label class="admin-checkbox-label">
<label class="admin-checkbox-label" style="margin-top:.35rem;display:block;">
<input type="checkbox" name="remove_banner" value="1"> Supprimer la bannière <input type="checkbox" name="remove_banner" value="1"> Supprimer la bannière
</label> </label>
</div> </div>
@@ -352,7 +351,7 @@ try {
<div class="admin-submit-wrap"> <div class="admin-submit-wrap">
<button type="submit" class="admin-btn">Enregistrer</button> <button type="submit" class="admin-btn">Enregistrer</button>
<a href="/admin/thanks.php?id=<?= $thesisId ?>" class="admin-btn-secondary" style="margin-left:.75rem;">Annuler</a> <a href="/admin/thanks.php?id=<?= $thesisId ?>" class="admin-btn-secondary admin-cancel-link">Annuler</a>
</div> </div>
</form> </form>
</main> </main>

View File

@@ -33,12 +33,12 @@ $pageTitle = 'Connexion';
<div class="admin-alert admin-alert--error">⚠ <?= htmlspecialchars($error) ?></div> <div class="admin-alert admin-alert--error">⚠ <?= htmlspecialchars($error) ?></div>
<?php endif; ?> <?php endif; ?>
<form method="post" action="/admin/login.php" class="admin-form"> <form method="post" action="/admin/login.php" class="admin-form">
<div class="admin-form-row" style="grid-template-columns:1fr;border:none;padding:.4rem 0;"> <div class="admin-form-row">
<label class="admin-label" style="font-size:.82rem;color:var(--admin-text-muted);" for="password">Mot de passe</label> <label class="admin-label" for="password">Mot de passe</label>
<input class="admin-input" type="password" id="password" name="password" required autofocus> <input class="admin-input" type="password" id="password" name="password" required autofocus>
</div> </div>
<div class="admin-submit-wrap" style="margin-top:1rem;padding-top:.5rem;"> <div class="admin-submit-wrap">
<button type="submit" class="admin-btn" style="width:100%;">Se connecter</button> <button type="submit" class="admin-btn">Se connecter</button>
</div> </div>
</form> </form>
</div> </div>

View File

@@ -88,7 +88,7 @@ JS;
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>"> <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
<input type="hidden" name="slug" value="<?= htmlspecialchars($slug) ?>"> <input type="hidden" name="slug" value="<?= htmlspecialchars($slug) ?>">
<div class="admin-form-row" style="align-items:start;"> <div class="admin-form-row">
<label class="admin-label" for="content">Contenu (Markdown) :</label> <label class="admin-label" for="content">Contenu (Markdown) :</label>
<div> <div>
<textarea class="admin-textarea" id="content" name="content" <textarea class="admin-textarea" id="content" name="content"
@@ -99,7 +99,7 @@ JS;
<div class="admin-submit-wrap"> <div class="admin-submit-wrap">
<button type="submit" class="admin-btn">Enregistrer</button> <button type="submit" class="admin-btn">Enregistrer</button>
<a href="/admin/pages.php" class="admin-btn-secondary" style="margin-left:.75rem;">Annuler</a> <a href="/admin/pages.php" class="admin-btn-secondary admin-cancel-link">Annuler</a>
</div> </div>
</form> </form>
</main> </main>

View File

@@ -604,6 +604,15 @@
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
.admin-login-box .admin-submit-wrap {
margin-top: 1rem;
padding-top: 0.5rem;
}
.admin-login-box .admin-btn {
width: 100%;
}
/* Import page */ /* Import page */
.admin-import-area { .admin-import-area {
display: flex; display: flex;
@@ -835,6 +844,43 @@
line-height: 1.5; line-height: 1.5;
} }
.admin-danger-zone__description small {
color: var(--admin-text-muted);
font-size: 0.9rem;
}
.admin-section-title--danger {
margin-top: 3rem;
}
/* Banner image preview in edit form */
.admin-banner-preview {
margin-bottom: 0.5rem;
}
.admin-banner-preview img {
max-width: 320px;
max-height: 100px;
object-fit: cover;
border: 1px solid #444;
display: block;
}
.admin-banner-preview .admin-checkbox-label {
margin-top: 0.35rem;
display: block;
}
/* Cancel / secondary action link in submit row */
.admin-cancel-link {
margin-left: 0.75rem;
}
/* Add-jury button below list */
.admin-add-jury-btn {
margin-top: 0.5rem;
}
/* ============================================================ /* ============================================================
ACCESSIBILITY UTILITIES ACCESSIBILITY UTILITIES
============================================================ */ ============================================================ */