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.

Sign up for GitHub

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

Jump to bottom

GH-101: Mobile Menu (Search & Portal Layout) #232

Merged
merged 7 commits into from May 27, 2021
Merged

GH-101: Mobile Menu (Search & Portal Layout) #232

merged 7 commits into from May 27, 2021

Conversation

wesleyboar
Copy link
Member

@wesleyboar wesleyboar commented May 27, 2021 •
edited

Overview

  • Finish styling mobile navbar menu.
  • Style mobile navbar menu toggle button.
  • Style mobile brand bar.
  • Style mobile brandbar and navbar height.

The search bar, icons, and portal nav have not been re-styled yet.

Issues

Changes

  • New: Use CSS for margin instead of ml-auto
    • Minor: Make header code DRY (now that CMS nav imports are identical).
  • Minor: Use custom selector for consistency
  • Fix: Fix navbar toggle color
  • New: New mobile menu layout for search bar and portal nav
    • Minor: Support :not with multiple elements.
    • Minor: Edit existing relevant CSS to be consistent and accurately organized.
  • Fix: Reduce oversized dropdown toggle ("chevron")
  • New: Swap "Log Out" & "My Account" icons

Testing

  1. Resize screen width.
  2. Compare the following elements to design when header navigation is mobile versus desktop:
    • portal nav icons
    • portal nav style
    • portal nav position
    • search bar position
    • dropdown toggle size

Notes

Known Issues

  1. On mobile nav, the dropdown toggle ("chevron") is not thick enough.

    I am forgoing adding complexity in code to solve this, because there should be a Cortal icon for this shape.

@wesleyboar
GH-101: Mobile (Search & Portal): Drop ml-auto
d07d69b 
- Use CSS instead of markup to control margin left on header elements.
- Make header code DRY now that classNames match.
@wesleyboar
GH-101: Quick: Use custom selector for consistency
96e9490
@wesleyboar
GH-101: Quick: Fix navbar toggle color
997a31c
@wesleyboar
GH-101: Mobile (Search & Portal): New Layout
e8593f7 
- Support `:not` with multiple elements.
- Layout Search and Portal elements in mobile nav.
- Edit existing relevant CSS to be consitent and accurately organized.
@wesleyboar
GH-101: Quick: Fix dropdown toggle size
ecf3253 
The "chevron" was a bit too big. Fixed.

It is not thick enough on mobile, but the code should stay simple.

This code is all pending a real icon, anyway.
@wesleyboar
GH-101: Quick: Swap "Log Out" & "My Account" icons
397b43c
@wesleyboar
GH-101: Quick: Icon Text for Portal/Docs Markup
722c5ee
@wesleyboar wesleyboar self-assigned this May 27, 2021
@wesleyboar wesleyboar merged commit 0c4574d into task/GH-101-header-redesign May 27, 2021
@wesleyboar wesleyboar deleted the task/GH-101-header-redesign--mobile-nav-layout branch May 27, 2021 04:58
@wesleyboar wesleyboar mentioned this pull request May 27, 2021
Draft
26 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@wesleyboar wesleyboar

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
1 participant
@wesleyboar