RZREDZ.UI

Steps and timelines

The steps of a long job as it runs - a release, a publish, an install - each with what it found, and the events of a record's history, one under the other.

A job's steps

step-list is an ol of steps, each with an icon, its name and a step-list-detail at the end; data-state says where it is: done, current - its icon turns while motion is allowed, ready - next, it waits for a press and its icon stays still, failed, kept - failed with the earlier state kept - and pending. A job's panel is a card with sticky-top, under the app header while the page scrolls, its head a dot, a title and the time, and a progress.

Publishing the site

01:42
  1. Check the templates84 pages
  2. Resize the images2 failed, the old ones kept
  3. Write the pages31 of 84
  4. Rebuild the sitemap
  5. Clear the CDN
<section class="card" aria-labelledby="step-list-job-title">
	<div class="card-header hstack gap-8"><span class="dot dot-primary"></span><h2 id="step-list-job-title">Publishing the site</h2><span class="ms-auto tabular-nums text-muted">01:42</span></div>
	<progress class="progress progress-xs" max="5" value="2" aria-labelledby="step-list-job-title"></progress>
	<div class="card-body">
		<ol class="step-list">
			<li data-state="done"><i class="bi bi-check-circle-fill" aria-hidden="true"></i>Check the templates<span class="step-list-detail">84 pages</span></li>
			<li data-state="kept"><i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i>Resize the images<span class="step-list-detail">2 failed, the old ones kept</span></li>
			<li data-state="current" aria-current="step"><i class="bi bi-arrow-repeat" aria-hidden="true"></i>Write the pages<span class="step-list-detail">31 of 84</span></li>
			<li data-state="pending"><i class="bi bi-circle" aria-hidden="true"></i>Rebuild the sitemap</li>
			<li data-state="pending"><i class="bi bi-circle" aria-hidden="true"></i>Clear the CDN</li>
		</ol>
	</div>
</section>

In a narrow box

A step-list-detail stays at the end of the line while the name and it fit, and falls under the name, aligned with it, when they do not, at any width of the page. An empty one takes no room, so it can wait for its words, and it can hold a badge.

  1. Download4.6 MB
  2. Compare every file with the release2,126 files
  3. Apply the changesmatched 2,126 · fetched 14 · 4.6 MB · 2 migrations · 1 seed
  4. Check the schemaClean
  5. Switch to the new version
<ol class="step-list max-w-320" aria-label="Updating the site">
	<li data-state="done"><i class="bi bi-check-circle-fill" aria-hidden="true"></i>Download<span class="step-list-detail">4.6 MB</span></li>
	<li data-state="done"><i class="bi bi-check-circle-fill" aria-hidden="true"></i>Compare every file with the release<span class="step-list-detail">2,126 files</span></li>
	<li data-state="done"><i class="bi bi-check-circle-fill" aria-hidden="true"></i>Apply the changes<span class="step-list-detail">matched 2,126 · fetched 14 · 4.6 MB · 2 migrations · 1 seed</span></li>
	<li data-state="done"><i class="bi bi-check-circle-fill" aria-hidden="true"></i>Check the schema<span class="step-list-detail"><span class="badge badge-subtle-success">Clean</span></span></li>
	<li data-state="ready"><i class="bi bi-play-circle" aria-hidden="true"></i>Switch to the new version<span class="step-list-detail"></span></li>
</ol>

More states, and a step's body

Six more states: warning - done with a warning, info, ask - the job waits for the person, waiting - for something else, skipped and locked. A step-list-body after a step's name is a block under it, for what the step found or asks; in a list with bodies every step is a block, and the current one, the one that asks and the one that failed are tinted.

  1. Copy the files2,140 files
  2. Check the links3 broken
  3. Point the domain here

    Set the A record of lagoon.example to 203.0.113.24 at your registrar, then check it.

  4. Issue the certificateafter the domain
  5. Import the old commentsskipped
  6. Switch off the old sitean owner's step
<ol class="step-list" aria-label="Moving the site">
	<li data-state="done"><i class="bi bi-check-circle-fill" aria-hidden="true"></i>Copy the files<span class="step-list-detail">2,140 files</span></li>
	<li data-state="warning"><i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i>Check the links<span class="step-list-detail">3 broken</span></li>
	<li data-state="ask" aria-current="step"><i class="bi bi-question-circle-fill" aria-hidden="true"></i>Point the domain here<div class="step-list-body vstack gap-8"><p>Set the A record of lagoon.example to 203.0.113.24 at your registrar, then check it.</p><div class="hstack gap-8"><button class="btn btn-sm btn-primary" type="button">Check the domain</button><button class="btn btn-sm" type="button">Skip for now</button></div></div></li>
	<li data-state="waiting"><i class="bi bi-hourglass-split" aria-hidden="true"></i>Issue the certificate<span class="step-list-detail">after the domain</span></li>
	<li data-state="skipped"><i class="bi bi-skip-forward flip-rtl" aria-hidden="true"></i>Import the old comments<span class="step-list-detail">skipped</span></li>
	<li data-state="locked"><i class="bi bi-lock" aria-hidden="true"></i>Switch off the old site<span class="step-list-detail">an owner's step</span></li>
