Result box: color-code by status + friendly error messages from error codes (#105)
- Backend create/can validation paths emit machine-readable error codes (slug_taken, slug_invalid, content_empty, content_too_large, expiry_invalid, rate_limited, ...) alongside the human message - new.html JS maps codes to plain-language guidance with generic fallback - Result card colored via --ok/--err/--warn left border (result-ok/err/warn) - docs/API.md error section documents the code field - Tests assert the code on every validation path
This commit is contained in:
@@ -296,6 +296,13 @@ td a.slug:hover { color: var(--accent); }
|
||||
.toast.success { border-color: var(--ok); color: var(--ok); }
|
||||
.toast.error { border-color: var(--err); color: var(--err); }
|
||||
|
||||
/* result box color-coding (#105): colored left border + text tint per status */
|
||||
.result-ok, .result-err, .result-warn { border-left: 4px solid transparent; padding-left: 10px; }
|
||||
.result-ok { border-left-color: var(--ok); color: var(--ok); }
|
||||
.result-err { border-left-color: var(--err); color: var(--err); }
|
||||
.result-warn { border-left-color: var(--warn); color: var(--warn); }
|
||||
.result-ok a { color: var(--ok); }
|
||||
|
||||
/* protection section rhythm (#20) */
|
||||
.protect { display: flex; flex-direction: column; gap: 2px; }
|
||||
.protect .pw-row { padding: 2px 8px 4px; }
|
||||
|
||||
Reference in New Issue
Block a user