feat: core-styles v2 header by wesleyboar · Pull Request #1068 · TACC/Core-Portal

wesleyboar · 2025-02-28T00:50:21Z

Overview

Use the latest CMS header styles.
Fix relevant header UI bugs.

Important

Upon merge, notify @shayanaijaz, so he can update Digital Rocks Portal branch(es).

Changes

updated Core-Styles
removed CSS comment and !important for old header stylesheet
updated Core-CMS
changed what header stylesheets to load
fixed inaccurate color variables
fixed & updated out-of-date mr-/ml-/-right classes

Testing & UI

Compare header on CMS index page and Portal dashboard.
Interact with header UI in both contexts.
- open portal dropdown
- narrow screen, navbar collapsed
- wide screen, navbar expanded
- hover over link
Verify UI matches in both contexts.
^{(excluding known issues below)}

CMS	Portal

CMS uses `margin-right: auto`, not `margin-left: auto`. Bootstrap5 uses `me` for "margin end" (and `ms` for "margin start"). I.e. Bootstrap adopted CSS's new language: - `margin-inline-end` - `margin-inline-start`

codecov · 2025-02-28T00:52:24Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 70.34%. Comparing base (c210828) to head (42508c9).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1068   +/-   ##
=======================================
  Coverage   70.34%   70.34%           
=======================================
  Files         538      538           
  Lines       33328    33328           
  Branches     2953     2953           
=======================================
  Hits        23446    23446           
  Misses       9684     9684           
  Partials      198      198