</ol>

A pipeline

stage-list is an ol of stages, each a frame: first a line with its icon and its name, then what it says, and a stage-list-actions slot for its buttons at the bottom. The stages run across from a region of 768 px and down below it, joined by a line; data-state takes the steps' states.

  1. Build2 min 14 s
  2. Test412 of 580 checks
  3. ApproveAn owner signs off
  4. DeployAfter the approval
<ol class="stage-list" aria-label="The release of 2.4">
	<li data-state="done"><span class="hstack gap-8"><i class="bi bi-check-circle-fill" aria-hidden="true"></i><strong>Build</strong></span><span class="fs-12">2 min 14 s</span><div class="stage-list-actions"><button class="btn btn-sm" type="button">Log</button></div></li>
	<li data-state="current" aria-current="step"><span class="hstack gap-8"><i class="bi bi-arrow-repeat" aria-hidden="true"></i><strong>Test</strong></span><span class="fs-12">412 of 580 checks</span><div class="stage-list-actions"><button class="btn btn-sm" type="button">Log</button><button class="btn btn-sm" type="button">Stop</button></div></li>
	<li data-state="ask"><span class="hstack gap-8"><i class="bi bi-question-circle-fill" aria-hidden="true"></i><strong>Approve</strong></span><span class="fs-12">An owner signs off</span><div class="stage-list-actions"><button class="btn btn-sm btn-primary" type="button">Approve</button></div></li>
	<li data-state="waiting"><span class="hstack gap-8"><i class="bi bi-hourglass-split" aria-hidden="true"></i><strong>Deploy</strong></span><span class="fs-12">After the approval</span></li>
</ol>

A stage that is next and waits for a press is ready: it wears the frame of current, and its icon stays still.

  1. Download4.6 MB
  2. InstallWaits for your press
  3. VerifyAfter the install
<ol class="stage-list" aria-label="The update">
	<li data-state="done"><span class="hstack gap-8"><i class="bi bi-check-circle-fill" aria-hidden="true"></i><strong>Download</strong></span><span class="fs-12">4.6 MB</span></li>
	<li data-state="ready" aria-current="step"><span class="hstack gap-8"><i class="bi bi-play-circle" aria-hidden="true"></i><strong>Install</strong></span><span class="fs-12">Waits for your press</span><div class="stage-list-actions"><button class="btn btn-sm btn-primary" type="button">Start</button></div></li>
	<li data-state="pending"><span class="hstack gap-8"><i class="bi bi-circle" aria-hidden="true"></i><strong>Verify</strong></span><span class="fs-12">After the install</span></li>
</ol>

A timeline

timeline is an ol of events joined by a line: each starts with an icon tile in its tone, then a timeline-time, the words, and a dl of details when it has them.

  1. Invoice issued
    Amount
    12,500 THB
    Due
    November 9
  2. Reminder sent
  3. Paid by PromptPay
    Reference
    PP-88214
<ol class="timeline" aria-label="The payment's history">
	<li><span class="icon-tile icon-tile-info"><i class="bi bi-receipt" aria-hidden="true"></i></span><time class="timeline-time" datetime="2026-11-02T09:14">November 2, 09:14</time>Invoice issued<dl><dt>Amount</dt><dd>12,500 THB</dd><dt>Due</dt><dd>November 9</dd></dl></li>
	<li><span class="icon-tile icon-tile-warning"><i class="bi bi-bell" aria-hidden="true"></i></span><time class="timeline-time" datetime="2026-11-08T10:00">November 8, 10:00</time>Reminder sent</li>
	<li><span class="icon-tile icon-tile-success"><i class="bi bi-check-lg" aria-hidden="true"></i></span><time class="timeline-time" datetime="2026-11-09T16:41">November 9, 16:41</time>Paid by PromptPay<dl><dt>Reference</dt><dd class="font-monospace">PP-88214</dd></dl></li>
</ol>

Accessibility

  • The words carry the state; the icon and the color repeat them - write the state in the step's detail when its name does not say it. Mark the current step aria-current="step"; a step or a stage that asks the person holds its own buttons.
  • A pipeline's stages are a list in their order, read one after the other wherever they stand on the screen; the current, the asking and the failed one are also outlined in forced colors.
  • A job that runs while the person waits says its new step in a polite live region the page keeps - one line per step, not every tick of the clock.
  • A timeline's times are <time datetime>; its details are a description list, read as pairs.

Tokens

From css/components/step-list.css. It declares --redz-step-edge, --redz-step-top on its root, never on rows or items.

It reads the theme's --redz-space-4, --redz-space-2, --redz-space-16, --redz-text-muted, --redz-space-8, --redz-text, --redz-success, --redz-primary, --redz-danger, --redz-warning, --redz-info, --redz-text-faint, --redz-space-12, --redz-radius-8, --redz-primary-subtle, --redz-warning-subtle, --redz-danger-subtle, --redz-fs-14, --redz-border, --redz-border-strong, --redz-radius-12, --redz-bg, --redz-fs-12.