mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 19:19:19 +02:00
c3a02e0aaa
Move the ~130-line $extraJsInline heredoc from admin/system.php into a
static file public/assets/js/system.js, loaded via $extraJs so the
template footer emits a normal <script src=…>.
Replace 4 inline style= attributes with named CSS modifier classes in
system.css:
- style="margin:0;border:none;padding:0" on .srv-section-title
→ .srv-section-title--compact
- style="margin-bottom:.75rem" on sub-heading <h3>
→ .srv-section-title--sub
- style="margin-bottom:0" on .php-grid
→ .php-grid--flush
- style="font-size:.84rem;color:var(--text-secondary)" on <label>
→ .log-toolbar label rule in system.css
The one remaining inline style (--disk-pct / --disk-color CSS custom
properties on .disk-bar) is intentionally kept: it carries PHP runtime
values that cannot be expressed in a static stylesheet.
62 lines
6.2 KiB
Markdown
62 lines
6.2 KiB
Markdown
# CSS & Semantic HTML Refactor
|
||
|
||
## CSS class audit: replace with semantic selectors (`admin.css` / `main.css` / `tfe.css` / `search.css`)
|
||
|
||
- [x] **`admin.css`**: Replace `.admin-main` with `.admin-body main` — already done; CSS uses `.admin-body main`
|
||
- [x] **`admin.css`**: Replace `.admin-page-title` with `.admin-body main > h1` — already done; CSS uses `.admin-body main > h1`
|
||
- [x] **`admin.css`**: Replace `.admin-alert` / `.admin-alert--error` / `.admin-alert--success` with `[role="alert"]` / `data-type="error|success"` attribute
|
||
- [x] **`admin.css`**: Replace `.admin-form-row` with `.admin-body form > div` — already done; CSS uses `.admin-form > div:not(.admin-form-footer)` grid pattern
|
||
- [x] **`admin.css`**: Replace `.admin-label` with `.admin-body form label` — already done; CSS uses `.admin-form > div > label`
|
||
- [x] **`admin.css`**: Replace `.admin-input` / `.admin-select` / `.admin-textarea` with native element selectors — already done; CSS targets native `input`, `select`, `textarea` inside `.admin-form`
|
||
- [x] **`admin.css`**: Replace `.admin-hint` with `.admin-body form small`
|
||
- [x] **`admin.css`**: Replace `.admin-table` with `.admin-body table` — already done; CSS uses `.admin-body table`
|
||
- [x] **`admin.css`**: Replace `.admin-fieldset` / `.admin-fieldset-legend` with `.admin-body fieldset` / `.admin-body legend` — already done; CSS uses `.admin-body fieldset` and `.admin-body legend`
|
||
- [x] **`main.css`**: Replace `.card__caption` with `.home-body .cards-container li p` or `li > a > p`
|
||
- [x] **`main.css`**: Replace `.card__media` with `.home-body figure`
|
||
- [x] **`tfe.css`**: Replace `.tfe-meta-list` selectors with `article dl`, `article dt`, `article dd` — already done
|
||
- [x] **`tfe.css`**: Replace `.tfe-media-block` with `aside figure` — already done
|
||
- [x] **`tfe.css`**: Replace `.tfe-file-caption` with `aside figcaption` — already done
|
||
- [x] **`search.css`**: Replace `.repertoire-col > h2` — already uses `.repertoire-index section > h2`
|
||
- [x] **`system.php`**: Move inline `<style>` block to `system.css`
|
||
- [x] **`system.php`**: Extract `$extraJsInline` JS block to `public/assets/js/system.js`; replace remaining inline `style=` attributes with CSS modifier classes (`.srv-section-title--compact`, `.srv-section-title--sub`, `.php-grid--flush`, `.log-toolbar label`)
|
||
|
||
## Template HTML changes to match
|
||
|
||
- [x] In all admin templates, replace `<p class="admin-hint">` with `<small>` elements — already done; partials emit `<small>` directly
|
||
- [x] In `tfe.php`, remove `class="tfe-meta-list"` — target via `article dl`
|
||
- [x] In `tfe.php`, remove `class="tfe-media-block"` — target via `aside figure`
|
||
- [x] In `tfe.php`, remove `class="tfe-file-caption"` — target via `aside figcaption`
|
||
- [x] In `index.php`, remove `class="card__caption"` — target via `li > a > p`
|
||
|
||
## Scattered inline styles in templates
|
||
|
||
- [x] `tfe.php` inline styles — already extracted (no `style=` attributes remain in `public/tfe.php`)
|
||
- [x] `admin/edit.php`: multiple `style=` on `.admin-form-row` and banner preview → modifier classes in `admin.css` — already done; no `style=` attributes remain in `edit.php`
|
||
|
||
## Admin semantic HTML (sections IX–XVI)
|
||
|
||
- [x] **`add.php`/`edit.php`**: Replace `<div class="admin-form-row">` with CSS grid on `<form>` children — already done via form partials; rows are bare `<div>` inside `.admin-form`
|
||
- [x] **`add.php`/`edit.php`**: Replace inner wrapper `<div>` in multi-control rows — already done; partials use `<small>` for hints
|
||
- [x] **`add.php`/`edit.php`**: Replace `<div class="admin-checkbox-list">` with `<ul>`; each `<label class="admin-checkbox-label">` becomes `<li>` containing `<label>`
|
||
- [x] **`add.php`/`edit.php`**: Renamed `<div class="admin-submit-wrap">` → `<div class="admin-form-footer">` in all 6 admin templates (`add.php`, `edit.php`, `login.php`, `account.php`, `import.php`, `pages-edit.php`) and updated all 8 CSS selectors in `admin.css` — `.admin-form > div:not(.admin-form-footer)`, `.admin-login-box .admin-form-footer`, etc.
|
||
- [x] **`add.php`/`edit.php`**: Replace `<div class="admin-alert admin-alert--error/--success">` with `<p role="alert">` / `<p role="status">` — already done via `flash-messages.php`
|
||
- [x] **`index.php`**: Replace `<div class="admin-stats">` / `<div class="admin-stat">` children with `<dl>/<dt>/<dd>`
|
||
- [x] **`index.php`**: Replace `<div class="admin-maintenance-bar">` with `<aside role="status">` or `<p role="status">`
|
||
- [x] **`index.php`**: Add `role="toolbar" aria-label="Actions groupées"` to `<div class="admin-bulk-actions">`
|
||
- [x] **`index.php`**: Add `scope="col"` to all `<th>` cells in the admin table
|
||
- [x] **`index.php`**: Add non-colour indicator + `aria-label="Statut : …"` to status badge `<span>` elements (via `status-badge.php` partial)
|
||
- [x] **`tags.php`**: Add `scope="col"` to `<th>` cells
|
||
- [x] **`tags.php`**: Move inline `style="margin-top:.35rem;"` on forms → `.admin-inline-form + .admin-inline-form` selector
|
||
- [x] **`thanks.php`**: Replace `<div class="admin-thesis-info">` with `<section>` + `<h2>` heading; CSS targets `main > section`
|
||
- [x] **`account.php`**: Replace `<div class="admin-account-status">` with `<dl>`; `__row` → `<div>`, `__label` → `<dt>`
|
||
- [x] **`account.php`**: Replace `<div class="admin-danger-zone__description">` with `<p>`
|
||
- [x] **`account.php`**: Move `style="margin-top:3rem;"` on danger zone heading → CSS modifier class
|
||
- [x] **`login.php`**: Wrap login content in `<main>` (currently no main landmark)
|
||
- [x] **`login.php`**: Extract inline styles on `.admin-form-row` and `.admin-form-footer` — `login.php` has no `style=` attributes; `.admin-login-box` modifier in `admin.css` already handles the compact layout
|
||
|
||
- [x] **`admin/import.php` inline styles** — extracted 4 inline `style=` attributes to CSS classes: `admin-error-list` (error `<ul>` margins), `admin-file-hint` (`<small>` display block + margin), `admin-import-results` (results panel `margin-top`), `admin-import-results__title` (results `<h2>` typography). All rules added to `admin.css` Import page section.
|
||
|
||
## Favicon
|
||
|
||
- [x] **`admin_favicon.svg` used as public-facing favicon** — created `public/assets/favicon.svg` (brand purple `#9557b5` lettermark “P”); `templates/head.php` now serves `favicon.svg` on public pages and `admin_favicon.svg` on admin pages
|