Client design points: hyphens, quotes, news order and upload, timeline, page headers, photos #36

Merged

iec-admin merged 1 commit from claw/client-points-oct5-9b3e into main

2026-10-13 05:06:38 +00:00

iec-admin commented

2026-10-13 05:06:29 +00:00

Contributor

Closes #35. The six open points from the client's 5 October email (point 6 shipped in #34).

What changed

#	Point	Change
1	No hyphens	Justified body copy no longer hyphenates (`hyphens: none`).
2	Quotes justified	Homepage staff quotes and the About quote are justified.
3a	News order	Up/down arrows on each news admin card, with "n of N". A move saves at once. `NEWS_SORT` now puts the editor's order first, so the public page follows it. A new article is added at the top.
3b	News photo upload	Each article gets the click-or-drop thumbnail the events admin already had. The uploader moved to `components/admin/ImageThumbUploader.tsx` and both editors use it.
4	Timeline	A second point in the same year no longer sets its year in grey.
5	Page headers	The heading block is centred top to bottom in the title box, on every page header with a photo.
7	Photos	`Photo` retries the original file when the optimized variant fails, before giving up. A slot with no photo shows the company mark on navy. Editors still see the striped marker and filename in the admin.

Walkthrough

Story: as the Ballantyne team, the design points we raised are fixed.

Driven in a browser (Playwright) against npm run dev on this branch, 2026-10-12:

/, /about, /events, /products/cyber, /legal-notices: no text element computes hyphens: auto (was every paragraph).
/: both staff quotes compute text-align: justify; /about quote the same.
/admin/news: "Move article down" on card 1 → "Order saved — live now"; the admin list and the public /news both show the swapped order; still swapped after a reload; moved back and both restored.
/admin/news: 7 upload thumbnails. A file set on a card with no photo → its path became /api/images/liiba-logo.jpg.webp.
/about timeline: one year colour, rgb(134, 99, 42); no --cont class left.
Page headers at 1920, 1440, 1100 and 900px on nine pages: space above the copy equals space below on all 36 (e.g. /events 95/95, 58/58, 40/40, 40/40). Text stays clear of the photo: smallest gap 36px.
/news: the three no-photo stories and the logo story show the navy panel, no label. /events with every /_next/image request blocked: the photos still load, from the original files.

Reference: no reference system applies; these are the client's own layout requests, checked against the screenshots they sent.

QA Execution

2026-10-12, local: npx tsc --noEmit exit 0; npm run build exit 0; the browser run above.

Not done in this PR

The three 2021 stories still have no photograph; they show the company panel until someone uploads one.
The timeline fix was not seen with real data: the local timeline has no year with two points. The grey-year rule is deleted, so there is nothing left to style them differently.
Justified text without hyphens opens wider word gaps in narrow columns (visible in the first staff quote). That is the direct result of points 1 and 2 together.
News order: an article added through the admin before this change was numbered last. Production has only the seven seeded stories, numbered newest first, so nothing moves there.
Whether the client's striped placeholder was an optimizer failure is inferred, not proven: the live site showed no failing image when crawled.
No automated tests; the repo has no test runner.

🤖 Generated with Claude Code

Closes #35. The six open points from the client's 5 October email (point 6 shipped in #34). ## What changed | # | Point | Change | |---|---|---| | 1 | No hyphens | Justified body copy no longer hyphenates (`hyphens: none`). | | 2 | Quotes justified | Homepage staff quotes and the About quote are justified. | | 3a | News order | Up/down arrows on each news admin card, with "n of N". A move saves at once. `NEWS_SORT` now puts the editor's order first, so the public page follows it. A new article is added at the top. | | 3b | News photo upload | Each article gets the click-or-drop thumbnail the events admin already had. The uploader moved to `components/admin/ImageThumbUploader.tsx` and both editors use it. | | 4 | Timeline | A second point in the same year no longer sets its year in grey. | | 5 | Page headers | The heading block is centred top to bottom in the title box, on every page header with a photo. | | 7 | Photos | `Photo` retries the original file when the optimized variant fails, before giving up. A slot with no photo shows the company mark on navy. Editors still see the striped marker and filename in the admin. | ## Walkthrough Story: as the Ballantyne team, the design points we raised are fixed. Driven in a browser (Playwright) against `npm run dev` on this branch, 2026-10-12: 1. `/`, `/about`, `/events`, `/products/cyber`, `/legal-notices`: no text element computes `hyphens: auto` (was every paragraph). 2. `/`: both staff quotes compute `text-align: justify`; `/about` quote the same. 3. `/admin/news`: "Move article down" on card 1 → "Order saved — live now"; the admin list and the public `/news` both show the swapped order; still swapped after a reload; moved back and both restored. 4. `/admin/news`: 7 upload thumbnails. A file set on a card with no photo → its path became `/api/images/liiba-logo.jpg.webp`. 5. `/about` timeline: one year colour, `rgb(134, 99, 42)`; no `--cont` class left. 6. Page headers at 1920, 1440, 1100 and 900px on nine pages: space above the copy equals space below on all 36 (e.g. `/events` 95/95, 58/58, 40/40, 40/40). Text stays clear of the photo: smallest gap 36px. 7. `/news`: the three no-photo stories and the logo story show the navy panel, no label. `/events` with every `/_next/image` request blocked: the photos still load, from the original files. Reference: no reference system applies; these are the client's own layout requests, checked against the screenshots they sent. ## QA Execution 2026-10-12, local: `npx tsc --noEmit` exit 0; `npm run build` exit 0; the browser run above. ## Not done in this PR - The three 2021 stories still have no photograph; they show the company panel until someone uploads one. - The timeline fix was not seen with real data: the local timeline has no year with two points. The grey-year rule is deleted, so there is nothing left to style them differently. - Justified text without hyphens opens wider word gaps in narrow columns (visible in the first staff quote). That is the direct result of points 1 and 2 together. - News order: an article added through the admin before this change was numbered last. Production has only the seven seeded stories, numbered newest first, so nothing moves there. - Whether the client's striped placeholder was an optimizer failure is inferred, not proven: the live site showed no failing image when crawled. - No automated tests; the repo has no test runner. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

iec-admin added 1 commit

2026-10-13 05:06:29 +00:00

feat: client design points — no hyphens, justified quotes, news order and photo upload, timeline, centred page headers, photo fallback (#35 ) 0f1b655150

1. Body copy no longer hyphenates.
2. Homepage and About quotes are justified.
3. News admin: move an article up or down (saved at once; the public
   page follows the same order) and upload a photo by click or drop.
4. Timeline: a second point in the same year sets its year like the rest.
5. Page header copy is centred top to bottom in the title box.
7. A photo that fails through the image optimizer is retried from the
   original file; a slot with no photo shows the company mark on navy
   instead of a striped placeholder.

fix #35

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>