Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Conversation

wesleyboar
Copy link
Member

@wesleyboar wesleyboar commented Jun 3, 2021

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