Skip to content

GH-101: Portal Nav Mobile - Layout Change#241

Merged
wesleyboar merged 3 commits into
task/GH-101-header-redesignfrom
task/GH-101-header-redesign--portal-nav-mobile
Jun 3, 2021
Merged

GH-101: Portal Nav Mobile - Layout Change#241
wesleyboar merged 3 commits into
task/GH-101-header-redesignfrom
task/GH-101-header-redesign--portal-nav-mobile

Conversation

@wesleyboar

@wesleyboar wesleyboar commented Jun 3, 2021

Copy link
Copy Markdown
Member

Overview

Change portal nav layout to be "pushdown" menu instead of "dropdown" menu.¹

The location of portal nav in mobile was not moved as was planned for this PR.

¹ See "Known Issues" 1.

Issues

Changes

  • New: Convert "mobile button" layout from flex to grid.
    • Update "mobile button" instances accordingly.
  • New: Add more nav media queries.
  • Minor: Use new constants.
  • New: Shove Portal Nav up into Search Bar row (do not properly share 1 row).
  • Fix: Ensure icon spacing is accurate given different nav states.
  • Fix: Add background for Portal Nav & Search Bar "row".
  • New: Make all mobile dropdown menu items have same font size.
  • New: Retain wide portal nav for one breakpoint within collapsed navbar.
  • New: Limit Portal Nav load transition to when navbar is expanded.
  • New: Add new constants.

Testing

  1. Resize window to be narrow (≤767px).
  2. Follow checklist for CMS, Docs, and Portal:
    • Portal Nav icon, when logged in and when logged out, is narrow.
    • Portal Nav toggle/link is aligned to the right.
    • Portal Nav toggle/link is one one row with only the search bar.¹
    • Portal Nav menu (requires log in) pushes down CMS Nav menu.
  3. Resize window to be narrow (≤991px).
  4. Follow checklist for CMS, Docs, and Portal:
    • Portal Nav icon, when logged in and when logged out, is wide.
    • Portal Nav toggle/link is aligned to the right.
    • Portal Nav toggle/link is one one row with only the search bar.¹
    • Portal Nav menu (requires log in) pushes down CMS Nav menu.
  5. Resize window to be narrow (>992px).
  6. Follow checklist for CMS, Docs, and Portal:
    • Portal Nav icon, when logged in and when logged out, is wide.
    • Portal Nav toggle/link is aligned to the right.
    • Portal Nav toggle/link is one one row with the logo, CMS nav, and search bar.
    • Portal Nav menu (requires log in) drops down over content beneath header.

¹ See "Known Issues" 1.
² Can not test logged out Portal Nav on Portal.

Notes

Known Issues

  1. Portal nav location is not as verbally described by designer.

    The result matches the static design, and invents solutions for what the design does not define.

    The designer has verbally described the desired (undrawn) behavior for the mobile portal nav. It should be at the right of the navbar toggle, and always (when visible¹) a similar size to the navbar toggle (when visible¹).

    But this change only changes mobile portal nav menu from a "dropdown" menu to a "pushhdown" menu and experiments with wide and narrow mobile portal nav toggle/link designs. The change here is simpler, tests the ability to move the portal nav outside its position in the markup, and tests nav-specific breakpoints narrow and wider than just when the navbar collapses/expands.

    ¹ The mobile portal nav and the navbar toggle are not visible on wide screens.

  2. Portal nav on narrow screen has various bugs on Portal & Docs.

    The bugs will be fixed in a planned Portal & Docs bugfix PR.

- Confert "mobile button" layout from flex to grid.
- Update "mobile button" instances accordingly.
Do not set `display: grid` in `x-mobile-button`.
- Add more nav media queries.
- Use new constants.
- Shove Portal Nav up into Search Bar row (do not properly share 1 row).
- Ensure icon spacing is accurate given different nav states.
- Add background for Portal Nav & Search Bar "row".
- Make all mobile dropdown menu items have same font size.
- Retain wide portal nav for one breakpoint within collapsed navbar.
- Limit Portal Nav load transition to when navbar is expanded.
- Add new constants.
@wesleyboar wesleyboar self-assigned this Jun 3, 2021
@wesleyboar wesleyboar linked an issue Jun 3, 2021 that may be closed by this pull request
@wesleyboar wesleyboar merged commit 4e9fc7e into task/GH-101-header-redesign Jun 3, 2021
@wesleyboar wesleyboar deleted the task/GH-101-header-redesign--portal-nav-mobile branch June 3, 2021 06:20
@wesleyboar wesleyboar mentioned this pull request Jun 3, 2021
26 tasks
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.

Header Redesign → FP-1458

1 participant