GH-101/FP-1458: Header Redesign #222

wesleyboar · 2021-05-12T21:58:04Z

To Do

Warning
The main branch has changed drastically since work on header redesign began.

resolve merge conflicts and port all work to Core-Styles which now has a demo

✓ Before Small-Screen UI Design

✓ After Small-Screen UI Design

→ After Small-Screen UI Design Review

small-screen
- implement UI/UX changes
- fix bugs

→ Clean Up Code

abandon support for unedited Portal and Docs
- small-screen menu toggles
- small-screen anything else
- large-screen anything else
remove gh-101 class and usage
polish so component-ization can be pushed off until later

→ Merge in Sub-Branches

task/GH-101-header-redesign
- task/GH-101-header-redesign--mobile-nav-layout-2

… Clean Up PR Desc

update screenshots
review "Notes"

Overview

Redesign the header.

Changes

GH-191: Theme (for ProTX Light Header & TACC Blue Header) #192
Redesign.
Support more future-compatible CSS features.
Add more global env() variables.
- Remove "freeze variables" hack.
Add new CSS components, utilities, and mixins.
Document.

all pull requests

* fixes & polish

complete changelog

New: Add more future-compatible CMS support:
- :not() with multiple selectors (fff0a3d)
- nesting selectors (dc4f7db)
- custom selectors (c988a7b)
New: Import env() vars for all themes (ea43ec9)
New: Install merge-lite (ea43ec9)
New: Remove "freeze variables" (faab92b, 54635b6)
- new searchbar design does not need them
- new env() support replaces them
Minor: Add misc. helpful comments
Minor: Add more CSS plugin tests (ebeebe5, dc4f7db)
New: Add new components:
- c-branding
- c-logo
New: Redesign Search bar
New: Backwards compatibility for backdrop-filter (dc4f7db)
New: Add @custom-media for navigation breakpoints (59a97d3)
New: Add new mixins (in "tools"):
- x-arrow
- x-hide
- x-mobile-button
Doc: Add missing Readme for trumps
New: Add docs-specific and portal-specific header-dependent stylesheets
New: Redesign Portal and CMS navs
Minor: Update s-portal-nav sample markup (to reflect future Portal markup)
New: Add new utilities (in "trumps"):
- u-hide
Doc: Document themes
Minor: Import all icon styles
Doc: Describe site assets required by subsites
New: Add [data-status="loaded"] after Portal nav load (for styling) (e38594d)
Minor: Remove Frontera-specific stylesheets
Untracked: Changes after 1248117.

Screenshots

⚠️ Out of date!

Hover over an image to see a description (on desktop browser).

Wide Screen (1200px)

⚠️ Out of date!

Docs (Logged Out): (No State)
CMS (Logged Out): CMS Nav: Link (Hover) | Dropdown (Open) | Dropdown Item/Link (Hover)
Portal (Logged In): Portal Nav: Closed | Link (Hover) | Open
Portal (Logged Out): Portal Nav: Closed | Link (Hover)

Narrow Screen (768px)

⚠️ Out of date!

Docs (Logged Out) — CMS Nav & Login Link & Search Field

(No State)

Nav Open: Close Button (Hover) | CMS Link (Hover)

Dropdown Open: CMS Link (Hover) | CMS Dropdown Item/Link (Hover)

Dropdown Open: Login Link (Hover) | Search Field (Focus) | Search Field (Input)

Dropdown Open

CMS (Logged In) — Portal Nav

Nav Open

Nav Open: Link (Hover) | Dropdown (Open) & Link (Hover) | Dropdown (Open) & Dropdown Item/Link (Hover)

Nav Open: Dropdown (Open)

Minimum Width (320px)

⚠️ Out of date!

CMS

CMS does respect cross-site minimum width.

At Minimum Width

Nav Open

Below Minimum Width

Nav Open

Nav Open: Portal Nav

Docs

Docs does not yet respect cross-site minimum width.

Docs can respect cross-site min width. I have temporary solution for now.

At Minimum Width: Nav Open
Below Minimum Width: Nav Open

Portal

Portal does not respect cross-site minimum width.

Portal can not easily respect cross-site min width until a mobile design.

At Minimum Width: Nav Open

Testing