Flag	Coverage Δ
javascript	`72.53% <ø> (ø)`
unittests	`61.00% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

So we serve it as a static file.

wesleyboar

Notes for reviewers.

wesleyboar · 2025-02-28T22:00:10Z

-.ml-auto {
-  margin-left: auto !important;
-}
-


What? This was backwards-compatibility we added that Bootstrap chose not to add. We will instead use their new class names, me-auto and ms-auto. Search diff for me-auto.¹

Footnotes

which translate to margin(-inline-)end: auto and margin(-inline-)start: auto ↩

wesleyboar · 2025-02-28T22:03:01Z

@@ -1,4 +1,4 @@
-@import url('@tacc/core-styles/src/lib/_imports/settings/color.css');
+@import url('@tacc/core-styles/dist/settings/color.css');


Why?

The src/ has stuff our Vite config does not parse (yet), design-tokens.

The dist output is adequate, as should usually be the case.¹

Footnotes

TACC/tup-ui was update to use more dist/ than src/. ↩

wesleyboar · 2025-02-28T22:22:11Z

-    <!-- Core CSS -->
-    <link id="css-site-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
-    <link id="css-site-header" rel="stylesheet" href="/static/site_cms/css/build/site.header.css" />


Why? These are old solutions.

…googleapis.com/css?family=Roboto:… is redundant

Portal settings/font.css loads Core-Styles settings/font.css…

…which loads Roboto from Google.

site.header.css is Core-CMS using old Core-Styles

wesleyboar · 2025-02-28T22:45:54Z



-      {% include "includes/nav_cms.html" with className="navbar-nav" only %}
+      {% include "includes/nav_cms.html" with className="navbar-nav  me-auto" only %}


To match Core-CMS (which uses Bootstrap 4 mr-auto).

wesleyboar · 2025-02-28T22:46:22Z

+      {% include "includes/nav_cms.html" with className="navbar-nav  me-auto" only %}

-      {% include "includes/nav_search.html" with className="form-inline  ml-auto" only %}
+      {% include "includes/nav_search.html" with className="form-inline" only %}


To match Core-CMS (which stopped using a margin class here).

- has no effect on CMS (tested _in situ_) - has expected effect on Portal (tested in TACC/Core-Portal#1068)

* fix: some header styles not scoped with .s-header * fix: different rems give diff header spacing - has no effect on CMS (tested _in situ_) - has expected effect on Portal (tested in TACC/Core-Portal#1068) * refactor: header__nav-link--tall → …--not-expanded * refactor: simplify header navlink padding * fix: padding-block should differ for expand v. not

wesleyboar

Gonna try to not need to serve a static file. Marked as draft.

Warning: Introduces padding difference between CMS and Portal header.

sophia-massie

Tested and LGTM

Portal nav alignemnt changes on CMS, because CMS uses Bootstrap 4. This release accomodates Bootstrap 5 for dropdown menu alignment.

wesleyboar added 4 commits February 27, 2025 18:42

fix: header elements use mr- (me-) not ml- (ms-)

8c05a71

CMS uses `margin-right: auto`, not `margin-left: auto`. Bootstrap5 uses `me` for "margin end" (and `ms` for "margin start"). I.e. Bootstrap adopted CSS's new language: - `margin-inline-end` - `margin-inline-start`

fix: portal does not know design-tokens

72462cf

feat: upgrade header css to core-styles v2

42cd448

chore: remove old header cruft

03eba36

wesleyboar added 2 commits February 28, 2025 01:15

fix: load header css after bootstrap

6e81a8a

chore: update core-styles to latest

f1a5945

wesleyboar force-pushed the fix/use-core-styles-v2-header branch from 24cf036 to f1a5945 Compare February 28, 2025 07:15

wesleyboar added 3 commits February 28, 2025 11:01

fix: core-styles-v2.header.css loads too late

6bc1e95

So we serve it as a static file.

chore: remove cruft from old solution

3befd83

Merge branch 'main' into fix/use-core-styles-v2-header

551e9a2

wesleyboar mentioned this pull request Feb 28, 2025

fix: WP-895 portal nav position wrong on portal #1071

Merged

wesleyboar marked this pull request as ready for review February 28, 2025 21:49

wesleyboar commented Feb 28, 2025

View reviewed changes

wesleyboar added a commit to TACC/Core-Styles that referenced this pull request Mar 1, 2025

fix: different rems give diff header spacing

a32f059

- has no effect on CMS (tested _in situ_) - has expected effect on Portal (tested in TACC/Core-Portal#1068)

wesleyboar added a commit to TACC/Core-Styles that referenced this pull request Mar 1, 2025

fix: different rems give diff header spacing

e1cbe7f

- has no effect on CMS (tested _in situ_) - has expected effect on Portal (tested in TACC/Core-Portal#1068)

wesleyboar mentioned this pull request Mar 1, 2025

refactor: simple explicit header nav link padding TACC/Core-Styles#461

Closed

wesleyboar added a commit to TACC/Core-Styles that referenced this pull request Mar 1, 2025

fix: different rems give diff header spacing

4dfe231

- has no effect on CMS (tested _in situ_) - has expected effect on Portal (tested in TACC/Core-Portal#1068)

wesleyboar mentioned this pull request Mar 1, 2025

refactor: simple explicit header nav link padding TACC/Core-Styles#462

Merged

wesleyboar marked this pull request as draft March 1, 2025 01:41

wesleyboar commented Mar 1, 2025

View reviewed changes

Merge branch 'main' into fix/use-core-styles-v2-header

ff7d2be

This was referenced Mar 3, 2025

deps: core-styles v2.39.x TACC/Core-CMS#916

Merged

fix: header font inconsistent between clients TACC/Core-Styles#464

Merged

wesleyboar added 3 commits March 3, 2025 15:12

fix: no need to serve special static file

a44288b

Warning: Introduces padding difference between CMS and Portal header.

fix: move core-styles bump to correct file

d0bd73e

deps: core-styles, core-cms

a1f2bfb

This was referenced Mar 3, 2025

enhance: header use Roboto not Benton TACC/Core-Styles#470

Merged

deps: core-styles v2.39.4 (header font swap) TACC/Core-CMS#917

Merged

wesleyboar added 2 commits March 3, 2025 18:57

fix: portal nav position is wrong

7641dca

fix: same font for header in portal and cms

4f96175

wesleyboar marked this pull request as ready for review March 4, 2025 01:05

deps: core-styles

04fb98f

wesleyboar requested review from sophia-massie and van-go March 4, 2025 01:13

sophia-massie approved these changes Mar 4, 2025

View reviewed changes

wesleyboar added 2 commits March 4, 2025 14:46

fix: portal nav alignment broken on cms cuz bs4

c7128e7

Portal nav alignemnt changes on CMS, because CMS uses Bootstrap 4. This release accomodates Bootstrap 5 for dropdown menu alignment.

Merge branch 'main' into fix/use-core-styles-v2-header

42508c9

rstijerina approved these changes Mar 17, 2025

View reviewed changes

rstijerina merged commit 3d82f75 into main Mar 17, 2025

rstijerina deleted the fix/use-core-styles-v2-header branch March 17, 2025 21:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: core-styles v2 header#1068

feat: core-styles v2 header#1068
rstijerina merged 18 commits into
mainfrom
fix/use-core-styles-v2-header

wesleyboar commented Feb 28, 2025 •

edited

Loading

Uh oh!

codecov Bot commented Feb 28, 2025 •

edited

Loading

Uh oh!

wesleyboar left a comment

Uh oh!

Uh oh!

wesleyboar Feb 28, 2025

Uh oh!

wesleyboar Feb 28, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

wesleyboar Feb 28, 2025

Uh oh!

Uh oh!

wesleyboar Feb 28, 2025

Uh oh!

wesleyboar Feb 28, 2025

Uh oh!

wesleyboar left a comment

Uh oh!

sophia-massie left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		@@ -1,4 +1,4 @@
		@import url('@tacc/core-styles/src/lib/_imports/settings/color.css');
		@import url('@tacc/core-styles/dist/settings/color.css');



		{% include "includes/nav_cms.html" with className="navbar-nav" only %}
		{% include "includes/nav_cms.html" with className="navbar-nav me-auto" only %}

Conversation

wesleyboar commented Feb 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Related

Changes

Testing & UI

Uh oh!

codecov Bot commented Feb 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

wesleyboar left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

wesleyboar Feb 28, 2025

Choose a reason for hiding this comment

Footnotes

Uh oh!

wesleyboar Feb 28, 2025

Choose a reason for hiding this comment

Footnotes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

wesleyboar Feb 28, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

wesleyboar Feb 28, 2025

Choose a reason for hiding this comment

Uh oh!

wesleyboar Feb 28, 2025

Choose a reason for hiding this comment

Uh oh!

wesleyboar left a comment

Choose a reason for hiding this comment

Uh oh!

sophia-massie left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

wesleyboar commented Feb 28, 2025 •

edited

Loading

codecov Bot commented Feb 28, 2025 •

edited

Loading