feat: core-styles v2 header #1068

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

Overview

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

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 (9934c54) to head (04fb98f).

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.

So we serve it as a static file.

wesleyboar

Notes for reviewers.

client/package.json

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

client/src/styles/components/bootstrap.utils.css

-.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

client/src/styles/settings/color.css

-@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:09:31Z

server/conf/docker/docker-compose-dev.all.debug.yml

-    image: taccwma/core-cms:ff737a3
+    image: taccwma/core-cms:latest


Are we ready? Yup. This is what gets us the latest CMS header to sync with. This is tested and reviewed (and wanted) in #1034.

server/conf/nginx/nginx.conf

server/portal/static/src/styles/core-styles-v2.header.css

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

server/portal/templates/base.html

-    <!-- 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

server/portal/templates/base.html

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

server/portal/templates/includes/header.html

-      {% 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

server/portal/templates/includes/header.html

-      {% 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.

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 van-go and sophia-massie March 4, 2025 01:13

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

wesleyboar commented Feb 28, 2025 •

edited

Loading

codecov bot commented Feb 28, 2025 •

edited

Loading

wesleyboar left a comment

wesleyboar Feb 28, 2025

wesleyboar Feb 28, 2025

wesleyboar Feb 28, 2025

wesleyboar Feb 28, 2025

wesleyboar Feb 28, 2025

wesleyboar Feb 28, 2025

wesleyboar left a comment

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

		image: taccwma/core-cms:ff737a3
		image: taccwma/core-cms:latest

		{% include "includes/nav_cms.html" with className="navbar-nav" only %}
		{% 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 %}

feat: core-styles v2 header #1068

Are you sure you want to change the base?

feat: core-styles v2 header #1068

Conversation

wesleyboar commented Feb 28, 2025 • edited Loading

Overview

Related

Changes

Testing & UI

codecov bot commented Feb 28, 2025 • edited Loading

Codecov Report

wesleyboar left a comment

Choose a reason for hiding this comment

wesleyboar Feb 28, 2025

Choose a reason for hiding this comment

Footnotes

wesleyboar Feb 28, 2025

Choose a reason for hiding this comment

Footnotes

wesleyboar Feb 28, 2025

Choose a reason for hiding this comment

wesleyboar Feb 28, 2025

Choose a reason for hiding this comment

wesleyboar Feb 28, 2025

Choose a reason for hiding this comment

wesleyboar Feb 28, 2025

Choose a reason for hiding this comment

wesleyboar left a comment

Choose a reason for hiding this comment

wesleyboar commented Feb 28, 2025 •

edited

Loading

codecov bot commented Feb 28, 2025 •

edited

Loading