Set up testing environment using method from Test CMS Changes. Specifically,
1. npm run settings (new step, from GH-191: Theme (for ProTX Light Header & TACC Blue Header) #192)
2. npm ci|install
3. npm run build
4. collect static files

Test these elements are present, functional, and match design on the matching subsites:

Table

Element → Subsite ↓	CMS Nav (Dropdown)	CMS Nav (Main Links)	Branding Bar	Logo	Search	Portal Nav (Logged In)	Portal Nav (Logged Out)
CMS (sans Portal)	✓	✓	✓	✓
CMS (with Portal)	✓	✓	✓	✓
Portal	✓	✓	✓	✓	✓	✓	✓
Docs	✓	✓	✓	✓	~	~	~

Legend:

✓ Has
~ Has (but only because Frontera has portal and is only project with new docs)

Test these elements have these layouts occur at the matching breakpoints on the matching subsites:

Table

Subsite	Breakpoint → Elements ↓	320px–	1200px–	1200px+	1200px—1400px	1400px—1680px	1680px+
CMS (sans Portal)	CMS Nav	┣━	vert. list	horz. list at right	some space between links	more space between links	━┫
CMS, Portal, Docs	CMS Nav	┣━	vert. list	horz. list at left	┣━	some space between links	more space between links
CMS, Portal, Docs	CMS Nav Bkgd	┣━	translucent	opaque	━━	━━	━┫
CMS, Portal, Docs	Portal Dropdown	┣━	wide list	narrow list	━━	━━	━┫
CMS, Portal, Docs	Portal Nav Toggle	┣━	narrow layout	wide layout	━━	━━	━┫
CMS, Portal, Docs	Nav Bar	┣━	large text	small text	━━	━━	━┫
CMS, Portal, Docs	Menu Icon	flex. width	static width	absent	━━	━━	━┫
CMS, Portal, Docs	Branding Bar	┣━	short height	taller height	━━	━━	━┫
CMS, Portal, Docs	Nav Bar	┣━	short height	taller height	━━	━━	━┫
CMS, Portal, Docs	Search Bar	┣━	taller height	short height	━━	━━	━┫

Ensure dropdown icon is:
List
- ⌄ when dropdown is open
- ^ when dropdown is closed
- bigger for CMS Nav at 1200px–
- smaller for CMS Nav at 1200px+
- consistent size for Portal Nav above and below 1200px

Notes

Known Issues

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.
Stand-alone CMS navbar collapses for a wider screen than before.
- Before, on a screen of < 992px, navbar would collapse.
- Now, on a screen of < 1200px, navbar will collapse.
A CMS that belongs to a Portal is not affected, because it already behaves like this.

Known Deviations From Design

Expected to Remain

Some color(s) of Search Bar use a standard color instead of color in design.

I have prior private permission to make these "fixes" during translation. I plan (eventually) to teach Portal devs how to do the same.

Mobile Portal Nav Menu

If the mobile portal nav menu were moved to outside the navbar dropdown, then these likely would all be resolved. But Design has agreed to let me do that later.

On narrow screen, Search Bar height and Search Bar + Portal Nav link height are shorter than design.

I just didn't want to maintain another value when the two were so close—and sometimes Design is close when they mean to match. If this is noticed as a bug, then I will fix it.
On medium and wide screen, space left of Logo and right of Portal Nav do not match design.
- Before, Design said space left of Logo should match space left of Portal sidebar icon.
- Now, Design says left of logo space should be 30px and match space right of portal nav.
- Also, the width appears static and too wide (see Known Deviation 5).
So, I ignored 30px and made spaces align because my experience shows me that aligning and consistency is Design's goal here, not an exact pixel value.
On narrow screen, Portal Nav dropdown is pushing down CMS Nav.

This is a stopgap to not have the Portal Nav dropdown fall over CMS Nav, but not yet move it to the Designer-suggested location (which is a deviation form design, see Known Deviation 6).
On narrow screen, Portal Nav link is wider than necessary (for short usernames)
- To (A) place the Portal Nav link and Search Bar on one row and (B) have Portal Nav dropdown push down CMS Nav but (C) not reinvent Bootstrap functionality, the Portal Nav link must have a fixed width.
- The fixed width for the Portal Nav link is the maximum needed to fit the widest username (8-characters, all m's).
On narrow screen, Portal Nav location is not deviating from design as Designer suggested it should.
- Design has said the Portal Nav link should (deviate from design) be on the Navbar to the right of the close button.
- The current location is achieved using code that may support the move to the desired location.
- The change is major and I am already well beyond time estimated for this task.

- Migrate `branding_logos` CSS to `c-branding` & `c-logo`. - In `s-header` style `.c-logo` not `.navbar-brand`. - Update and format markup for `header_branding` and `header_logo`. - Comment on now-unused secrets values.

…riables

…design--branding-bar

…ng-bar GH-101: Branding Bar

- Remove now-moot taccsite_custom:frontera-cms search bar font sizes. - Support CSS custom selectors (known external bug). - Test CSS custom selectors (known external bug). - Remove outdated comment from `c-branding`. - Set `c-logo` image height in component stylesheet. - Add TODO for `html { font-size: 62.5%; }` - Add arrow "mixin" (note: using `%-arrow` syntax). - Redesign header (but not dropdowns and not portal nav). - Remove now-moot `s-portal-nav` styles. - Add & Update header env variables for themes. - Perform "GH-129: Do Not Support CMS Menu Nav Link & Dropdown".

Prevent dropdown link from being flagged as active.

- (Real Fix) Ensure colors are available to Docs. - (Possible Fix) Ensure correct colors are available to Portal.\* \* The Portal has its own settings/color.css that is almost identical.

- Load new styles solely for docs header. - Force branding styles on old markup. - Migrate subsite selectors from `trumps/s-header` to `tools/selectors`. - Rename `:--in-__subsite__` selectors to `:--from-__subsite__`. - Create new styles solely for docs header. - Document "For (Other Sites)" i.e. `trumps/for-docs.*.css` stylesheets.

Unset Docs' `img { max-width; }`. Docs does this too but for old markup.

- Install `merge-lite` for deep merge constants and theme data. - Use env() vars for header height. - Remove unnecessary code and improve comments. - Create constants for theme JSON. - Merge constants on top of theme data. - Update theme data comment syntax.

- Add frontera-cms logo width overwrite (temp. ineffectual, see GH-223). - Prevent Core (but not a project) from stretching logo too wide. - Align CMS nav for narrow logos. Allow project-specific adaptation.

- Remove redundant color assignment for nav-link.

…riables Task/gh 101 header redesign env variables (update)

- Add font weight constants. - Add border constants. - Style dropdowns and use new constants.

Use correct global var not wrong env var for branding bar bkgd.

Scope dropdown styles to header so as to not effect any other dropdowns.

1. Scope header-specific `.c-branding` styles with `.s-header`. 2. Clarify which `s-header` is being styled and why. 3. Remove `s-header` ID from sample header markup. 4. Add `s-header` class to `header-branding`. 5. Replace `s-header` ID with `header-navbar` ID.

Portal needs to overwrite Bootstrap's color for active `dropdown-item`.

Instead of defining a value to be overwritten, set a fallback. This reduces one level of overwrite when tracking/debugging values.

Ensure Portal & Docs line-height (in header) matches CMS.

- The responsive space between nav items now considers portal elements. - Whether header is loaded on portal is noted by presence of a class.

…design--navigation-bar

…tion-bar

…ask/GH-101-header-redesign

wesleyboar and others added 4 commits May 11, 2021 10:50

GH-101: Branding Bar

3e4a501

- Migrate `branding_logos` CSS to `c-branding` & `c-logo`. - In `s-header` style `.c-logo` not `.navbar-brand`. - Update and format markup for `header_branding` and `header_logo`. - Comment on now-unused secrets values.

Merge pull request #221 from TACC/task/GH-101-header-redesign--env-va…

03a9482

…riables

Merge branch 'task/GH-101-header-redesign' into task/GH-101-header-re…

4533c5f

…design--branding-bar

Merge pull request #220 from TACC/task/GH-101-header-redesign--brandi…

80ed3c0

…ng-bar GH-101: Branding Bar

This was linked to issues May 13, 2021

Header Redesign → FP-1458 #101

Closed

Do Not Support CMS Menu Dropdown Nav Link #129

Closed

wesleyboar and others added 21 commits May 13, 2021 17:01

GH-101: Navigation Bar (Fix CMS Nav Bug in Docs)

a9ec66a

Prevent dropdown link from being flagged as active.

GH-101: Navigation Bar (Fix Color Bug/s in Docs)

23e3db2

- (Real Fix) Ensure colors are available to Docs. - (Possible Fix) Ensure correct colors are available to Portal.\* \* The Portal has its own settings/color.css that is almost identical.

GH-101: Navigation Bar (Fix Img Max-Width in Docs)

290e27b

Unset Docs' `img { max-width; }`. Docs does this too but for old markup.

GH-101: Navigation Bar (Fix & Doc Height Bugs)

d3361d7

GH-101: Navigation Bar (Set Dropdown Font Size)

ccfc596

GH-101: Navigation Bar (Logo Width, CMS Nav Align)

538369a

- Add frontera-cms logo width overwrite (temp. ineffectual, see GH-223). - Prevent Core (but not a project) from stretching logo too wide. - Align CMS nav for narrow logos. Allow project-specific adaptation.

GH-101: Navigation Bar (Remove Redundant Style)

f257c63

- Remove redundant color assignment for nav-link.

Merge pull request #224 from TACC/task/GH-101-header-redesign--env-va…

29ebba2

…riables Task/gh 101 header redesign env variables (update)

GH-101: Navigation Bar (Dropdowns & Constants)

4692aaf

- Add font weight constants. - Add border constants. - Style dropdowns and use new constants.

GH-191: Add prewatch (same task as prebuild).

d6c59ca

GH-101: Navigation Bar (Fix Branding Bar Bug)

4865c2d

Use correct global var not wrong env var for branding bar bkgd.

GH-101: Navigation Bar (Avoid Dropdown Bug)

2ab97e8

Scope dropdown styles to header so as to not effect any other dropdowns.

GH-101: Navigation Bar (Fix Portal Menu Item Hue)

bde4dc5

Portal needs to overwrite Bootstrap's color for active `dropdown-item`.

GH-101: Navigation Bar (Use Fallbacks for Vars)

7c8846c

Instead of defining a value to be overwritten, set a fallback. This reduces one level of overwrite when tracking/debugging values.

GH-101: Navigation Bar (Consistent Line-Height)

5f83e6a

Ensure Portal & Docs line-height (in header) matches CMS.

GH-101: Navigation Bar (Responsive Nav Item Width)

315ac1d

- The responsive space between nav items now considers portal elements. - Whether header is loaded on portal is noted by presence of a class.

Merge branch 'task/GH-101-header-redesign' into task/GH-101-header-re…

8936201

…design--navigation-bar

This was linked to issues May 18, 2021

Nav Menu Open Toggle Diff Size on CMS and Portal → FP-1459 #55

Closed

Resize "Brand Bar" and "Nav Bar" #29

Closed

Merge pull request #225 from TACC/task/GH-101-header-redesign--naviga…

9012318

…tion-bar

wesleyboar added 2 commits July 12, 2021 21:44

Merge branch 'main' into task/GH-101-header-redesign

e08b64f

Quick: Update taccsite_custom to latest

f335655

wesleyboar added priority ▲ High priority and removed priority ▲▲ Very high priority labels Aug 5, 2021

wesleyboar mentioned this pull request Aug 13, 2021

GH-98: Typography #312

Merged

wesleyboar added 9 commits August 16, 2021 18:29

Merge branch 'main' into task/GH-101-header-redesign

b669659

Merge branch 'task/GH-191-support-light-navbar-for-dark-logos' into t…

e69b89b

…ask/GH-101-header-redesign

GH-101: Noop: Update comment to be consistent

29dbee6

Merge branch 'main' into task/GH-101-header-redesign

deec8d9

Merge branch 'main' into task/GH-101-header-redesign

e165cc2

Merge branch 'task/GH-191-support-light-navbar-for-dark-logos' into t…

c31b7e6

…ask/GH-101-header-redesign

Quick: Update submod to last commit on its branch

a0fa1e3

GH-101: Build settings.json before CSS

fe9de08

Merge branch 'main' into task/GH-101-header-redesign

6401683

wesleyboar changed the title ~~GH-101 Header Redesign~~ GH-101: Header Redesign Sep 3, 2021

wesleyboar mentioned this pull request Sep 21, 2021

Support Colored Header (TACC Blue Header) #349

Closed

Merge branch 'task/GH-191-support-light-navbar-for-dark-logos' into t…

2e4c19f

…ask/GH-101-header-redesign

Base automatically changed from task/GH-191-support-light-navbar-for-dark-logos to main September 23, 2021 01:12

Merge branch 'main' into task/GH-101-header-redesign

b786c3c

wesleyboar added priority ━ Medium priority and removed priority ▲ High priority labels Sep 23, 2021

wesleyboar added 2 commits September 27, 2021 17:30

Merge branch 'main' into task/GH-101-header-redesign

73e6190

Merge branch 'main' into task/GH-101-header-redesign

9d5c68a

wesleyboar changed the title ~~GH-101: Header Redesign~~ GH-101/FP-1458: Header Redesign Jan 12, 2022

wesleyboar removed the priority ━ Medium priority label Feb 2, 2022

wesleyboar added the paused Started but not actively in progress label Mar 22, 2022

wesleyboar added the priority ▲ High priority label Nov 11, 2022

wesleyboar force-pushed the main branch from 7bdccca to 8a6bcbb Compare July 13, 2023 18:21

wesleyboar removed the priority ▲ High priority label Sep 11, 2023

wesleyboar mentioned this pull request Mar 25, 2024

GH-101/FP-1458: Header Redesign #222 - Mobile Nav Layout 2 #824

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GH-101/FP-1458: Header Redesign #222

GH-101/FP-1458: Header Redesign #222

wesleyboar commented May 12, 2021 •

edited

Loading

GH-101/FP-1458: Header Redesign #222

Are you sure you want to change the base?

GH-101/FP-1458: Header Redesign #222

Conversation

wesleyboar commented May 12, 2021 • edited Loading

To Do

Overview

Related

Changes

Screenshots

Testing

Notes

Known Issues

Known Deviations From Design

Expected to Remain

Mobile Portal Nav Menu

wesleyboar commented May 12, 2021 •

edited

Loading