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

feat: core-styles v2 header #1068

Open
wants to merge 18 commits into
base: main
Choose a base branch
from
+13 −19
Open

feat: core-styles v2 header #1068

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
8c05a71
fix: header elements use mr- (me-) not ml- (ms-)
wesleyboar Feb 28, 2025
72462cf
fix: portal does not know design-tokens
wesleyboar Feb 28, 2025
42cd448
feat: upgrade header css to core-styles v2
wesleyboar Feb 28, 2025
03eba36
chore: remove old header cruft
wesleyboar Feb 28, 2025
6e81a8a
fix: load header css after bootstrap
wesleyboar Feb 28, 2025
f1a5945
chore: update core-styles to latest
wesleyboar Feb 28, 2025
6bc1e95
fix: core-styles-v2.header.css loads too late
wesleyboar Feb 28, 2025
3befd83
chore: remove cruft from old solution
wesleyboar Feb 28, 2025
551e9a2
Merge branch 'main' into fix/use-core-styles-v2-header
wesleyboar Feb 28, 2025
ff7d2be
Merge branch 'main' into fix/use-core-styles-v2-header
wesleyboar Mar 3, 2025
a44288b
fix: no need to serve special static file
wesleyboar Mar 3, 2025
d0bd73e
fix: move core-styles bump to correct file
wesleyboar Mar 3, 2025
a1f2bfb
deps: core-styles, core-cms
wesleyboar Mar 3, 2025
7641dca
fix: portal nav position is wrong
wesleyboar Mar 4, 2025
4f96175
fix: same font for header in portal and cms
wesleyboar Mar 4, 2025
04fb98f
deps: core-styles
wesleyboar Mar 4, 2025
c7128e7
fix: portal nav alignment broken on cms cuz bs4
wesleyboar Mar 4, 2025
42508c9
Merge branch 'main' into fix/use-core-styles-v2-header
wesleyboar Mar 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions client/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
},
"devDependencies": {
"@rollup/plugin-eslint": "^8.0.1",
"@tacc/core-styles": "^2.11.0",
"@tacc/core-styles": "^2.39.0",
"@testing-library/jest-dom": "^5.0.2",
"@testing-library/react": "^16.0.1",
"@types/js-cookie": "^3.0.6",
Expand Down
4 changes: 0 additions & 4 deletions client/src/styles/components/bootstrap.utils.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
/* Shims for deprecated Bootstrap4 utils */

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

Comment on lines -3 to -6
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Footnotes

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

.sr-only {
position: absolute;
width: 1px;
Expand Down
2 changes: 1 addition & 1 deletion client/src/styles/settings/color.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import url('@tacc/core-styles/src/lib/_imports/settings/color.css');
@import url('@tacc/core-styles/dist/settings/color.css');
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Footnotes

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


/* If Design doc uses color on the left, use color on the right
(When design is updated to use the new colors, we can remove this)
Expand Down
3 changes: 0 additions & 3 deletions client/src/styles/trumps/icon.fonts.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion server/conf/docker/docker-compose-dev.all.debug.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
version: "3.8"
services:
cms:
image: taccwma/core-cms:ff737a3
image: taccwma/core-cms:latest
volumes:
- ../cms/secrets.py:/code/taccsite_cms/secrets.py
- ../cms/uwsgi/uwsgi.ini:/code/uwsgi.ini
Expand Down
4 changes: 2 additions & 2 deletions server/conf/nginx/nginx.conf
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ http {
alias /srv/www/portal/server/docs;
}

location ~ ^/(core|auth|workbench|tickets|googledrive-privacy-policy|public-data|request-access|accounts|api|login|webhooks|search) {
location ~ ^/(core/(?!static)|auth|workbench|tickets|googledrive-privacy-policy|public-data|request-access|accounts|api|login|webhooks|search) {
proxy_pass http://portal_core;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
Expand Down Expand Up @@ -112,7 +112,7 @@ http {
}

location /core/static {
alias /srv/www/portal/server/static;
alias /srv/www/portal/server/portal/static;
}

location /build {
Expand Down
4 changes: 3 additions & 1 deletion server/portal/settings/settings.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,9 @@
STATICFILES_DIRS = [
os.path.join(BASE_DIR, '../../client/dist'),
# Serve fonts using the cep.dev hostname in debug mode
('src/fonts', os.path.join(BASE_DIR, '../../client/src/fonts'))
('src/fonts', os.path.join(BASE_DIR, '../../client/src/fonts')),
# Serve portal static files
os.path.join(BASE_DIR, 'static')
]

STATICFILES_FINDERS = [
Expand Down
22 changes: 22 additions & 0 deletions server/portal/static/src/styles/core-styles-v2.header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/*! To fix UI discrepancies between Portal and CMS */

/* to resolve inaccurate or missing variables */
.s-header {
--global-font-size--medium: 14px;
--global-font-family: "Benton Sans", "Roboto", sans-serif;
}
/* to make size of certain elements in Portal and CMS */
/* FAQ: Bootstrap uses rem, but rem differs between Portal and CMS */
/* - to match header height */
.s-header .nav-link {
padding-block: 5px;
}
/* - to match portal nav size */
.s-header .dropdown-menu {
padding-block: 5px;
}
.s-header .dropdown-item {
padding-block: 2.5px;
padding-inline: 15px;
}

7 changes: 4 additions & 3 deletions server/portal/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,6 @@
<link rel="canonical" href="{{request.get_full_path}}">
<base href="/">
{% block head_extra %}{% endblock %}
<!-- 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" />
Comment on lines -19 to -21
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why? These are old solutions.

{% if settings.PORTAL_CSS_FILENAMES|length %}
<!-- Project CSS -->
{% for stylesheet in settings.PORTAL_CSS_FILENAMES %}
Expand All @@ -27,6 +24,10 @@
{% endif %}
<!-- Vendor CSS -->
<link id="css-bootstrap" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Header CSS -->
<link rel="stylesheet" href="/static/site_cms/css/build/core-styles.theme.default.css">
<link rel="stylesheet" href="/static/site_cms/css/build/core-styles.header.css">
<link rel="stylesheet" href="{% static 'src/styles/core-styles-v2.header.css' %}">

{% block styles %}{% endblock %}
</head>
Expand Down
4 changes: 2 additions & 2 deletions server/portal/templates/includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@



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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


{% include "includes/nav_search.html" with className="form-inline ml-auto" only %}
{% include "includes/nav_search.html" with className="form-inline" only %}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

{# FAQ: Unlike CMS and User Guide, we must pass `user` #}
{% include "includes/nav_portal.html" with className="navbar-nav" user=user settings=settings only %}

Expand Down