selfpost/docs/assets/panel-redesign/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Panel redesign · three directions</title>
<link rel="stylesheet" href="shared/brand.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<main>
  <p class="kicker">SelfPost · panel redesign · stage 1</p>
  <h1>Three directions, three key screens</h1>
  <p class="lead">Overview, an outbound domain and sign-in, drawn three ways. Pick one (or a mix);
  the remaining screens are then drawn in that direction only. Serve this folder from the repository
  root — the pages load the panel's own fonts and mark by relative path.</p>

  <h2>Shared by all three</h2>
  <ul>
    <li><strong>Navigation by mail direction.</strong> Overview · <em>Outbound</em> (Domains, Log, Queue, DMARC reports) ·
      <em>Inbound</em> (Domains, Log, Queue) · <em>Server</em> (System log, Backup, Users, Settings). Account, Help and
      Sign out live with the user name. Eleven flat entries become four groups.</li>
    <li><strong>One block per DNS record.</strong> Today "DNS status" and "records to publish" show every host twice.
      Here a record is one block: its status, what to publish, and — only on a mismatch — what DNS holds now.</li>
    <li><strong>The domain page stops being nine cards.</strong> DNS and applications are the page; limits, report address,
      export and delete are "rarely changed" and sit behind one click.</li>
    <li><strong>Applications are a table</strong>; editing one is its own form page instead of a three-column panel inside a list row.</li>
    <li>Brand carriers stay: the stamp, brick, IBM Plex. No inline <code>style</code> or script in any mockup.</li>
  </ul>

  <h2>The directions</h2>
  <div class="cards">
    <section>
      <p class="kicker">A · Pico CSS 2.1</p>
      <h3>Blank</h3>
      <p>The panel as a postal form: one centred sheet, numbered sections, mono field labels, a postmark for the
      verdict. Overview is a ledger — one row per check, the row opens into its detail. Sections on the first
      header row, the section's pages on the second.</p>
      <p class="links"><a href="a/status.html">Overview</a><a href="a/domain.html">Domain</a><a href="a/login.html">Sign in</a></p>
    </section>
    <section>
      <p class="kicker">B · Tabler 1.5 (Bootstrap 5)</p>
      <h3>Console</h3>
      <p>The classic admin kit: ink sidebar with every page one click away, status tiles, cards and tables in a
      12-column grid, read-only input groups with Copy. Almost nothing is ours; it also looks the most like
      every other admin panel.</p>
      <p class="links"><a href="b/status.html">Overview</a><a href="b/domain.html">Domain</a><a href="b/login.html">Sign in</a></p>
    </section>
    <section>
      <p class="kicker">C · Bulma 1.0</p>
      <h3>Counter</h3>
      <p>Brick top bar with CSS-only hover menus. Overview is the whole service on one screen: a health strip over
      the outbound and inbound domain lists. The domain page gets a sticky side menu. Softer, rounder, the
      boldest use of the brand colour.</p>
      <p class="links"><a href="c/status.html">Overview</a><a href="c/domain.html">Domain</a><a href="c/login.html">Sign in</a></p>
    </section>
  </div>

  <h2>What each one costs</h2>
  <div class="scroll">
  <table>
    <thead><tr><th></th><th>A · Pico</th><th>B · Tabler</th><th>C · Bulma</th></tr></thead>
    <tbody>
      <tr><th>Licence</th><td>MIT</td><td>MIT</td><td>MIT</td></tr>
      <tr><th>Vendored CSS (minified)</th><td>83 KB</td><td>694 KB</td><td>678 KB</td></tr>
      <tr><th>JavaScript</th><td>none</td><td>none for these screens; Bootstrap bundle only if dropdowns / modals are wanted</td><td>none</td></tr>
      <tr><th>Build step</th><td>none</td><td>none</td><td>none (a Sass build could trim it; not needed)</td></tr>
      <tr><th>CSP <code>default-src 'self'</code></th>
        <td>needs <code>img-src 'self' data:</code> — 14 <code>data:</code> SVGs (select chevron, checkbox tick)</td>
        <td>needs <code>img-src 'self' data:</code> — 28 <code>data:</code> SVGs</td>
        <td>works as is — no <code>data:</code> URIs</td></tr>
      <tr><th>Our own CSS in the mockup</th><td>≈ 200 lines</td><td>≈ 80 lines</td><td>≈ 100 lines</td></tr>
      <tr><th>Markup style</th><td>semantic HTML, few classes — closest to today's templates</td><td>class-heavy Bootstrap markup</td><td>class-based, moderate</td></tr>
      <tr><th>Own components</th><td>sheet, ledger row, postmark, record block</td><td>sidebar group label, record block</td><td>health strip, record block</td></tr>
      <tr><th>Recognisable</th><td>most</td><td>least</td><td>middle</td></tr>
    </tbody>
  </table>
  </div>

  <h2>Open points</h2>
  <ul>
    <li>Icons in B come from Tabler Icons (MIT) through its webfont for the mockup; the panel would vendor only the used glyphs as an SVG sprite.</li>
    <li><em>Inbound log</em> rides on the agreed <code>inbound-antispam-panel</code> journal; <em>Inbound queue</em> is a new filter over the one Postfix queue and needs its own roadmap row.</li>
    <li>Dark scheme and the narrow-screen shell are not drawn at this stage; all three libraries ship both.</li>
    <li>The earlier <a href="../panel-ui/index.html">panel-ui</a> experiment and <a href="../../plans/panel-redesign.md">panel-redesign.md</a> are superseded by whichever direction is accepted.</li>
  </ul>
</main>
</body>
</html>