From ea43ec9b889b5afcb12bb8cd0714966e740aea1c Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Fri, 14 May 2021 18:07:36 -0500 Subject: [PATCH] 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"