fofos/fofos-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

the panels stop explaining themselves

Browse Source 
"The About page, in the order it is shown: a header, the text about you, the product, and the
manifesto." above four bands headed Header, About us, Product and Manifesto. "The photograph at the top,
and the line over it" above a photograph at the top and a line over it. "Who you are" above a box headed
About us.

Every one was a caption for something already visible, and together they were most of the vertical
space before any content — so the actual work started below the fold on a laptop.

The person using this is not a developer and is not a child. A heading names a thing; a sentence
underneath saying what the thing is says it twice and trusts them less each time.

Removed from About, Home, Galleries and the record sections. What stays is anything reporting STATE
rather than describing furniture — a count of photographs, a loading line, an error, a save
confirmation — because those say something the screen does not.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
pastilhas
2026-08-31 00:12:08 +01:00
co-authored by Claude Opus 5
parent a4c3cb3644
commit 5fb447cf21
5 changed files with 9 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/sections/AboutPanel.tsx
+7 -25
View File
@@ -137,22 +137,13 @@ export const AboutPanel = () => {
return (
<div className="flex size-full flex-col gap-4 overflow-auto p-4">
<div className="flex items-center gap-2">
<p className="flex-1 text-xs text-muted-foreground">
The About page, in the order it is shown: a header, the text about you, the product, and the
manifesto.
</p>
{/* Confirmation lives with the content rather than in the bar, because the bar's own button
has already gone back to saying "Save" by the time anybody looks up. */}
{saved && <span className="text-xs text-success">Saved</span>}
</div>
{/* Confirmation only. The order of the bands is the order of the page, which the bands
themselves already say — a sentence explaining that was a caption for something visible. */}
{saved && <p className="text-xs text-success">Saved</p>}
{/* ── HEADER: a photograph and a phrase over it ─────────────────────────────────────────── */}
<section className="flex flex-col gap-3 rounded-lg border border-border p-4">
<div>
<h3 className="text-sm font-medium">Header</h3>
<p className="text-xs text-muted-foreground">The photograph at the top, and the line over it.</p>
</div>
<h3 className="text-sm font-medium">Header</h3>
{/* 21/9 because that is what the page uses — `aspect-[21/9]` in about/partials.tsx. The two
have to agree or the admin shows a shape the site does not have, which is worse than showing
@@ -179,19 +170,13 @@ export const AboutPanel = () => {
{/* ── ABOUT US ─────────────────────────────────────────────────────────────────────────── */}
<section className="flex flex-col gap-3 rounded-lg border border-border p-4">
<div>
<h3 className="text-sm font-medium">About us</h3>
<p className="text-xs text-muted-foreground">Who you are.</p>
</div>
<h3 className="text-sm font-medium">About us</h3>
<RichText value={aboutText} onChange={setAboutText} placeholder="Tell people who you are." />
</section>
{/* ── PRODUTO: a video beside its text ─────────────────────────────────────────────────── */}
<section className="flex flex-col gap-3 rounded-lg border border-border p-4">
<div>
<h3 className="text-sm font-medium">Product</h3>
<p className="text-xs text-muted-foreground">What you make, and a video of it being made.</p>
</div>
<h3 className="text-sm font-medium">Product</h3>
{/* 16/9, matching the `aspect-video` the product block draws. */}
<MediaField
@@ -207,10 +192,7 @@ export const AboutPanel = () => {
{/* ── MANIFESTO ────────────────────────────────────────────────────────────────────────── */}
<section className="flex flex-col gap-3 rounded-lg border border-border p-4">
<div>
<h3 className="text-sm font-medium">Manifesto</h3>
<p className="text-xs text-muted-foreground">What you stand for.</p>
</div>
<h3 className="text-sm font-medium">Manifesto</h3>
<RichText value={manifesto} onChange={setManifesto} placeholder="The manifesto." />
</section>