From 3e4a501cc8517d4a4e841d8323668827102394d3 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Tue, 11 May 2021 10:31:23 -0500 Subject: [PATCH 001/106] GH-101: Branding Bar - 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. --- taccsite_cms/default_secrets.py | 8 +- .../css/src/_imports/branding_logos.css | 69 -------------- .../src/_imports/components/c-branding.css | 91 +++++++++++++++++++ .../_imports/components/c-branding.twig.html | 22 +++++ .../css/src/_imports/components/c-logo.css | 27 ++++++ .../src/_imports/components/c-logo.twig.html | 4 + .../css/src/_imports/trumps/s-header.css | 12 ++- .../static/site_cms/css/src/site.header.css | 14 ++- taccsite_cms/templates/header_branding.html | 28 +++--- taccsite_cms/templates/header_logo.html | 16 +++- 10 files changed, 194 insertions(+), 97 deletions(-) delete mode 100644 taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css create mode 100644 taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css create mode 100644 taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.twig.html create mode 100644 taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.css create mode 100644 taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.twig.html diff --git a/taccsite_cms/default_secrets.py b/taccsite_cms/default_secrets.py index 131a90510..f9c6dce22 100644 --- a/taccsite_cms/default_secrets.py +++ b/taccsite_cms/default_secrets.py @@ -233,7 +233,7 @@ _TACC_BRANDING = [ "tacc", "site_cms/img/org_logos/tacc-white.png", - "branding-tacc", + "branding-tacc", # Unused but kept to retain index count # GH-59: Remove "https://www.tacc.utexas.edu/", "_blank", "TACC Logo", @@ -244,7 +244,7 @@ _UTEXAS_BRANDING = [ "utexas", "site_cms/img/org_logos/utaustin-white.png", - "branding-utaustin", + "branding-utaustin", # Unused but kept to retain index count # GH-59: Remove "https://www.utexas.edu/", "_blank", "University of Texas at Austin Logo", @@ -255,7 +255,7 @@ _NSF_BRANDING = [ "nsf", "site_cms/img/org_logos/nsf-white.png", - "branding-nsf", + "branding-nsf", # Unused but kept to retain index count # GH-59: Remove "https://www.nsf.gov/", "_blank", "NSF Logo", @@ -272,7 +272,7 @@ _PORTAL_LOGO = [ "portal", "site_cms/img/org_logos/portal.png", - "", + "", # Unused, but kept to retain index count "/", "_self", "Portal Logo", diff --git a/taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css b/taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css deleted file mode 100644 index f4e71880e..000000000 --- a/taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css +++ /dev/null @@ -1,69 +0,0 @@ -/* BRANDING & LOGO CLASS SELECTORS */ -/* TODO: Convert to a component */ - -/* WARNING: NO-R/EM: Until Frontera CMS drops Bootstrap 3.7.1 (for old design)… - No `em` nor `rem` allowed, because they aren't consitently reliable. - - On Frontera CMS, `1rem` = `10px` and `body { font-size: 15px }` - - On any other CMS, `1rem` = `16px` (browser default). */ - -/* Shared by All Templates */ - -/* Branding Selectors */ - -.branding-header { - --branding-logo-height: 24px; - - display: flex; - align-items: center; - justify-content: center; - - /* This prevents header bar resize when branding is dynamically added */ - /* CAVEAT: This is only for Portal and Docs which dynamically load content */ - /* FAQ: Do not use `48.78px`, because Safari only accepts whole numbers */ - height: 49px; - - - background-color: var(--global-color-primary--xx-dark); - color: var(--global-color-primary--xx-light); - border-bottom: 1px solid #aaa; -} - -.branding-seperator { - width: 1px; - height: 100%; - max-height: var(--branding-logo-height); - border-left: solid 1px #fff; - margin: 0 15px; - vertical-align: middle; -} - -.branding-logo { - height: 30px; - margin: 0; - padding: 0; - border: none; -} - -/* Specific Brand Logo Selectors */ - -.branding-nsf { - height: 35px; -} - -.branding-tacc { - height: var(--branding-logo-height); -} - -.branding-utaustin { - height: var(--branding-logo-height); -} - -/* Logo Selectors */ - -.portal-logo { - float: left; - height: 40px; - margin: 0; - padding: 0; - border: none; -} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css new file mode 100644 index 000000000..e8ad78524 --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css @@ -0,0 +1,91 @@ +/* +Branding + +A list of linked images for funders and affiliates. Project customization should be minimal. + +Markup: c-branding.twig.html + +Styleguide Components.Branding +*/ +@import url("_imports/tools/media-queries.css"); + +/* IDEA: Use multi-column (`column-*`) to simplify border, margin, separator */ + + + +/* Base */ + +.c-branding { + --column-gap--side: 25px; + --column-gap--center: 35px; + + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + + /* This prevents header bar resize when branding is dynamically added */ + /* CAVEAT: This is only for Portal and Docs which dynamically load content */ + /* FAQ: Do not use `48.78px`, because Safari only accepts whole numbers */ + height: 40px; + + background-color: var(--global-color-primary--xx-dark); + color: var(--global-color-primary--xx-light); + border-bottom: 1px solid #aaa; +} + +/* A responsive column gap */ +.c-branding__link:first-child .c-branding__image { + margin-right: var(--column-gap--side); +} +.c-branding__link:not(:first-child):not(:last-child) .c-branding__image { + margin-left: var(--column-gap--center); + margin-right: var(--column-gap--center); +} +.c-branding__link:last-child .c-branding__image { + margin-left: var(--column-gap--side); +} +@media (--x-narrow-and-below) { + .c-branding { + --column-gap--side: 10px; + --column-gap--center: 10px; + } +} + + + +/* Elements */ + +.c-branding__link { + --height: 90%; + + height: var(--height); +} +.c-branding__separator { + /* To add border */ + height: 25px; + border-left: solid 1px #fff; + + /* To hide text */ + width: 0; + overflow: hidden; +} +.c-branding__image { + /* To match parent height */ + height: 100%; +} + +/* Specific brands */ +.c-branding__nsf-link { --height: 35px; } +.c-branding__tacc-link { --height: 30px; } +.c-branding__utexas-link { --height: 26px; } + + + +/* Modifiers */ + +/* Compact */ +.c-branding--compact { + --column-gap--side: 10px; + --column-gap--center: 10px; +} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.twig.html b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.twig.html new file mode 100644 index 000000000..32731f22b --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.twig.html @@ -0,0 +1,22 @@ +
+ + + … + + + | + + + … + + + | + + + … + + +
diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.css new file mode 100644 index 000000000..01333bb85 --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.css @@ -0,0 +1,27 @@ +/* +Logo + +The main website logo. Project customization should be minimal. + +Markup: c-logo.twig.html + +Styleguide Components.Logo +*/ +/* NOTE: All styles here are currently handled by Bootstrap `.navbar-brand` */ +/* TODO: Abandon Bootstrap `.navbar-brand`. Implement minimum styles instead. */ + + + +/* Base */ + +.c-logo { + /* … */ +} + + + +/* Elements */ + +.c-logo__image { + /* … */ +} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.twig.html b/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.twig.html new file mode 100644 index 000000000..710c26a39 --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.twig.html @@ -0,0 +1,4 @@ + diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css index e470e7da4..2d99e0839 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css @@ -47,15 +47,17 @@ Styleguide Trumps.Scopes.Header /* Logo */ -.s-header .navbar-brand { - /* If branding is short enough, then align position of first CMS nav link with Portal "Dashboard" header */ - /* WARNING: This is a manual value; if Portal interface changes, then this may need to change */ +.s-header .c-logo { + /* To align position of first CMS nav link with Portal "Dashboard" header */ + /* WARNING: If Portal UI changes, then these styles may need to change */ min-width: 176px; margin-right: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.navbar-brand`) */ padding: 0; color: var(--text-color); - /* text-decoration: none; *//* already provided by Bootstrap */ +} +.s-header .c-logo__image { + height: 40px; } @@ -75,8 +77,8 @@ Styleguide Trumps.Scopes.Header /* FAQ: The `calc()` keeps track of disparate source of space values */ /* `16px` = `1rem` from Portal (via `#sidebar .nav-content`) */ /* `20px` from Portal (via `.nav-link`) */ - --nav-padding-vert: 5px; --nav-padding-horz: calc(16px + 20px); + --nav-padding-vert: 5px; background-color: var(--global-color-primary--xx-dark); padding: var(--nav-padding-vert) var(--nav-padding-horz); diff --git a/taccsite_cms/static/site_cms/css/src/site.header.css b/taccsite_cms/static/site_cms/css/src/site.header.css index a04815a29..534dd19c2 100644 --- a/taccsite_cms/static/site_cms/css/src/site.header.css +++ b/taccsite_cms/static/site_cms/css/src/site.header.css @@ -14,6 +14,15 @@ but the User Guides do not. This can be removed in Core-CMS PR #192 */ @import url("_imports/settings/color.css"); + + +/* COMPONENTS */ + +@import url("_imports/components/c-branding.css"); +@import url("_imports/components/c-logo.css"); + + + /* TRUMPS */ /* Shared with Portal */ @@ -31,8 +40,3 @@ @import url("_imports/trumps/s-header.css"); @import url("_imports/trumps/s-portal-nav.css"); @import url("_imports/trumps/s-cms-nav.css"); - -/* UNORGANIZED */ - -/* TODO: Convert to a component */ -@import url("_imports/branding_logos.css"); diff --git a/taccsite_cms/templates/header_branding.html b/taccsite_cms/templates/header_branding.html index 7ec95cf2b..8bee4ca4e 100644 --- a/taccsite_cms/templates/header_branding.html +++ b/taccsite_cms/templates/header_branding.html @@ -2,22 +2,26 @@ {% load staticfiles custom_portal_settings %} {% with settings.BRANDING as brands %} -
+
{# DEBUG: #}{# {{ brands|first }} #} {% for brand in brands %} - {% with filename=brand|index:1 selectors=brand|index:2 targeturl=brand|index:3 targetType=brand|index:4 accessibility=brand|index:5 corstype=brand|index:6 visibility=brand|index:7 %} + {% with name=brand|index:0 filename=brand|index:1 selectors=brand|index:2 targeturl=brand|index:3 targetType=brand|index:4 accessibility=brand|index:5 corstype=brand|index:6 visibility=brand|index:7 %} {% if visibility == "True" %} - {% if brand == brands|first %} - - - - {% elif brand != brands|first %} - {# RFE: Use CSS to remove the need for `.branding-seperator` and `if` logic #} - - - - + {% if brand != brands|first %} + | {% endif %} + + {{ accessibility }} + {% endif %} {% endwith %} {% endfor %} diff --git a/taccsite_cms/templates/header_logo.html b/taccsite_cms/templates/header_logo.html index a3a00c5f9..95bc9062e 100644 --- a/taccsite_cms/templates/header_logo.html +++ b/taccsite_cms/templates/header_logo.html @@ -4,8 +4,20 @@ {% with settings.LOGO as logo %} {% with filename=logo|index:1 selectors=logo|index:2 targeturl=logo|index:3 targetType=logo|index:4 accessibility=logo|index:5 corstype=logo|index:6 visibility=logo|index:7 %} {% if visibility == "True" %} - {% endif %} {% endwith %} From b2cec491fc0a4ffb17d690645668e060118fdc63 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Thu, 13 May 2021 17:01:05 -0500 Subject: [PATCH 002/106] GH-101: Navigation Bar (Partially Complete) - 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". --- conf/css/.postcssrc.yml | 3 + .../_imports/_tests/postcss-preset-env.css | 30 +++ .../src/_imports/components/c-branding.css | 1 - .../css/src/_imports/components/c-logo.css | 2 +- .../src/_imports/elements/html-elements.css | 1 + .../css/src/_imports/tools/x-arrow.css | 35 ++++ .../css/src/_imports/trumps/s-header.css | 197 +++++++++++------- .../css/src/_imports/trumps/s-portal-nav.css | 13 -- .../css/src/_themes/theme.default.json | 7 +- .../css/src/_themes/theme.has-dark-logo.json | 10 +- taccsite_cms/templates/cms_menu.html | 53 ++--- taccsite_custom | 2 +- 12 files changed, 235 insertions(+), 119 deletions(-) create mode 100644 taccsite_cms/static/site_cms/css/src/_imports/tools/x-arrow.css diff --git a/conf/css/.postcssrc.yml b/conf/css/.postcssrc.yml index 4d6a13ade..3cb3d9cdd 100644 --- a/conf/css/.postcssrc.yml +++ b/conf/css/.postcssrc.yml @@ -16,6 +16,9 @@ plugins: features: custom-media-queries: true media-query-ranges: true + # RFE: Fix bug on the Internet so we can use these reliably + # SEE: https://github.com/postcss/postcss-custom-selectors/issues/40 + custom-selectors: true cssnano: preset: - 'default' diff --git a/taccsite_cms/static/site_cms/css/src/_imports/_tests/postcss-preset-env.css b/taccsite_cms/static/site_cms/css/src/_imports/_tests/postcss-preset-env.css index 524396f20..a38278007 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/_tests/postcss-preset-env.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/_tests/postcss-preset-env.css @@ -56,3 +56,33 @@ Styleguide _Test @media (--wide-window) { ._test{ background-color:red; } } + + +/*! Custom Selectors */ +/* SEE: https://preset-env.cssdb.org/features#custom-selectors */ + +/*! Goal: */ +article h1+p,article h2+p,article h3+p{color: #000;} + +/*! Test: */ +@custom-selector :--heading h1, h2, h3; + +article :--heading + p { + color: #000; +} + +/*! Goal: */ +.nav-link:hover,.nav-link:focus,.nav-link:active{color:red;} + +/*! See: https://github.com/postcss/postcss-custom-selectors/issues/40 */ + +/*! Test: */ +@custom-selector :--nav-link-hover .nav-link:hover; +@custom-selector :--nav-link-focus .nav-link:focus; +@custom-selector :--nav-link-active .nav-link:active; + +:--nav-link-hover, +:--nav-link-focus, +:--nav-link-active { + color: red; +} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css index a259b213c..57ff49404 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css @@ -26,7 +26,6 @@ Styleguide Components.Branding /* This prevents header bar resize when branding is dynamically added */ /* CAVEAT: This is only for Portal and Docs which dynamically load content */ - /* FAQ: Do not use `48.78px`, because Safari only accepts whole numbers */ height: 40px; background-color: var(--global-color-primary--xx-dark); diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.css index 01333bb85..0b76049dd 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.css @@ -23,5 +23,5 @@ Styleguide Components.Logo /* Elements */ .c-logo__image { - /* … */ + height: 100%; } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css b/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css index 221f27618..1703df123 100755 --- a/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/elements/html-elements.css @@ -18,6 +18,7 @@ Styleguide Elements.MainSectioningRoots html { /* Set base font but support user-defined browser font size */ /* SEE: https://snook.ca/archives/html_and_css/font-size-with-rem */ + /* TODO: Use 62.5% (requires recalculating NON-Frontera instances of `rem`) */ font-size: 100%; /* 16px */ } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/x-arrow.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-arrow.css new file mode 100644 index 000000000..c7f1d74ea --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/x-arrow.css @@ -0,0 +1,35 @@ +/* +Arrow + +An arrow generator. Set variables for specific use cases. + +.x-arrow--right - Rightward (>) +.x-arrow--left - Leftward (<) +.x-arrow--up - Upward (^) +.x-arrow--down - Downward (v) + +Styleguide Components.Branding +*/ + +/* SEE: https://www.w3schools.com/howto/howto_css_arrows.asp */ +%x-arrow { + --size: 5px; + --line: 2px; + --color: black; + + display: inline-block; + vertical-align: middle; + + /* arrow size */ + padding: var(--size); + + /* line width */ + border-width: 0 var(--line) var(--line) 0; + border-style: solid; + border-color: var(--color); +} + +%x-arrow--right { transform: rotate(-45deg); } +%x-arrow--left { transform: rotate(135deg); } +%x-arrow--up { transform: rotate(-135deg); } +%x-arrow--down { transform: rotate(45deg); } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css index 814ef7609..8cf032b13 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css @@ -15,126 +15,179 @@ Markup: s-header.html.twig Styleguide Trumps.Scopes.Header */ +@import url("_imports/tools/x-arrow.css"); -/* WARNING: NO-R/EM: Until Frontera CMS drops Bootstrap 3.7.1 (for old design)… - No `em` nor `rem` allowed, because they aren't consitently reliable. - - On Frontera CMS, `1rem` = `10px` and `body { font-size: 15px }` - - On any other CMS, `1rem` = `16px` (browser default). */ +@custom-selector :--in-cms body > .o-site__body; +@custom-selector :--in-portal body > .content; +@custom-selector :--in-docs body > #frontera-top-nav-container; .s-header { - font-size: 16px; /* NO-R/EM: Overwrite `bootstrap.3.3.7.css` */ - - /* FAQ: Asssigning this font is only necessary for the User Guide, - because it has a different `body` font. Otherwise, this style - repeats the CMS and Portal `body` font. But, with this style, - the header may be moved to a future page/site without losing font */ - /* TODO: Find a way to be safe, but not redundant */ - font-family: var(--global-font-family); + /* FAQ: Other flex styles come from Bootstrap via `.navbar` */ + align-items: stretch; + + /* Make horizontal padding match the horizontal content buffer in Portal */ + /* FAQ: The `calc()` keeps track of disparate source of space values */ + /* - 16px is 1rem from Portal (via `#sidebar .nav-content`) */ + /* - 20px is from Portal (via `.nav-link`) */ + padding: 0 calc(16px + 20px); + + background-color: env(--header-bkgd-color); + + font-size: 12px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */ + font-weight: bold; + font-family: env(--header-font-family); + /* Copied from Portal (via `body`) */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - - /* To have border not show, ensure value equals that of `--bkgd-color` */ - border-bottom: 1px solid env(--header-major-border-color); +} +/* To overwrite Portal which loads Bootstrap after header styles */ +:--in-portal .s-header { + padding: 0 calc(16px + 20px); } +/* On wide viewport, prevent header resize from dynamic content */ +@media (--wide-and-above) { + /* CAVEAT: This is only for Portal and Docs which dynamically load content */ + .s-header { + height: 55px; + } +} -/* Affiliation */ -/* SEE: taccsite_cms/static/site_cms/css/src/_imports/branding_logos.css */ /* Logo */ .s-header .c-logo { + height: 100%; + /* To align position of first CMS nav link with Portal "Dashboard" header */ - /* WARNING: If Portal UI changes, then these styles may need to change */ - min-width: 176px; - margin-right: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.navbar-brand`) */ - padding: 0; + /* NOTE: Each portal should set this value based on its image width */ + --offset: 10px; + margin-right: var(--offset); + /* FAQ: In case image does not load and browser shows alt text */ color: env(--header-text-color); - /* text-decoration: none; *//* already provided by Bootstrap */ } +/* Overwrite Bootstrap */ +.s-header .c-logo.navbar-brand { + padding-top: unset; + padding-bottom: unset; + display: unset; +} + .s-header .c-logo__image { - height: 40px; + padding-top: 5px; + padding-bottom: 5px; } -/* Navigation */ -/* On wide viewport, prevent header resize from dynamic content */ -/* CAVEAT: This is only for Portal and Docs which dynamically load content */ -@media only screen and (min-width: 1201px) { - .s-header.navbar { - height: 50px; - } -} -.s-header.navbar { - /* Make horizontal padding match the horizontal content buffer in Portal */ - /* FAQ: The `calc()` keeps track of disparate source of space values */ - /* `16px` = `1rem` from Portal (via `#sidebar .nav-content`) */ - /* `20px` from Portal (via `.nav-link`) */ - --nav-padding-horz: calc(16px + 20px); - --nav-padding-vert: 5px; +/* Navigation */ - background-color: env(--header-bkgd-color); - padding: var(--nav-padding-vert) var(--nav-padding-horz); +/* FAQ: Each relies on the parent also stretching */ +.s-header, +:--in-portal .s-header, +.s-header .navbar-collapse { + align-items: stretch; } -/* Navigation: Links */ -.s-header .nav-link { - --line-height: 24px; - --border-width: 4px; - --border-offset: calc(var(--nav-padding-vert) - var(--border-width)); - --border-color: rgb(213, 181, 124); - /* The nav vertical padding does not match the link border, so the alignment - of the link border with the bottom of the header is off by small amount */ - position: relative; - top: var(--border-offset); +/* Links */ + +/* RFE: Fix bug on the Internet so we can use these reliably */ +/* SEE: https://github.com/postcss/postcss-custom-selectors/issues/40 */ +/* +@custom-selector :--nav-link-hover .s-header .nav-link:hover; +@custom-selector :--nav-link-focus .s-header .nav-link:focus; +@custom-selector :--nav-link-active .s-header .nav-link:active; +@custom-selector :--nav-link-current + .s-header .nav-item.active .nav-link, + .s-header .nav-item.dropdown.show .nav-link; +*/ - line-height: var(--line-height); +.s-header .nav-link { + height: 100%; - /* If link text uses 2 lines, header grows taller (but it must not do so) */ + display: flex; + align-items: center; + /* FAQ: If link text uses 2 lines, header grows taller, but it must not */ white-space: nowrap; + + color: env(--header-text-color); +} +.s-header .nav-link:hover, +.s-header .nav-link:active, +.s-header .nav-item.active .nav-link, +.s-header .nav-item.dropdown.show .nav-link { + background-color: env(--header-link-bkgd-color); } .s-header .nav-link:hover, .s-header .nav-link:focus, .s-header .nav-link:active, -.s-header .nav-item.active .nav-link { - border-width: 0 0 var(--border-width); - border-style: solid; - border-color: var(--border-color); - margin-bottom: calc( var(--border-width) * -1 ); -} -/* HACK: Using an ID selector, because Bootstrap has overspecific selectors */ -#s-header .nav-link, -/* HACK: Support `span.nav-link` having children `a` and `a.dropdown-toggle-split` */ -#s-header .nav-link > a { +.s-header .nav-item.active .nav-link, +.s-header .nav-item.dropdown.show .nav-link { + border-top: 4px solid transparent; + border-bottom: 4px solid env(--header-accent-color); +} +/* Overwrite Bootstrap */ +.s-header.navbar-dark .navbar-nav .nav-link, +.s-header.navbar-dark .navbar-nav .nav-link:focus, +.s-header.navbar-dark .navbar-nav .nav-link:hover { color: env(--header-text-color); - /* text-decoration: none; *//* already provided by Bootstrap */ +} +.s-header .nav-link { + padding-top: unset; + padding-bottom: unset; } -/* Navigation: Links: Responsive Design */ +@media (--wide-and-above) { + .s-header .navbar-nav .nav-link, + :--in-portal .s-header .navbar-nav .nav-link { + padding-right: 1.25em; /* intent is 15px padding for 12px font */ + padding-left: 1.25em; /* intent is 15px padding for 12px font */ + } +} +@media (--wide-and-below) { + .s-header .navbar-nav .nav-link, + :--in-portal .s-header .navbar-nav .nav-link { + padding-right: 0.5em; /* intent is just very narrow (dev design) */ + padding-left: 0.5em; /* intent is just very narrow (dev design) */ + } +} -/* Tweak Bootstrap `_nav.scss` (which selects via `navbar-expand-` class) */ -.s-header[class*="navbar-expand-"] .navbar-nav .nav-link { - padding-top: 8px; /* NO-R/EM: 0.5rem (from Bootstrap) */ - padding-bottom: 8px; /* NO-R/EM: 0.5rem (from Bootstrap) */ +.s-header .dropdown-toggle::after { + @extend %x-arrow; - padding-right: 14px; /* NO-R/EM: .875rem (overwrite Bootstrap) */ - padding-left: 14px; /* NO-R/EM: .875rem (overwrite Bootstrap) */ + --size: 4px; + --line: 1px; + --color: env(--header-text-color); + margin-left: 8px; +} +.s-header .dropdown-toggle[aria-expanded="true"]::after { + @extend %x-arrow--up; + margin-top: 0.6em; +} +.s-header .dropdown-toggle[aria-expanded="false"]::after { + @extend %x-arrow--down; + margin-top: -0.4em; } - /* Search */ +/* GH-101: Retain search design until Wes works on it */ +.s-header .s-search-bar, +.s-header .s-search-bar::part(input), +.s-header .s-search-bar::part(button) { + font-size: 12px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */ +} + /* Create a line between search bar and login */ /* FAQ: The line should only exist if both elements are present */ .s-header .s-search-bar ~ .s-portal-nav { @@ -149,6 +202,6 @@ Styleguide Trumps.Scopes.Header /* HACK: Using FontAwesome as placeholder */ .s-header [class*="fa-"] { - width: 27px; /* NO-R/EM: 1.25em (from Portal `.fa`—FP-228 will deprecate it) */ + width: 27px; /* (from Portal `.fa` 1.25em which FP-636 will deprecate) */ text-align: center; } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-portal-nav.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-portal-nav.css index 41b7b3894..e6259564a 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-portal-nav.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-portal-nav.css @@ -9,16 +9,3 @@ Markup: s-portal-nav.html Styleguide Trumps.Scopes.PortalNav */ - -/* WARNING: NO-R/EM: Until Frontera CMS drops Bootstrap 3.7.1 (for old design)… - No `em` nor `rem` allowed, because they aren't consitently reliable. - - On Frontera CMS, `1rem` = `10px` and `body { font-size: 15px }` - - On any other CMS, `1rem` = `16px` (browser default). */ - -.s-portal-nav { - /* Override `.navbar` */ - text-transform: none; -} -.s-portal-nav .dropdown-menu { - font-size: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.dropdown-menu`) */ -} diff --git a/taccsite_cms/static/site_cms/css/src/_themes/theme.default.json b/taccsite_cms/static/site_cms/css/src/_themes/theme.default.json index 2aff02298..9f7e6b9ea 100644 --- a/taccsite_cms/static/site_cms/css/src/_themes/theme.default.json +++ b/taccsite_cms/static/site_cms/css/src/_themes/theme.default.json @@ -6,11 +6,12 @@ "environment-variables": { "// HEADER": "", + "--header-font-family": "Roboto, sans-serif", + "--header-accent-color": "#877453", "--header-text-color": "var(--global-color-primary--xx-light)", "--header-bkgd-color": "var(--global-color-primary--xx-dark)", - "--header-minor-border-color": "var(--global-color-primary--normal)", - "// To 'hide' border by setting its color to match background color": "", - "--header-major-border-color": "var(--global-color-primary--xx-dark)" + "--header-link-bkgd-color": "#313131", + "--header-minor-border-color": "var(--global-color-primary--normal)" } } diff --git a/taccsite_cms/static/site_cms/css/src/_themes/theme.has-dark-logo.json b/taccsite_cms/static/site_cms/css/src/_themes/theme.has-dark-logo.json index 01eef7a80..e68165a8e 100644 --- a/taccsite_cms/static/site_cms/css/src/_themes/theme.has-dark-logo.json +++ b/taccsite_cms/static/site_cms/css/src/_themes/theme.has-dark-logo.json @@ -6,10 +6,12 @@ "environment-variables": { "// HEADER": "", - "--header-text-color": "var(--global-color-primary--x-dark)", + "--header-font-family": "Roboto, sans-serif", + "--header-accent-color": "#877453", + "--header-text-color": "var(--global-color-primary--xx-dark)", "--header-bkgd-color": "var(--global-color-primary--x-light)", - "--header-minor-border-color": "var(--global-color-primary--normal)", - "// To show border between only the light header and content below it": "", - "--header-major-border-color": "var(--global-color-primary--normal)" + "--header-link-bkgd-color": "#D8D8D8", + "--header-minor-border-color": "var(--global-color-primary--normal)" + } } diff --git a/taccsite_cms/templates/cms_menu.html b/taccsite_cms/templates/cms_menu.html index 8db8eb87e..2ceabb2c3 100644 --- a/taccsite_cms/templates/cms_menu.html +++ b/taccsite_cms/templates/cms_menu.html @@ -7,33 +7,38 @@ {% for child in children %}
  • {% if child.children %} - - - {{ child.get_menu_title|safe }} - {% if child.selected %}(current){% endif %} - + +
  • {% if child.children %} Date: Thu, 13 May 2021 20:58:00 -0500 Subject: [PATCH 004/106] GH-101: Navigation Bar (Fix Color Bug/s in Docs) - (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. --- taccsite_cms/static/site_cms/css/src/site.header.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/site.header.css b/taccsite_cms/static/site_cms/css/src/site.header.css index 0d19409d1..38006ccac 100644 --- a/taccsite_cms/static/site_cms/css/src/site.header.css +++ b/taccsite_cms/static/site_cms/css/src/site.header.css @@ -7,11 +7,11 @@ /* SETTINGS */ -/* CAVEAT: This is already imported in `site.css`, but necessary here to - override Portal (which also loads `site.header.css`), so font - variables are unfortunately overwritten 1x in CMS, 2x in Portal */ +/* CAVEAT: These are already imported in `site.css`, but necessary here + for Portal & Docs, thus font variables are unfortunately overwritten 1x in CMS, 2x in Portal (which has its own settings CSS) */ /* TODO: Find a way to be modular, but not redundant; perhaps `env()` vars */ @import url("_imports/settings/font.css"); +@import url("_imports/settings/color.css"); From c988a7bfb25b765ee84c6068426c42a8f348625c Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Fri, 14 May 2021 00:11:02 -0500 Subject: [PATCH 005/106] GH-101: Navigation Bar (Fix More Bugs in Docs) - 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. --- .../src/_imports/components/c-branding.css | 13 ++++-- .../css/src/_imports/tools/selectors.css | 19 +++++++++ .../css/src/_imports/trumps/README.css | 41 +++++++++++++++++++ .../src/_imports/trumps/for-docs.header.css | 29 +++++++++++++ .../css/src/_imports/trumps/s-header.css | 22 ++++++---- .../static/site_cms/css/src/site.header.css | 2 + 6 files changed, 115 insertions(+), 11 deletions(-) create mode 100644 taccsite_cms/static/site_cms/css/src/_imports/tools/selectors.css create mode 100644 taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css index 57ff49404..cb9c35f42 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css @@ -7,6 +7,7 @@ Markup: c-branding.twig.html Styleguide Components.Branding */ +@import url("_imports/tools/selectors.css"); @import url("_imports/tools/media-queries.css"); /* IDEA: Use multi-column (`column-*`) to simplify border, margin, separator */ @@ -23,16 +24,20 @@ Styleguide Components.Branding flex-direction: row; justify-content: center; align-items: center; - - /* This prevents header bar resize when branding is dynamically added */ - /* CAVEAT: This is only for Portal and Docs which dynamically load content */ +} +.c-branding, +/* To force style on old markup before new markup dynamically replaces it */ +:--for-docs .branding-header, +:--for-portal .branding-header { + /* To prevent zero height branding bar as it is loaded */ height: 40px; - background-color: var(--global-color-primary--xx-dark); color: var(--global-color-primary--xx-light); + background-color: env(--header-bkgd-color); border-bottom: 1px solid var(--global-color-primary--normal); } + /* A responsive column gap */ .c-branding__link:first-child .c-branding__image { margin-right: var(--column-gap--side); diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/selectors.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/selectors.css new file mode 100644 index 000000000..30259c760 --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/selectors.css @@ -0,0 +1,19 @@ +/* DO NOT ADD STYLES HERE; ADD CUSTOM SELECTORS TO USE IN OTHER STYLESHEETS */ + +/* +For Other Sites + +These are global selectors to target known subsites. + +Usage: `:--for-portal .some-class { … }` + +Notice: These must be Tools (imported as needed) until native browser support, at which time they can become Settings (imported globally). + +Reference: +- https://drafts.csswg.org/css-extensions/#custom-selectors + +Styleguide Tools.CustomSelectors.ForOtherSites +*/ +@custom-selector :--for-cms body > .o-site__body; +@custom-selector :--for-portal body > .content; +@custom-selector :--for-docs .wy-body-for-nav; diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/README.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/README.css index 1f86153be..4163f9080 100755 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/README.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/README.css @@ -45,6 +45,47 @@ Rules: Styleguide Trumps.Scopes */ +/* +For (Other Sites) + +For (Other Sites) styles are functional overrides and styles that are scoped to a specific subsite that shares elements with sibling subsites. These are meant to be used sparingly. The for-other-site styles are specifically intended for needs specific to Docs, CMS, or Portal. + +Guidelines: + +- For (Other Site) styles are especially rare, evaluate before creating. +- For reliable results, use a consistent selector for each subsite. + +Rules: + +- The `!important` may be used. +- All styles **must** have a comment. + +Styleguide Trumps.ForOtherSites +*/ + +/* +Scopes + +Scope styles are functional overrides and styles that are scoped to a specific area. These are meant to be used sparingly. Examples of scopes are functional styles for third-party markup, WYSIWIG editor tags, form elements, components with a forced relationship. + +Reference: + +- [BEM with Namespaces: Scope Namespaces](https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/#scope-namespaces-s-) + +Guidelines: + +- Scopes are pretty rare, evaluate before creating. +- A consistent way to author these in nested inside `.s-* {}`. + +Rules: + +- The `!important` may be used. +- All overrides **must** have a comment. +- Scope styles should have a comment. + +Styleguide Trumps.Scopes +*/ + /* Utility diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css new file mode 100644 index 000000000..45dd3f57c --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css @@ -0,0 +1,29 @@ +/* +Docs + +The [Core Docs](https://github.com/TACC/Core-Docs). + +Styleguide Trumps.ForOtherSites.Docs +*/ +@import url("_imports/tools/selectors.css"); + +:--for-docs nav.stickynav { + top: 95px; +} +:--for-docs #frontera-top-nav { + /* To ensure header has height for a layout resize script */ + /* SEE: https://bitbucket.org/taccaci/frontera-tech-docs/src/429f05f/frontera_theme/base.html#lines-69 */ + min-height: 95px; + + /* WARNING: Unknown purpose! */ + background-color: rgb(51, 51, 51); +} + +/* To compensate for Docs not having `.form-inline` in _its_ Bootstrap 4.3.1 */ +:--for-docs .form-inline { + /* SEE: CMS https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/… */ + /* SEE: Portal https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/… */ + display: flex; + flex-flow: row wrap; + align-items: center; +} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css index 8cf032b13..150c6b61a 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css @@ -15,11 +15,14 @@ Markup: s-header.html.twig Styleguide Trumps.Scopes.Header */ +@import url("_imports/tools/selectors.css"); @import url("_imports/tools/x-arrow.css"); -@custom-selector :--in-cms body > .o-site__body; -@custom-selector :--in-portal body > .content; -@custom-selector :--in-docs body > #frontera-top-nav-container; + + + + +/* Container */ .s-header { /* FAQ: Other flex styles come from Bootstrap via `.navbar` */ @@ -42,7 +45,7 @@ Styleguide Trumps.Scopes.Header -moz-osx-font-smoothing: grayscale; } /* To overwrite Portal which loads Bootstrap after header styles */ -:--in-portal .s-header { +:--for-portal .s-header { padding: 0 calc(16px + 20px); } @@ -91,7 +94,7 @@ Styleguide Trumps.Scopes.Header /* FAQ: Each relies on the parent also stretching */ .s-header, -:--in-portal .s-header, +:--for-portal .s-header, .s-header .navbar-collapse { align-items: stretch; } @@ -148,14 +151,14 @@ Styleguide Trumps.Scopes.Header @media (--wide-and-above) { .s-header .navbar-nav .nav-link, - :--in-portal .s-header .navbar-nav .nav-link { + :--for-portal .s-header .navbar-nav .nav-link { padding-right: 1.25em; /* intent is 15px padding for 12px font */ padding-left: 1.25em; /* intent is 15px padding for 12px font */ } } @media (--wide-and-below) { .s-header .navbar-nav .nav-link, - :--in-portal .s-header .navbar-nav .nav-link { + :--for-portal .s-header .navbar-nav .nav-link { padding-right: 0.5em; /* intent is just very narrow (dev design) */ padding-left: 0.5em; /* intent is just very narrow (dev design) */ } @@ -179,6 +182,9 @@ Styleguide Trumps.Scopes.Header } + + + /* Search */ /* GH-101: Retain search design until Wes works on it */ @@ -198,6 +204,8 @@ Styleguide Trumps.Scopes.Header + + /* Icons */ /* HACK: Using FontAwesome as placeholder */ diff --git a/taccsite_cms/static/site_cms/css/src/site.header.css b/taccsite_cms/static/site_cms/css/src/site.header.css index 38006ccac..cda4e7132 100644 --- a/taccsite_cms/static/site_cms/css/src/site.header.css +++ b/taccsite_cms/static/site_cms/css/src/site.header.css @@ -39,3 +39,5 @@ @import url("_imports/trumps/s-header.css"); @import url("_imports/trumps/s-portal-nav.css"); @import url("_imports/trumps/s-cms-nav.css"); +/* Specific to Subsites */ +@import url("_imports/trumps/for-docs.header.css"); From 290e27b02b3c4ee23a0867838b1e7323fc4e26c4 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Fri, 14 May 2021 11:22:02 -0500 Subject: [PATCH 006/106] GH-101: Navigation Bar (Fix Img Max-Width in Docs) Unset Docs' `img { max-width; }`. Docs does this too but for old markup. --- .../site_cms/css/src/_imports/trumps/for-docs.header.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css index 45dd3f57c..4b16cfb8b 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css @@ -27,3 +27,9 @@ Styleguide Trumps.ForOtherSites.Docs flex-flow: row wrap; align-items: center; } + +/* To overwrite `img { max-width: 100% }` */ +:--for-docs .s-header img, +:--for-docs .c-branding img { + max-width: unset; +} From d3361d73990864b950d55058481173145f4e003f Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Fri, 14 May 2021 15:56:27 -0500 Subject: [PATCH 007/106] GH-101: Navigation Bar (Fix & Doc Height Bugs) --- .../src/_imports/components/c-branding.css | 2 +- .../css/src/_imports/tools/selectors.css | 2 +- .../src/_imports/trumps/for-docs.header.css | 11 ++- .../css/src/_imports/trumps/s-header.css | 67 ++++++++++--------- 4 files changed, 48 insertions(+), 34 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css index cb9c35f42..37a511277 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css @@ -29,7 +29,7 @@ Styleguide Components.Branding /* To force style on old markup before new markup dynamically replaces it */ :--for-docs .branding-header, :--for-portal .branding-header { - /* To prevent zero height branding bar as it is loaded */ + /* To prevent zero-height element as it is loaded */ height: 40px; color: var(--global-color-primary--xx-light); diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/selectors.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/selectors.css index 30259c760..ea8317177 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/tools/selectors.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/tools/selectors.css @@ -5,7 +5,7 @@ For Other Sites These are global selectors to target known subsites. -Usage: `:--for-portal .some-class { … }` +Usage: `:--for-subsite .some-class { … }` Notice: These must be Tools (imported as needed) until native browser support, at which time they can become Settings (imported globally). diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css index 4b16cfb8b..456e3a7a9 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css @@ -7,18 +7,25 @@ Styleguide Trumps.ForOtherSites.Docs */ @import url("_imports/tools/selectors.css"); +/* Sidebar Nav Dependency on Header Height */ +/* FAQ: These stylesare intentionally overriden by Docs layout resize script */ +/* SEE: https://bitbucket.org/taccaci/frontera-tech-docs/src/429f05f/frontera_theme/base.html#lines-69 */ + +/* To position Docs' sidebar nav at expected initial vertical location ASAP */ :--for-docs nav.stickynav { + /* Override `top: 0` (in `theme.css`) */ top: 95px; } :--for-docs #frontera-top-nav { - /* To ensure header has height for a layout resize script */ - /* SEE: https://bitbucket.org/taccaci/frontera-tech-docs/src/429f05f/frontera_theme/base.html#lines-69 */ + /* To ensure header has expected height before Docs AJAX content load */ min-height: 95px; /* WARNING: Unknown purpose! */ background-color: rgb(51, 51, 51); } + + /* To compensate for Docs not having `.form-inline` in _its_ Bootstrap 4.3.1 */ :--for-docs .form-inline { /* SEE: CMS https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/… */ diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css index 150c6b61a..987704807 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css @@ -25,15 +25,6 @@ Styleguide Trumps.Scopes.Header /* Container */ .s-header { - /* FAQ: Other flex styles come from Bootstrap via `.navbar` */ - align-items: stretch; - - /* Make horizontal padding match the horizontal content buffer in Portal */ - /* FAQ: The `calc()` keeps track of disparate source of space values */ - /* - 16px is 1rem from Portal (via `#sidebar .nav-content`) */ - /* - 20px is from Portal (via `.nav-link`) */ - padding: 0 calc(16px + 20px); - background-color: env(--header-bkgd-color); font-size: 12px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */ @@ -44,28 +35,51 @@ Styleguide Trumps.Scopes.Header -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -/* To overwrite Portal which loads Bootstrap after header styles */ +/* To give cross-site header padding that respects Portal-only visual balance */ +.s-header, +/* To overwrite Docs' Bootstrap which is unexpectedly loaded after this */ +/* RFE: Load Docs Bootstrap before CMS CSS (test, revisit relevant hacks) */ +:--for-docs .s-header, +/* To overwrite Portal's Bootstrap which is mistakenly loaded after this */ +/* RFE: Load Portal Bootstrap before CMS CSS (test, revisit relevant hacks) */ :--for-portal .s-header { + /* To align logo (whole image not just visible pixels) with Portal sidebar */ + /* FAQ: The calc() retains values from disparate styles in Portal */ + /* FAQ: The calc() is calculated at build time, so we may be verbose */ + /* - 16px is 1rem from Portal `#sidebar .nav-content` */ + /* - 20px is from Portal `.nav-link` */ padding: 0 calc(16px + 20px); } -/* On wide viewport, prevent header resize from dynamic content */ -@media (--wide-and-above) { - /* CAVEAT: This is only for Portal and Docs which dynamically load content */ - .s-header { - height: 55px; - } +/* To stretch elements as tall as parent (`height: 100%` for flex row items) */ +.s-header, +/* To overwrite Docs' Bootstrap which is unexpectedly loaded after this */ +/* RFE: Load Docs Bootstrap before CMS CSS (test, revisit relevant hacks) */ +:--for-docs .s-header, +/* To overwrite Portal's Bootstrap which is mistakenly loaded after this */ +/* RFE: Load Portal Bootstrap before CMS CSS (test, revisit relevant hacks) */ +:--for-portal .s-header, +/* To propogate styles through extra wrapper (of Bootstrap-driven mobile nav) */ +.s-header .navbar-collapse { + align-items: stretch; } - +/* To prevent zero-height element as it is loaded */ +/* FAQ: The zero-height fix is most obvious on Portal/Docs or slow network */ +/* To prevent extra height from FOUC during Portal/Docs AJAX content load */ +/* To set nav height, but not constrain height of opened mobile nav */ +/* FAQ: Set height of descendants, but not of CMS and Portal and mobile navs */ +.s-header .c-logo, +.s-header .navbar-toggler, +.s-header tacc-search-bar { + height: 55px; +} /* Logo */ .s-header .c-logo { - height: 100%; - /* To align position of first CMS nav link with Portal "Dashboard" header */ /* NOTE: Each portal should set this value based on its image width */ --offset: 10px; @@ -90,17 +104,6 @@ Styleguide Trumps.Scopes.Header -/* Navigation */ - -/* FAQ: Each relies on the parent also stretching */ -.s-header, -:--for-portal .s-header, -.s-header .navbar-collapse { - align-items: stretch; -} - - - /* Links */ /* RFE: Fix bug on the Internet so we can use these reliably */ @@ -151,6 +154,8 @@ Styleguide Trumps.Scopes.Header @media (--wide-and-above) { .s-header .navbar-nav .nav-link, + /* To overwrite Portal's Bootstrap which is mistakenly loaded after this */ + /* RFE: Load Portal Bootstrap before CMS CSS (test, revisit relevant hacks) */ :--for-portal .s-header .navbar-nav .nav-link { padding-right: 1.25em; /* intent is 15px padding for 12px font */ padding-left: 1.25em; /* intent is 15px padding for 12px font */ @@ -158,6 +163,8 @@ Styleguide Trumps.Scopes.Header } @media (--wide-and-below) { .s-header .navbar-nav .nav-link, + /* To overwrite Portal's Bootstrap which is mistakenly loaded after this */ + /* RFE: Load Portal Bootstrap before CMS CSS (test, revisit relevant hacks) */ :--for-portal .s-header .navbar-nav .nav-link { padding-right: 0.5em; /* intent is just very narrow (dev design) */ padding-left: 0.5em; /* intent is just very narrow (dev design) */ From ccfc596ecb104067ae127ea1280c706d23acf48d Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Fri, 14 May 2021 16:39:51 -0500 Subject: [PATCH 008/106] GH-101: Navigation Bar (Set Dropdown Font Size) --- .../site_cms/css/src/_imports/trumps/s-header.css | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css index 987704807..43c104596 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css @@ -104,7 +104,7 @@ Styleguide Trumps.Scopes.Header -/* Links */ +/* Nav Links */ /* RFE: Fix bug on the Internet so we can use these reliably */ /* SEE: https://github.com/postcss/postcss-custom-selectors/issues/40 */ @@ -192,6 +192,17 @@ Styleguide Trumps.Scopes.Header +/* Dropdown Menus */ + +.dropdown-menu { + /* To overwrite Bootstrap's `1rem` */ + font-size: 12px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */ +} + + + + + /* Search */ /* GH-101: Retain search design until Wes works on it */ From ea43ec9b889b5afcb12bb8cd0714966e740aea1c Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Fri, 14 May 2021 18:07:36 -0500 Subject: [PATCH 009/106] GH-101: Navigation Bar (Use Constants for Header) - 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. --- package-lock.json | 13 ++++++++ package.json | 1 + .../src/_imports/components/c-branding.css | 2 +- .../src/_imports/trumps/for-docs.header.css | 30 +++++++++++-------- .../css/src/_imports/trumps/s-header.css | 2 +- .../site_cms/css/src/_themes/constants.json | 15 ++++++++++ .../static/site_cms/css/src/_themes/export.js | 7 ++++- .../css/src/_themes/theme.default.json | 4 +-- .../css/src/_themes/theme.has-dark-logo.json | 4 +-- yarn.lock | 5 ++++ 10 files changed, 61 insertions(+), 22 deletions(-) create mode 100644 taccsite_cms/static/site_cms/css/src/_themes/constants.json diff --git a/package-lock.json b/package-lock.json index 463ff5341..baf9c1c4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "async": "^3.2.0", "cssnano": "^4.1.10", "dotenv": "^8.2.0", + "merge-lite": "^1.0.2", "npm-watch": "^0.7.0", "postcss-cli": "^7.1.2", "postcss-css-variables": "^0.17.0", @@ -1976,6 +1977,12 @@ "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==", "dev": true }, + "node_modules/merge-lite": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/merge-lite/-/merge-lite-1.0.2.tgz", + "integrity": "sha512-28Q9aFRLzLCSp/2MLV49sbilBcCw7pIxq9YfOuX8+g/cMbPgYcAZgI0BLHnsb7ZRgvYOuaEGQPYJk8OWcGHk4A==", + "dev": true + }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -5941,6 +5948,12 @@ "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==", "dev": true }, + "merge-lite": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/merge-lite/-/merge-lite-1.0.2.tgz", + "integrity": "sha512-28Q9aFRLzLCSp/2MLV49sbilBcCw7pIxq9YfOuX8+g/cMbPgYcAZgI0BLHnsb7ZRgvYOuaEGQPYJk8OWcGHk4A==", + "dev": true + }, "merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", diff --git a/package.json b/package.json index a407678aa..981c156e6 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "async": "^3.2.0", "cssnano": "^4.1.10", "dotenv": "^8.2.0", + "merge-lite": "^1.0.2", "npm-watch": "^0.7.0", "postcss-cli": "^7.1.2", "postcss-css-variables": "^0.17.0", diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css index 37a511277..31086829a 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css @@ -30,7 +30,7 @@ Styleguide Components.Branding :--for-docs .branding-header, :--for-portal .branding-header { /* To prevent zero-height element as it is loaded */ - height: 40px; + height: env(--header-brandbar-height); color: var(--global-color-primary--xx-light); background-color: env(--header-bkgd-color); diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css index 456e3a7a9..b95da428d 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css @@ -7,34 +7,38 @@ Styleguide Trumps.ForOtherSites.Docs */ @import url("_imports/tools/selectors.css"); -/* Sidebar Nav Dependency on Header Height */ -/* FAQ: These stylesare intentionally overriden by Docs layout resize script */ -/* SEE: https://bitbucket.org/taccaci/frontera-tech-docs/src/429f05f/frontera_theme/base.html#lines-69 */ + + +/* Initialize Sidebar Position (for Dependency on Header Height) */ /* To position Docs' sidebar nav at expected initial vertical location ASAP */ :--for-docs nav.stickynav { - /* Override `top: 0` (in `theme.css`) */ - top: 95px; + /* To override `top: 0` (in `theme.css`) */ + /* FAQ: This is an initial value that is re-calculated by a Docs script */ + /* SEE: https://bitbucket.org/taccaci/frontera-tech-docs/src/429f05f/frontera_theme/base.html#lines-69 */ + top: calc(env(--header-brandbar-height) + env(--header-navbar-height)); } -:--for-docs #frontera-top-nav { - /* To ensure header has expected height before Docs AJAX content load */ - min-height: 95px; - /* WARNING: Unknown purpose! */ - background-color: rgb(51, 51, 51); -} +/* Overwrite Bootstrap (for Search Form in Header) */ /* To compensate for Docs not having `.form-inline` in _its_ Bootstrap 4.3.1 */ :--for-docs .form-inline { - /* SEE: CMS https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/… */ - /* SEE: Portal https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/… */ + /* The search bar expects these styles to be available */ + /* SEE: CMS //maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap… */ + /* SEE: Portal //stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap… */ + /* SEE: Docs /src/5b223a5/docs/css/cms.bootstrap.4.3.1.css */ display: flex; + /* NOTE: These are perceptibly ineffectual but consistent with Portal & CMS */ flex-flow: row wrap; align-items: center; } + + +/* Overwrite ReadTheDocs (for Images in Header) */ + /* To overwrite `img { max-width: 100% }` */ :--for-docs .s-header img, :--for-docs .c-branding img { diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css index 43c104596..7d4c789f4 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css @@ -72,7 +72,7 @@ Styleguide Trumps.Scopes.Header .s-header .c-logo, .s-header .navbar-toggler, .s-header tacc-search-bar { - height: 55px; + height: env(--header-navbar-height); } diff --git a/taccsite_cms/static/site_cms/css/src/_themes/constants.json b/taccsite_cms/static/site_cms/css/src/_themes/constants.json new file mode 100644 index 000000000..c09a83f02 --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_themes/constants.json @@ -0,0 +1,15 @@ +{ + "// METADATA FOR HUMANS": "", + "format": "https://github.com/csstools/postcss-preset-env#importfrom", + "name": "constants", + + "environment-variables": { + + "// HEADER": "", + "--header-font-family": "Roboto, sans-serif", + "--header-accent-color": "#877453", + "--header-brandbar-height": "40px", + "--header-navbar-height": "55px" + + } +} diff --git a/taccsite_cms/static/site_cms/css/src/_themes/export.js b/taccsite_cms/static/site_cms/css/src/_themes/export.js index 1e3611bc3..634a3dbdc 100644 --- a/taccsite_cms/static/site_cms/css/src/_themes/export.js +++ b/taccsite_cms/static/site_cms/css/src/_themes/export.js @@ -1,6 +1,7 @@ /** * Export appropriate theme file based on settings value */ +const merge = require('merge-lite'); const rootPath = __dirname + '/../../../../../../'; const settings = require( rootPath + 'taccsite_cms/settings.json'); const theme = settings.THEME || 'default'; @@ -26,8 +27,12 @@ function requireOrElse(modulePath, callback) { } } -const data = requireOrElse(`./theme.${theme}.json`, () => { +const constants = require(`./constants.json`); +const themeData = requireOrElse(`./theme.${theme}.json`, () => { console.error(`Unable to find '${__dirname}/theme.${theme}.json'`); }); +/* To prevent a theme from overwriting a constant, merge constants onto theme */ +let data = merge( themeData, constants ); + module.exports = data; diff --git a/taccsite_cms/static/site_cms/css/src/_themes/theme.default.json b/taccsite_cms/static/site_cms/css/src/_themes/theme.default.json index 9f7e6b9ea..81577f802 100644 --- a/taccsite_cms/static/site_cms/css/src/_themes/theme.default.json +++ b/taccsite_cms/static/site_cms/css/src/_themes/theme.default.json @@ -1,13 +1,11 @@ { - "//": "Metadata for humans", + "// METADATA FOR HUMANS": "", "format": "https://github.com/csstools/postcss-preset-env#importfrom", "name": "default", "environment-variables": { "// HEADER": "", - "--header-font-family": "Roboto, sans-serif", - "--header-accent-color": "#877453", "--header-text-color": "var(--global-color-primary--xx-light)", "--header-bkgd-color": "var(--global-color-primary--xx-dark)", "--header-link-bkgd-color": "#313131", diff --git a/taccsite_cms/static/site_cms/css/src/_themes/theme.has-dark-logo.json b/taccsite_cms/static/site_cms/css/src/_themes/theme.has-dark-logo.json index e68165a8e..2c688b066 100644 --- a/taccsite_cms/static/site_cms/css/src/_themes/theme.has-dark-logo.json +++ b/taccsite_cms/static/site_cms/css/src/_themes/theme.has-dark-logo.json @@ -1,13 +1,11 @@ { - "//": "Metadata for humans", + "// METADATA FOR HUMANS": "", "format": "https://github.com/csstools/postcss-preset-env#importfrom", "name": "has-dark-logo", "environment-variables": { "// HEADER": "", - "--header-font-family": "Roboto, sans-serif", - "--header-accent-color": "#877453", "--header-text-color": "var(--global-color-primary--xx-dark)", "--header-bkgd-color": "var(--global-color-primary--x-light)", "--header-link-bkgd-color": "#D8D8D8", diff --git a/yarn.lock b/yarn.lock index 85332abc7..dc026c254 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1277,6 +1277,11 @@ mdn-data@2.0.4: resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz" integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA== +merge-lite@^1.0.2: + version "1.0.2" + resolved "https://registry.npmjs.org/merge-lite/-/merge-lite-1.0.2.tgz" + integrity sha512-28Q9aFRLzLCSp/2MLV49sbilBcCw7pIxq9YfOuX8+g/cMbPgYcAZgI0BLHnsb7ZRgvYOuaEGQPYJk8OWcGHk4A== + merge2@^1.3.0: version "1.4.1" resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz" From 538369a970cc796c0b864a5943833845261a544f Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Mon, 17 May 2021 11:41:51 -0500 Subject: [PATCH 010/106] GH-101: Navigation Bar (Logo Width, CMS Nav Align) - 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. --- .../css/src/_imports/components/c-logo.css | 3 +++ .../site_cms/css/src/_imports/trumps/s-header.css | 15 +++++++++++---- taccsite_custom | 2 +- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.css index 0b76049dd..994da211d 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-logo.css @@ -23,5 +23,8 @@ Styleguide Components.Logo /* Elements */ .c-logo__image { + /* To delegate height control to base/container */ height: 100%; + /* To prevent length wider than (but allow narrower than) base/container */ + max-width: 100%; } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css index 7d4c789f4..137c74a02 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css @@ -80,10 +80,17 @@ Styleguide Trumps.Scopes.Header /* Logo */ .s-header .c-logo { - /* To align position of first CMS nav link with Portal "Dashboard" header */ - /* NOTE: Each portal should set this value based on its image width */ - --offset: 10px; - margin-right: var(--offset); + /* To allow projects to set this value, but let Core implement it */ + --width: auto; + width: var(--width); + + /* To prevent zero-width element as it is loaded */ + /* To align position of first CMS nav link with Portal section headers */ + min-width: 190px; /* CAVEAT: Only works for logos narrow enough to fit */ + + /* To allow projects to set this value, but let Core implement it */ + --space-after-logo-before-nav: 0; + margin-right: var(--space-after-logo-before-nav); /* overwrites Bootstrap */ /* FAQ: In case image does not load and browser shows alt text */ color: env(--header-text-color); diff --git a/taccsite_custom b/taccsite_custom index 8a6429874..64a5d035a 160000 --- a/taccsite_custom +++ b/taccsite_custom @@ -1 +1 @@ -Subproject commit 8a642987401ed01b4e2bdfcb4b8d8ae3cbde351e +Subproject commit 64a5d035a88d81a5cc2265e207c1c113c02697d6 From f257c63b8039a42d8d43e5102f26f98a17f803e1 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Mon, 17 May 2021 12:01:01 -0500 Subject: [PATCH 011/106] GH-101: Navigation Bar (Remove Redundant Style) - Remove redundant color assignment for nav-link. --- .../static/site_cms/css/src/_imports/trumps/s-header.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css index 137c74a02..838cefc7d 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css @@ -131,8 +131,6 @@ Styleguide Trumps.Scopes.Header align-items: center; /* FAQ: If link text uses 2 lines, header grows taller, but it must not */ white-space: nowrap; - - color: env(--header-text-color); } .s-header .nav-link:hover, .s-header .nav-link:active, From 4692aaf6daffe2705c2fca17d3b1a9adf2e7b922 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Mon, 17 May 2021 14:12:39 -0500 Subject: [PATCH 012/106] GH-101: Navigation Bar (Dropdowns & Constants) - Add font weight constants. - Add border constants. - Style dropdowns and use new constants. --- conf/css/freeze_variables/.postcssrc.yml | 3 ++ .../css/src/_imports/settings/border.css | 10 +++-- .../css/src/_imports/settings/font.css | 10 +---- .../css/src/_imports/trumps/s-header.css | 37 +++++++++++++++++-- .../site_cms/css/src/_themes/constants.json | 15 +++++++- 5 files changed, 59 insertions(+), 16 deletions(-) diff --git a/conf/css/freeze_variables/.postcssrc.yml b/conf/css/freeze_variables/.postcssrc.yml index 7ad61f018..832c29c8f 100644 --- a/conf/css/freeze_variables/.postcssrc.yml +++ b/conf/css/freeze_variables/.postcssrc.yml @@ -2,6 +2,9 @@ plugins: postcss-import: path: - './taccsite_cms/static/site_cms/css/src' + postcss-env-function: + importFrom: + - './taccsite_cms/static/site_cms/css/src/_themes/export.js' postcss-css-variables: preserve: 'computed' preserveAtRulesOrder: true diff --git a/taccsite_cms/static/site_cms/css/src/_imports/settings/border.css b/taccsite_cms/static/site_cms/css/src/_imports/settings/border.css index c11cd836a..07bf41593 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/settings/border.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/settings/border.css @@ -7,13 +7,17 @@ /* Usage: `var(--global-border-width--normal)` */ /* SEE: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties */ +/* TODO: Replace use of `var(--global-border…)` with `env(--border…)` */ :root { - --global-border-width--normal: 1px; + --global-border-width--normal: env(--border-width--normal); --global-border--normal: var(--global-border-width--normal) solid var(--global-color-primary--normal); - --global-border-width--thick: 2px; + --global-border-width--thick: env(--border-width--thick); --global-border--thick: var(--global-border-width--thick) solid var(--global-color-primary--normal); - --global-border-width--x-thick: 3px; + --global-border-width--x-thick: env(--border-width--x-thick); --global-border--x-thick: var(--global-border-width--x-thick) solid var(--global-color-primary--normal); + + --global-border-width--xx-thick: env(--border-width--xx-thick); + --global-border--xx-thick: var(--global-border-width--xx-thick) solid var(--global-color-primary--normal); } diff --git a/taccsite_cms/static/site_cms/css/src/_imports/settings/font.css b/taccsite_cms/static/site_cms/css/src/_imports/settings/font.css index 0a5c43ff5..ac218b396 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/settings/font.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/settings/font.css @@ -55,14 +55,8 @@ Styleguide Settings.CustomProperties.Font /* Weight */ - /* SEE: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */ - - /* NOTE: Long names to be consistent (opinions welcome) */ - --global-font-weight--regular: 400; - --global-font-weight--medium: 500; - --global-font-weight--bold: 700; - - /* NOTE: Short names to increase adoption (opinions welcome) */ + /* TODO: Replace use of `var(--…)` with `env(--…)` for font weights */ + /* WARNING: Deprecated! Do NOT use. Use `env(--…)` instead for font weights */ --regular: 400; --medium: 500; --bold: 700; diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css index 838cefc7d..57a8c4098 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css @@ -28,7 +28,7 @@ Styleguide Trumps.Scopes.Header background-color: env(--header-bkgd-color); font-size: 12px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */ - font-weight: bold; + font-weight: env(--bold); font-family: env(--header-font-family); /* Copied from Portal (via `body`) */ @@ -143,8 +143,8 @@ Styleguide Trumps.Scopes.Header .s-header .nav-link:active, .s-header .nav-item.active .nav-link, .s-header .nav-item.dropdown.show .nav-link { - border-top: 4px solid transparent; - border-bottom: 4px solid env(--header-accent-color); + border-top: env(--border-width--xx-thick) solid transparent; + border-bottom: env(--border-width--xx-thick) solid env(--header-accent-color); } /* Overwrite Bootstrap */ .s-header.navbar-dark .navbar-nav .nav-link, @@ -200,9 +200,38 @@ Styleguide Trumps.Scopes.Header /* Dropdown Menus */ .dropdown-menu { - /* To overwrite Bootstrap's `1rem` */ + padding: 7px 0 0; + margin: unset; /* undo Bootstrap */ + + background-color: env(--header-link-bkgd-color); + border: env(--border-width--normal) solid env(--header-accent-color); + border-radius: unset; /* undo Bootstrap */ +} +/* FAQ: Selector specificty trumps Bootstrap, so no need for `:hover` (etc.) */ +.s-header .dropdown-item { + --horz-pad: 11px; + padding: 5px var(--horz-pad) 6px; + + color: env(--header-text-color); + border-left: env(--border-width--x-thick) solid transparent; + font-size: 12px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */ + font-weight: env(--medium); +} +.s-header .dropdown-item + .dropdown-item { + box-shadow: + 0px calc(-1 * (1px + var(--horz-pad))) 0px calc(-1 * var(--horz-pad)) + env(--header-bkgd-color); } +.s-header .dropdown-item.active, +.s-header .dropdown-item:active, +.s-header .dropdown-item:focus, +.s-header .dropdown-item:hover { + border-left-color: env(--header-accent-color); + background-color: env(--header-bkgd-color); + box-shadow: none; +} + diff --git a/taccsite_cms/static/site_cms/css/src/_themes/constants.json b/taccsite_cms/static/site_cms/css/src/_themes/constants.json index c09a83f02..dbc05458a 100644 --- a/taccsite_cms/static/site_cms/css/src/_themes/constants.json +++ b/taccsite_cms/static/site_cms/css/src/_themes/constants.json @@ -9,7 +9,20 @@ "--header-font-family": "Roboto, sans-serif", "--header-accent-color": "#877453", "--header-brandbar-height": "40px", - "--header-navbar-height": "55px" + "--header-navbar-height": "55px", + + "// BORDER": "", + "--border-width--normal": "1px", + "--border-width--thick": "2px", + "--border-width--x-thick": "3px", + "--border-width--xx-thick": "4px", + + "// FONT": "", + "// FONT WEIGHT": "A word-based shortcut for font weights", + "--light": 300, + "--regular": 400, + "--medium": 500, + "--bold": 700 } } From d6c59caa183b251bc192d78c3519fb32e0b54d7d Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Mon, 17 May 2021 15:44:54 -0500 Subject: [PATCH 013/106] GH-191: Add prewatch (same task as prebuild). --- package.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 981c156e6..ac3102f38 100644 --- a/package.json +++ b/package.json @@ -4,10 +4,12 @@ "license": "MIT", "description": "The core CMS codebase for all new and updated TACC CMS sites.", "scripts": { - "prebuild": "python3 taccsite_cms/settings_to_json.py", + "prebuild": "npm run build:settings", + "prewatch": "npm run build:settings", "build": "npm run build:css", "build:css": "node postcss.js", - "watch": "npm-watch" + "watch": "npm-watch", + "build:settings": "python3 taccsite_cms/settings_to_json.py" }, "// scripts": { "prebuild": "Export Django settings to JSON (for Node to use)", From 4865c2db0f3e2190e3048fa9c956e535da51ef2b Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Mon, 17 May 2021 16:42:18 -0500 Subject: [PATCH 014/106] GH-101: Navigation Bar (Fix Branding Bar Bug) Use correct global var not wrong env var for branding bar bkgd. --- .../static/site_cms/css/src/_imports/components/c-branding.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css index 31086829a..c1c47cada 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css @@ -33,7 +33,7 @@ Styleguide Components.Branding height: env(--header-brandbar-height); color: var(--global-color-primary--xx-light); - background-color: env(--header-bkgd-color); + background-color: var(--global-color-primary--xx-dark); border-bottom: 1px solid var(--global-color-primary--normal); } From 2ab97e8f5f1e204398fb8d9678661d20f9307630 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Mon, 17 May 2021 16:43:30 -0500 Subject: [PATCH 015/106] GH-101: Navigation Bar (Avoid Dropdown Bug) Scope dropdown styles to header so as to not effect any other dropdowns. --- .../static/site_cms/css/src/_imports/trumps/s-header.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css index 57a8c4098..e25732224 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css @@ -199,7 +199,7 @@ Styleguide Trumps.Scopes.Header /* Dropdown Menus */ -.dropdown-menu { +.s-header .dropdown-menu { padding: 7px 0 0; margin: unset; /* undo Bootstrap */ From 80fb36ce1b86157b007ee3c512ffc86bf8fb6c62 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Mon, 17 May 2021 18:30:51 -0500 Subject: [PATCH 016/106] GH-101: Navigation Bar (Fix `.s-header` Usage) 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. --- .../src/_imports/components/c-branding.css | 11 --- .../css/src/_imports/trumps/s-header.css | 84 ++++++++++++------- .../src/_imports/trumps/s-header.twig.html | 5 +- taccsite_cms/templates/header.html | 4 +- taccsite_cms/templates/header_branding.html | 2 +- 5 files changed, 60 insertions(+), 46 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css index c1c47cada..807a92597 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-branding.css @@ -25,17 +25,6 @@ Styleguide Components.Branding justify-content: center; align-items: center; } -.c-branding, -/* To force style on old markup before new markup dynamically replaces it */ -:--for-docs .branding-header, -:--for-portal .branding-header { - /* To prevent zero-height element as it is loaded */ - height: env(--header-brandbar-height); - - color: var(--global-color-primary--xx-light); - background-color: var(--global-color-primary--xx-dark); - border-bottom: 1px solid var(--global-color-primary--normal); -} /* A responsive column gap */ diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css index e25732224..3a76aab2a 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css @@ -11,6 +11,11 @@ Styles for elements within a header that has third-party code: - a subset of Bootstrap 3.3.7 (for CMS body content, can affect navigation) +Portal & Docs Selectors: + +- To select old markup by using subsite-specific selectors, some styles target Portal or Docs. This was necessary because markup changed in CMS during GH-101, but Portal and Docs markup was not updated. If Portal and Docs markup matches that of CMS, then these selectors need not be so specific for _this_ purpose. +- To overwrite Bootstrap by using extra-specific selectors, some styles target Portal or Docs. This was necessary because Bootstrap on both subsites load _after_ these styles (thus took precedence). If we load Bootstrap styles before CMS styles, then these selectors need not be so specific for _this_ purpose. + Markup: s-header.html.twig Styleguide Trumps.Scopes.Header @@ -18,13 +23,16 @@ Styleguide Trumps.Scopes.Header @import url("_imports/tools/selectors.css"); @import url("_imports/tools/x-arrow.css"); +/* RFE: Make Portal & Docs markup match CMS (see "Portal & Docs Selectors") */ +/* RFE: Load Bootstrap before CMS stylesheets (see "Portal & Docs Selectors") */ + -/* Container */ +/* Nav Bar */ -.s-header { +.s-header.navbar { background-color: env(--header-bkgd-color); font-size: 12px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */ @@ -35,14 +43,12 @@ Styleguide Trumps.Scopes.Header -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -/* To give cross-site header padding that respects Portal-only visual balance */ -.s-header, -/* To overwrite Docs' Bootstrap which is unexpectedly loaded after this */ -/* RFE: Load Docs Bootstrap before CMS CSS (test, revisit relevant hacks) */ -:--for-docs .s-header, -/* To overwrite Portal's Bootstrap which is mistakenly loaded after this */ -/* RFE: Load Portal Bootstrap before CMS CSS (test, revisit relevant hacks) */ -:--for-portal .s-header { + +/* To give cross-site padding that respects Portal-specific visual balance */ +.s-header.navbar, +/* To overwrite Bootstrap (see "Portal & Docs Selectors") */ +:--for-docs .s-header.navbar, +:--for-portal .s-header.navbar { /* To align logo (whole image not just visible pixels) with Portal sidebar */ /* FAQ: The calc() retains values from disparate styles in Portal */ /* FAQ: The calc() is calculated at build time, so we may be verbose */ @@ -51,14 +57,11 @@ Styleguide Trumps.Scopes.Header padding: 0 calc(16px + 20px); } -/* To stretch elements as tall as parent (`height: 100%` for flex row items) */ -.s-header, -/* To overwrite Docs' Bootstrap which is unexpectedly loaded after this */ -/* RFE: Load Docs Bootstrap before CMS CSS (test, revisit relevant hacks) */ -:--for-docs .s-header, -/* To overwrite Portal's Bootstrap which is mistakenly loaded after this */ -/* RFE: Load Portal Bootstrap before CMS CSS (test, revisit relevant hacks) */ -:--for-portal .s-header, +/* To stretch elements as tall as parent */ +.s-header.navbar, +/* To overwrite Bootstrap (see "Portal & Docs Selectors") */ +:--for-docs .s-header.navbar, +:--for-portal .s-header.navbar, /* To propogate styles through extra wrapper (of Bootstrap-driven mobile nav) */ .s-header .navbar-collapse { align-items: stretch; @@ -77,6 +80,27 @@ Styleguide Trumps.Scopes.Header + + +/* Branding */ + +.s-header.c-branding, +/* To apply style to old markup (see "Portal & Docs Selectors") */ +/* NOTE: The old markup is dynamically replaced by new markup from CMS */ +:--for-docs .branding-header, +:--for-portal .branding-header { + /* To prevent zero-height element as it is loaded */ + height: env(--header-brandbar-height); + + color: var(--global-color-primary--xx-light); + background-color: var(--global-color-primary--xx-dark); + border-bottom: 1px solid var(--global-color-primary--normal); +} + + + + + /* Logo */ .s-header .c-logo { @@ -95,7 +119,7 @@ Styleguide Trumps.Scopes.Header /* FAQ: In case image does not load and browser shows alt text */ color: env(--header-text-color); } -/* Overwrite Bootstrap */ +/* To overwrite bootstrap */ .s-header .c-logo.navbar-brand { padding-top: unset; padding-bottom: unset; @@ -146,21 +170,24 @@ Styleguide Trumps.Scopes.Header border-top: env(--border-width--xx-thick) solid transparent; border-bottom: env(--border-width--xx-thick) solid env(--header-accent-color); } -/* Overwrite Bootstrap */ -.s-header.navbar-dark .navbar-nav .nav-link, -.s-header.navbar-dark .navbar-nav .nav-link:focus, -.s-header.navbar-dark .navbar-nav .nav-link:hover { - color: env(--header-text-color); -} + +/* To overwrite Bootstrap */ .s-header .nav-link { padding-top: unset; padding-bottom: unset; } +/* FAQ: Comment out `.navbar-dark` to obviate "Portal & Docs Selectors" here */ +/* FAQ: On CMS, the `.navbar-dark` is a descendant of `.s-header` */ +.s-header/* .navbar-dark */ .nav-link, +.s-header/* .navbar-dark */ .nav-link:focus, +.s-header/* .navbar-dark */ .nav-link:hover { + color: env(--header-text-color) !important; +} +/* To set less space between nav links when screen is narrow */ @media (--wide-and-above) { .s-header .navbar-nav .nav-link, - /* To overwrite Portal's Bootstrap which is mistakenly loaded after this */ - /* RFE: Load Portal Bootstrap before CMS CSS (test, revisit relevant hacks) */ + /* To overwrite Bootstrap (see "Portal & Docs Selectors") */ :--for-portal .s-header .navbar-nav .nav-link { padding-right: 1.25em; /* intent is 15px padding for 12px font */ padding-left: 1.25em; /* intent is 15px padding for 12px font */ @@ -168,8 +195,7 @@ Styleguide Trumps.Scopes.Header } @media (--wide-and-below) { .s-header .navbar-nav .nav-link, - /* To overwrite Portal's Bootstrap which is mistakenly loaded after this */ - /* RFE: Load Portal Bootstrap before CMS CSS (test, revisit relevant hacks) */ + /* To overwrite Bootstrap (see "Portal & Docs Selectors") */ :--for-portal .s-header .navbar-nav .nav-link { padding-right: 0.5em; /* intent is just very narrow (dev design) */ padding-left: 0.5em; /* intent is just very narrow (dev design) */ diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.twig.html b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.twig.html index 4d3aef56a..214208ab9 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.twig.html +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.twig.html @@ -1,7 +1,6 @@ -