Skip to content

feat(design): inline and centred header layouts, and a desktop-width preview - #838

Closed
mortondev wants to merge 1 commit into
feat/portal-design-v2-phase2-sectionsfrom
feat/portal-design-v2-phase2-header
Closed

mortondev wants to merge 1 commit into
feat/portal-design-v2-phase2-sectionsfrom
feat/portal-design-v2-phase2-header

Conversation

@mortondev

@mortondev mortondev commented Oct 30, 2026 •

Copy link
Copy Markdown
Member

The sixth of the stack that builds a new design engine for the portal. This one adds inline and centred header layouts, and lets the Appearance preview show desktop layouts as visitors see them. Behind the portalDesignV2 Labs switch; with it off, nothing changes.

Header layouts

  • Inline puts the portal menu beside the logo; centred centres the logo and the menu. Below md an inline header folds back to two rows, so the menu always has room.
  • Stacked keeps today's markup exactly, so the legacy theme and a converted design render as before. The other two are marked data-qb-section="header".
  • Preview: in the admin preview the header follows the draft's layout over the saved one, through a context the frame fills from the draft design's attributes.
  • Editing: Appearance offers the three layouts as drawn tiles under Sections › Header.

A desktop-width preview

The Appearance preview frame is narrower than a desktop browser, so desktop layouts such as an inline header and the filter panel never showed there. The desktop preview now lays the portal out at 1280px and scales it to fit. The legacy settings page's preview is unchanged.

Verification

  • Typecheck, lint, the production build and the server-function manifest check pass.
  • Unit suite: 22,321 passed, no failures.
  • Style snapshots, 16 pages: unchanged with the engine off and on.
  • Checked in a real browser against the production build: the inline and centred headers in the scaled preview, with no console errors.
  • New tests: two rows on legacy and for stacked; inline with the two-row menu below md; the draft layout winning in the preview.

@mortondev
mortondev added this pull request to stack #833 October 30, 2026 19:27
@mortondev mortondev changed the title feat(design): inline and centred header layouts feat(design): inline and centred header layouts, and a desktop-width preview Oct 30, 2026
@mortondev
mortondev force-pushed the feat/portal-design-v2-phase2-header branch from b9c26d0 to 72f30ad Compare October 30, 2026 20:19
@mortondev
mortondev force-pushed the feat/portal-design-v2-phase2-header branch from 72f30ad to 128825b Compare October 30, 2026 20:40
A design can put the portal menu beside the logo (inline) or centre the
logo and menu (centred). Below md an inline header folds back to two rows,
so the menu always has room. Stacked keeps today's markup exactly, so the
legacy theme and a converted design render as before; the other two are
marked data-qb-section=header. In the admin preview the header follows the
draft's layout over the saved one.

The Appearance preview now lays the portal out at desktop width and scales
it to fit, so desktop layouts such as an inline header and the filter panel
show as visitors see them. The legacy page's preview is unchanged.

Computed styles on 16 portal pages are unchanged with the engine off and on.
@mortondev

Copy link
Copy Markdown
Member Author

Condensed into #878. The stack is now five PRs, #878 to #882; this branch is kept as it was.

@mortondev mortondev closed this Nov 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant