From db5a6046477108ca8618fb541add85407d20fb62 Mon Sep 17 00:00:00 2001 From: Lucas Winther Date: Fri, 30 Oct 2026 15:47:01 +0100 Subject: [PATCH] fix(ui): cover tiles keep the monogram for landscape images; quiet pill header nav Landscape images (imported video frames, slide pages) would lose most of the picture in a 3:4 crop, so the tile keeps its monogram; portrait and near-square images (w/h <= 1.05) fade in over it, cropped from the centre. The header nav follows the mockup's segmented-control style: muted text, no underline, the current area raised in accent. Co-Authored-By: Claude Opus 5.5 --- packages/ui/src/index.ts | 2 +- packages/ui/src/primitives.tsx | 23 +++++++++++++++++++++-- packages/ui/src/tokens.css | 14 ++++++++------ packages/ui/test/primitives.test.tsx | 12 ++++++++++++ 4 files changed, 42 insertions(+), 9 deletions(-) diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 11877ed..f884c61 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1,2 +1,2 @@ export { AppShell } from "./AppShell"; -export { Pill, SegmentedToggle, ProgressBar, FloatingActionBar, CourseCover, monogram } from "./primitives"; +export { Pill, SegmentedToggle, ProgressBar, FloatingActionBar, CourseCover, coverFits, monogram } from "./primitives"; diff --git a/packages/ui/src/primitives.tsx b/packages/ui/src/primitives.tsx index efa08a4..be3f76f 100644 --- a/packages/ui/src/primitives.tsx +++ b/packages/ui/src/primitives.tsx @@ -1,4 +1,4 @@ -import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from "react"; +import { useState, type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from "react"; export function Pill({ variant = "default", className, ...rest }: { variant?: "default" | "primary" | "ghost" } & ButtonHTMLAttributes) { const cls = ["stc-pill", variant !== "default" && `stc-pill--${variant}`, className].filter(Boolean).join(" "); @@ -36,11 +36,30 @@ export function monogram(title: string): string { return letters.join("").toUpperCase(); } +/** + * Whether an image of this size suits the 3:4 cover tile. Portrait and near-square images are cropped from the + * centre; landscape ones (video frames, slide pages) would lose most of the picture, so the tile keeps its monogram. + */ +export function coverFits(width: number, height: number): boolean { + return width > 0 && height > 0 && width / height <= 1.05; +} + export function CourseCover({ title, image, accent }: { title: string; image?: string; accent?: string }) { const style = accent ? ({ "--cfg": accent } as CSSProperties) : undefined; + // The monogram is always there; the image fades in over it only once it has loaded and fits the tile. + const [shown, setShown] = useState(null); return (
- {image ? : } + + {image ? ( + setShown(coverFits(e.currentTarget.naturalWidth, e.currentTarget.naturalHeight) ? image : null)} + onError={() => setShown(null)} + /> + ) : null}
); } diff --git a/packages/ui/src/tokens.css b/packages/ui/src/tokens.css index 9f5630e..4afc6f7 100644 --- a/packages/ui/src/tokens.css +++ b/packages/ui/src/tokens.css @@ -24,11 +24,12 @@ code, pre { font-family: var(--mono); } /* shell */ .stc-top { position: sticky; top: 0; z-index: 30; height: var(--top); display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--ground); border-bottom: 1px solid var(--line); } -.stc-nav { display: flex; align-items: center; gap: 16px; } -.stc-nav a { color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 500; } -.stc-nav a:hover, .stc-nav a.active { color: var(--head); } -.stc-nav a.active { box-shadow: inset 0 -2px 0 var(--accent-dim); } -.stc-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } +/* quiet pill nav, as the mockup's segmented control: muted text, the current area raised in accent */ +.stc-nav { display: flex; align-items: center; gap: 2px; } +.stc-nav a { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 16px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500; transition: background 120ms ease-out, color 120ms ease-out; } +.stc-nav a:hover { color: var(--text); } +.stc-nav a.active, .stc-nav a[aria-current="page"] { background: var(--raised); color: var(--accent); } +.stc-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (max-width: 680px) { .stc-nav { display: none; } } .stc-shell { display: flex; align-items: flex-start; } .stc-side { position: sticky; top: var(--top); flex: none; width: var(--sidew); height: calc(100vh - var(--top)); overflow-y: auto; background: var(--side); border-right: 1px solid var(--line); } @@ -62,4 +63,5 @@ code, pre { font-family: var(--mono); } /* cover */ .stc-cover { flex: none; position: relative; width: var(--cw, 44px); aspect-ratio: 3 / 4; border-radius: 6px; background: var(--cbg, var(--raised)); color: var(--cfg, var(--accent)); border: 1px solid color-mix(in srgb, var(--cfg, var(--accent)) 18%, transparent); overflow: hidden; font: 600 calc(var(--cw, 44px) * .34) / 1 var(--sans); letter-spacing: -.03em; display: flex; align-items: flex-end; padding: calc(var(--cw, 44px) * .12); } -.stc-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } +.stc-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 120ms ease-out; } +.stc-cover img[data-shown] { opacity: 1; } diff --git a/packages/ui/test/primitives.test.tsx b/packages/ui/test/primitives.test.tsx index 775fbf1..22a38c2 100644 --- a/packages/ui/test/primitives.test.tsx +++ b/packages/ui/test/primitives.test.tsx @@ -17,3 +17,15 @@ test("SegmentedToggle marks the active option", () => { const html = renderToString( {}} options={[{ value: "a", label: "A" }, { value: "b", label: "B" }]} />); expect(html).toMatch(/aria-pressed="true"[^>]*>B { + const { coverFits } = await import("../src"); + const html = renderToString(); + expect(html).toContain(">MD<"); + expect(html).toContain('src="/api/courses/x/cover"'); + expect(html).not.toContain("data-shown"); // hidden until loaded and measured + expect(coverFits(600, 800)).toBe(true); // portrait + expect(coverFits(500, 500)).toBe(true); // square + expect(coverFits(640, 360)).toBe(false); // a 16:9 video frame keeps the monogram + expect(coverFits(0, 0)).toBe(false); +});