-
Notifications
You must be signed in to change notification settings - Fork 1
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: Navigation Bar (Sans Search & Portal Nav Button) #225
Merged
wesleyboar
merged 20 commits into
task/GH-101-header-redesign
from
task/GH-101-header-redesign--navigation-bar
May 18, 2021
Merged
GH-101: Navigation Bar (Sans Search & Portal Nav Button) #225
wesleyboar
merged 20 commits into
task/GH-101-header-redesign
from
task/GH-101-header-redesign--navigation-bar
May 18, 2021
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- 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.
- 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.
wesleyboar
changed the title
GH-101: Navigation Bar (Partially Complete)
GH-101: Navigation Bar (Sans Search & Portal Nav Button)
May 18, 2021
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.
wesleyboar
force-pushed
the
task/GH-101-header-redesign--navigation-bar
branch
from
May 18, 2021 03:30
4f49fef
to
315ac1d
Compare
…design--navigation-bar
This was
linked to
issues
May 18, 2021
This was referenced May 18, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
Redesign the nav dropdowns and the CMS nav.
Issues
Changes
Summary:
merge-lite
.arrow
mixin to CSS.trumps/for-docs.header.css
.trumps/s-header.css
.site.header.css
.Bug Fixes:
Complete List
site.tacc-search-bar.css
usesborder.css
which now usesenv()
.¹merge-lite
to support deep merge of objects.arrow
mixin.trumps/for-docs.header.css
.trumps/s-header.css
.s-header
ID (becauses-header
class will be used twice).trumps/s-portal-nav.css
.--header-link-bkgd-color
.site.header.css
.taccsite_custom:frontera-cms
based on these Core changes.¹ I expect to completely replace
freeze_variables
feature withenv()
in whichever GH-101 PR updates the search bar.Testing
Simple UI Testing
Light/Dark Navbar
_THEME
set toNone
._THEME
set to'has-dark-logo'
.Responsiveness
While resizing width of window:
Detailed UI Testing
Hide/Show Sections
Responsiveness
CMS (with Portal)
CMS (stand-alone)
Logo & CMS Nav Alignment
CMS (with Portal)
CMS (stand-alone)
Light/Dark Navbar
Perform "Simple UI Testing" at "Light/Dark Navbar", but review items on the checklist for each theme.
Checklist
:hover
:focus
.active
(on page)²:active
(mid-click)²:hover
:focus
.active
(on page)²:active
(mid-click)²¹ The logo image may have its own internal space (annotated screenshot, example logo file).
² Not explicit in design, but should match
:hover
state.