From a34c9828aa484f3cd08815ba085b73adadbfc89b Mon Sep 17 00:00:00 2001 From: Abdul Wahab Date: Mon, 3 Aug 2026 15:52:57 +0500 Subject: [PATCH] Add the layout screen's portfolio board and default color to full palette The index board grows the parts only a portfolio has: a project rail, a support row, and a pagination rail restated at the foot of the handset stack. They mount behind a prop rather than for every board, because the motion screen reads the same index body through :nth-of-type and a stray sibling would shift its scenes. Their sheet loads after the boundary, corner, and depth sheets so it wins ties on source order. The color strategy question now opens on Full palette. Prepared with AI assistance (Cursor). Co-authored-by: Cursor --- picker/components/Artboard.astro | 40 ++ picker/components/QuestionScreen.astro | 1 + picker/layouts/Picker.astro | 4 + picker/pages/index.astro | 4 +- picker/styles/screens/layout-portfolio.css | 733 +++++++++++++++++++++ 5 files changed, 780 insertions(+), 2 deletions(-) create mode 100644 picker/styles/screens/layout-portfolio.css diff --git a/picker/components/Artboard.astro b/picker/components/Artboard.astro index ed0b26286..c633af8d6 100644 --- a/picker/components/Artboard.astro +++ b/picker/components/Artboard.astro @@ -39,6 +39,15 @@ interface Props { reaching back to the screens that came before them. */ carry?: boolean; + /* + The layout screen's index board carries parts no other board draws: a + pagination rail on the handset, and the project rail and support row that + only the freeform answer places (layout-portfolio.css parks them until it + does). Mounted only where asked, because the motion screen reads the same + index body through :nth-of-type and an extra sibling would shift its + scenes. + */ + portfolioExtras?: boolean; } const { @@ -50,6 +59,7 @@ const { typeHook = false, cursor = false, carry = false, + portfolioExtras = false, } = Astro.props; const type = mode === 'type'; const ops = surface === 'operate'; @@ -196,6 +206,9 @@ const hook = type ? '' : undefined; than glyphs. Same four bands as the set version below, drawn in bars: a page title, two staggered entries, and the carousel rail. */
+ {portfolioExtras && ( + + )} {[0, 1].map((n) => (
@@ -207,6 +220,12 @@ const hook = type ? '' : undefined;
))} + {portfolioExtras && ( + + )}
@@ -411,6 +430,9 @@ const hook = type ? '' : undefined;
{/* No page title here. At this width the display step would take the card, and what a handset shows of an index is the work. */} + {portfolioExtras && ( + + )} {[0, 1].map(() => (
@@ -431,6 +453,24 @@ const hook = type ? '' : undefined;
))} + {portfolioExtras && ( + + + {/* The desktop pagination rail restated at the foot of the stack. */} +
+ +
+ {[0, 1, 2, 3].map((n) => ( + + ))} +
+ +
+ + )}
) : (
diff --git a/picker/components/QuestionScreen.astro b/picker/components/QuestionScreen.astro index eaf2b2c99..6f37465b7 100644 --- a/picker/components/QuestionScreen.astro +++ b/picker/components/QuestionScreen.astro @@ -105,6 +105,7 @@ const tabsAttrs = perSurface ? surfaceTabsAttrs(name) : null; phone={phone} cursor={slug === 'motion'} carry={slug !== 'motion'} + portfolioExtras={slug === 'layout'} /> ))}
diff --git a/picker/layouts/Picker.astro b/picker/layouts/Picker.astro index da0efd474..997527b4b 100644 --- a/picker/layouts/Picker.astro +++ b/picker/layouts/Picker.astro @@ -8,6 +8,10 @@ import '../styles/screens/layout.css'; import '../styles/screens/boundaries.css'; import '../styles/screens/corners.css'; import '../styles/screens/depth.css'; +// The layout screen's portfolio board, loaded after the three sheets above on +// purpose: it pins that board's material against their committed defaults by +// winning ties on source order. The header of the file has the argument. +import '../styles/screens/layout-portfolio.css'; // The design context document that replaces the picker after submission. import '../styles/design-context.css'; diff --git a/picker/pages/index.astro b/picker/pages/index.astro index acfc8d961..9679503c7 100644 --- a/picker/pages/index.astro +++ b/picker/pages/index.astro @@ -742,7 +742,7 @@ const questions = [ Color strategy