PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-05-06 19:19:19 +02:00
Code Issues Packages Projects Releases Wiki Activity
Files
057d2539eb3a54e075162139e4b870640918371b
xamxam/todo/01-css-semantic-refactor.md
Pontoporeia c3a02e0aaa system.php: extract inline JS and style= attrs into separate assets 
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.
2026-04-06 15:33:08 +02:00

6.2 KiB
Raw Blame History

CSS & Semantic HTML Refactor

CSS class audit: replace with semantic selectors (admin.css / main.css / tfe.css / search.css)

  • admin.css: Replace .admin-main with .admin-body main — already done; CSS uses .admin-body main
  • admin.css: Replace .admin-page-title with .admin-body main > h1 — already done; CSS uses .admin-body main > h1
  • admin.css: Replace .admin-alert / .admin-alert--error / .admin-alert--success with [role="alert"] / data-type="error|success" attribute
  • admin.css: Replace .admin-form-row with .admin-body form > div — already done; CSS uses .admin-form > div:not(.admin-form-footer) grid pattern
  • admin.css: Replace .admin-label with .admin-body form label — already done; CSS uses .admin-form > div > label
  • admin.css: Replace .admin-input / .admin-select / .admin-textarea with native element selectors — already done; CSS targets native input, select, textarea inside .admin-form
  • admin.css: Replace .admin-hint with .admin-body form small
  • admin.css: Replace .admin-table with .admin-body table — already done; CSS uses .admin-body table
  • 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
  • main.css: Replace .card__caption with .home-body .cards-container li p or li > a > p
  • main.css: Replace .card__media with .home-body figure
  • tfe.css: Replace .tfe-meta-list selectors with article dl, article dt, article dd — already done
  • tfe.css: Replace .tfe-media-block with aside figure — already done
  • tfe.css: Replace .tfe-file-caption with aside figcaption — already done
  • search.css: Replace .repertoire-col > h2 — already uses .repertoire-index section > h2
  • system.php: Move inline <style> block to system.css
  • 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

  • In all admin templates, replace <p class="admin-hint"> with <small> elements — already done; partials emit <small> directly
  • In tfe.php, remove class="tfe-meta-list" — target via article dl
  • In tfe.php, remove class="tfe-media-block" — target via aside figure
  • In tfe.php, remove class="tfe-file-caption" — target via aside figcaption
  • In index.php, remove class="card__caption" — target via li > a > p

Scattered inline styles in templates

  • tfe.php inline styles — already extracted (no style= attributes remain in public/tfe.php)
  • 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)

  • 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

  • add.php/edit.php: Replace inner wrapper <div> in multi-control rows — already done; partials use <small> for hints

  • add.php/edit.php: Replace <div class="admin-checkbox-list"> with <ul>; each <label class="admin-checkbox-label"> becomes <li> containing <label>

  • 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.

  • 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

  • index.php: Replace <div class="admin-stats"> / <div class="admin-stat"> children with <dl>/<dt>/<dd>

  • index.php: Replace <div class="admin-maintenance-bar"> with <aside role="status"> or <p role="status">

  • index.php: Add role="toolbar" aria-label="Actions groupées" to <div class="admin-bulk-actions">

  • index.php: Add scope="col" to all <th> cells in the admin table

  • index.php: Add non-colour indicator + aria-label="Statut : …" to status badge <span> elements (via status-badge.php partial)

  • tags.php: Add scope="col" to <th> cells

  • tags.php: Move inline style="margin-top:.35rem;" on forms → .admin-inline-form + .admin-inline-form selector

  • thanks.php: Replace <div class="admin-thesis-info"> with <section> + <h2> heading; CSS targets main > section

  • account.php: Replace <div class="admin-account-status"> with <dl>; __row → <div>, __label → <dt>

  • account.php: Replace <div class="admin-danger-zone__description"> with <p>

  • account.php: Move style="margin-top:3rem;" on danger zone heading → CSS modifier class

  • login.php: Wrap login content in <main> (currently no main landmark)

  • 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

  • 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

  • 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
Reference in New Issue View Git Blame Copy Permalink