From faab92b2dcdd5fb162ae7e9d5ee7cc1754684042 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Thu, 3 Jun 2021 16:03:48 -0500 Subject: [PATCH 1/2] GH-101: Search (Initial Commit) WARNING: Not tested on light theme, yet. - __Fix__: Remove "freeze variables". - __New__: Remove old, bad search styles. - __New__: Add new, good search styles. - _Minor_: Remove beginner comments about `position: relative`. - __New__: Add new utility for hiding elements. - __New__: Add new theme/env vars for search border and background. - __Fix__: Simplify search field markup. --- postcss.js | 28 +--- .../src/_imports/elements/tacc-search-bar.css | 58 +------ .../css/src/_imports/trumps/s-header.css | 144 ++++++++++++------ .../css/src/_imports/trumps/u-hide.css | 47 ++++++ .../css/src/_imports/trumps/u-hide.html | 20 +++ .../css/src/_themes/theme.default.json | 2 + .../css/src/_themes/theme.has-dark-logo.json | 2 + .../freeze_variables/site.tacc-search-bar.css | 21 --- .../site_cms/css/src/site.tacc-search-bar.css | 15 +- taccsite_cms/templates/nav_search.raw.html | 39 ++--- 10 files changed, 205 insertions(+), 171 deletions(-) create mode 100644 taccsite_cms/static/site_cms/css/src/_imports/trumps/u-hide.css create mode 100644 taccsite_cms/static/site_cms/css/src/_imports/trumps/u-hide.html delete mode 100644 taccsite_cms/static/site_cms/css/src/freeze_variables/site.tacc-search-bar.css diff --git a/postcss.js b/postcss.js index a47f81ff5..e5890d1ee 100644 --- a/postcss.js +++ b/postcss.js @@ -35,20 +35,12 @@ function parallelCallback(err, results) { // SEE: https://www.npmjs.com/package/postcss#js-api /** * Build styles for the Core CMS - * @param {boolean} [shouldFreezeVariables=false] - Whether to freeze values of custom properties */ -function buildStylesCore({shouldFreezeVariables = false} = {}) { +function buildStylesCore() { let command; - let sourceDir; - let configDir; - if (shouldFreezeVariables === true) { - sourceDir = 'freeze_variables/'; - configDir = 'conf/css/freeze_variables/'; - } else { - sourceDir = ''; - configDir = standardConfigDir; - } + const sourceDir = ''; + const configDir = standardConfigDir; // Quote globbed paths to prevent OS from parsing them // SEE: https://github.com/postcss/postcss-cli/issues/142#issuecomment-310681302 @@ -69,20 +61,12 @@ function buildStylesCustom() { exec(command, execCallback); } -// The confusing is worth explaining (and fixing if we know how) -console.warn('The commands are run in parallel so the output may be out of order.' + "\n"); +// To explain why output is not sequiential +console.warn('The output may be out of order because the commands are run in parallel.' + "\n"); // Build process for styles may be run in parallel because they are independent // SEE: https://stackoverflow.com/a/10776939/11817077 parallel([ - // Always build Core assets buildStylesCore, - - // Build custom assets, except for Core - () => { if (env.CUSTOM_ASSET_DIR !== 'core-cms') buildStylesCustom() }, - - // Temporarily build "frozen variables" from Core - // FAQ: This is an advanced solution to a problem that should not exist - () => { buildStylesCore({shouldFreezeVariables: true}) }, - // NOTE: Do NOT support freezing variables for custom projects + buildStylesCustom ], parallelCallback); diff --git a/taccsite_cms/static/site_cms/css/src/_imports/elements/tacc-search-bar.css b/taccsite_cms/static/site_cms/css/src/_imports/elements/tacc-search-bar.css index a45283dbe..9d4fbb97d 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/elements/tacc-search-bar.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/elements/tacc-search-bar.css @@ -1,67 +1,21 @@ /* Search Bar -Styles for search bar cloned from Portal codebase, but also relying on Bootstrap ([whose version usage is complicated][bootstrap-versions]): -- Bootstrap 4.0.0 (loaded as external file in CMS via `` in template) -- relevant delta (manually built) from Bootstrap 4.0.0 (CMS) to 4.3.1 (Portal) +A custom search bar originally designed for the header. -[bootstrap-versions]: https://confluence.tacc.utexas.edu/x/OAACBw - -Markup: s-search-bar.html +Markup: tacc-search-bar.html Styleguide Elements.TACC.SearchBar */ - - -/* FAQ: The `.s-search-bar` was to override Bootstrap class specificity */ - -/* tacc-search-bar.s-search-bar::part(form) { */ [part="form"] { - /* FAQ: Ensure search field font matches Portal */ - /* SEE: https://confluence.tacc.utexas.edu/x/cYAZCg */ - font-family: "Roboto"; - - /* Copied from `.container` from Portal */ - /* SEE: https://github.com/TACC/Frontera-Portal/blob/master/client/src/components/DataFiles/DataFilesSearchbar/DataFilesSearchbar.module.css */ - display: flex; - flex-direction: row; - align-items: center; - - /* To fill available space */ + /* To fill available space of `:host` */ width: 100%; -} - -/* FAQ: Added `#s-header` to trump `.workbench-content .btn-secondary` specificity because it should match (thus override); could have used merely `.s-header`, but CMS use of `@apply` brings in CSS pseudo-class styles, while Portal use of `composes` does not, so `:hover` styles have effect in CMS while they do not have effect in Portal, hence using `#s-header` to create a more specific selector */ -/* !!!: This causes the same bug it does in Portal; no `:hover` state */ -/* #s-header tacc-search-bar.s-search-bar::part(button) { */ -[part="button"] { - @extend .c-button--secondary; - - /* Copied from `.workbench-content .btn-secondary` from Portal `Workbench.scss` */ - background-color: #F4F4F4; - color: #484848; - border: 1px solid #AFAFAF; -} - -.input-group { - /* If link text uses 2 lines, header grows taller (but it must not do so) */ - flex-wrap: nowrap; -} - -/* tacc-search-bar.s-search-bar::part(button__icon) { */ -[part="button__icon"] { - @extend .c-button__icon--before; -} - -/* tacc-search-bar.s-search-bar::part(input) { */ -[part="input"] { - @extend .form-control; - @extend input.form-control; + height: 100%; } /* Show search bar after all relevant styles have loaded */ /* FAQ: Manage visibility of search bar to avoid FOUC */ -/* HACK: This should be done via a dynamically-added `-is-loaded` class */ -/* tacc-search-bar.s-search-bar::part(form) { */ +/* HACK: This should be done via dynamic `[data-status="loaded"]` */ +/* SEE: /.../templates/nav_search.raw.html */ :host { visibility: visible; height: auto; } 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 aef4ccd1b..4e8d8b960 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 @@ -397,8 +397,7 @@ Styleguide Trumps.Scopes.Header 2. If menu is open, and user clicks anywhere outside the navbar, then menu will remain open. But a dropdown anywhere that was open would be closed after the click. */ .s-header .navbar-collapse { - /* This `position` expects Bootstrap's `.navbar { position: relative }` */ - position: absolute; + position: absolute; /* expects Bootstrap `.navbar { position: relative }` */ top: 100%; left: 0; @@ -890,69 +889,124 @@ Styleguide Trumps.Scopes.Header -/* Search: Spacing */ +/* Search: Variables */ -/* Create space between search bar & portal nav ONLY IF both elements exist */ -.s-header.is-on-portal .s-search-bar, -/* To apply style to old markup (see "Portal & Docs Selectors") */ -/* TODO: Hardcode `is-on-portal` in Portal & Docs markup */ -:--for-docs .s-header .s-search-bar, -:--for-portal .s-header .s-search-bar { - margin-right: var(--space-after-search-before-nav, 0); -} -/* Create space before search bar EVEN IF only search bar exists */ .s-header .s-search-bar { - margin-left: var(--space-before-search, 0); + --button-horz-pad: 10px; + --input-horz-pad: 0.125em; } -/* To apply style to old markup (see "Portal & Docs Selectors") */ -:--for-docs .s-header .s-search-bar, -:--for-portal .s-header .s-search-bar { - margin-left: var(--space-before-search, 0) !important; -} - - - -/* Search: Desktop */ - @media (--nav-expanded) { - .s-header .s-search-bar { + --input-height: 26px; + /* WARNING: Do not use `rem` until `html { 62.5%; }` */ + --button-font-size: 18px; + --input-font-size: 14px; + /* To match design */ --space-after-search-before-nav: 12px; /* To insert flexible space between search bar and CMS nav */ --space-before-search: auto; } +} +@media (--nav-compressed) { + .s-header .s-search-bar { + /* NOTE: Deviates from design cuz "Mobile Nav Top Row" height deviates */ + --input-height: 38px; + /* WARNING: Do not use `rem` until `html { 62.5%; }` */ + --button-font-size: 24px; + --input-font-size: 18px; - .s-header .s-search-bar, - .s-header .s-search-bar::part(input), - .s-header .s-search-bar::part(button) { - font-size: 14px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */ + /* SEE: "Mobile Nav Top Row" */ + /* --space-after-search-before-nav: … */ + + /* To line up navbar left-hand content with logo */ + --space-before-search: env(--header-navbar-left-pad); } +} + + + +/* Search: Elements */ +.s-header .s-search-bar { + /* To remove all whitespace */ + /* NOTE: A `font-size: 0` is not necessary if tag whitespace is removed */ + font-size: 0; } +.s-header .s-search-bar::part(form) { + display: flex; + align-items: center; + position: relative; +} +.s-header .s-search-bar::part(button) { + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); -/* Search: Mobile */ + box-sizing: content-box; + height: var(--input-height); + align-items: center; /* works if has flex layout (does if class is `.icon`) */ -@media (--nav-compressed) { + margin: 0; + padding: 0 var(--button-horz-pad); - /* To add constant space between CMS nav and search bar */ - .s-header .s-search-bar { - /* SEE: "Mobile Nav Top Row" */ - /* --space-after-search-before-nav: … */ + background-color: transparent; + border: none; - /* To line up navbar left-hand content with logo */ - --space-before-search: env(--header-navbar-left-pad); - } + color: env(--header-text-color); + font-size: var(--button-font-size); +} +.s-header .s-search-bar::part(input) { + display: block; + width: 100%; + height: var(--input-height); + + margin: 0; + padding-top: 0; + padding-bottom: 0; + /* To indent text by the width of embedded button plus actual padding */ + /* FAQ: Using `text-indent` has text overflow as user enters beyond width */ + /* HELP: Using `text-indent` is prefered (simpler)... how to do sans bug? */ + padding-left: calc( + var(--button-horz-pad) + + var(--button-font-size) + + var(--button-horz-pad) + + var(--input-horz-pad) + ); + padding-right: var(--input-horz-pad); + + background-color: env(--header-search-bkgd-color); + border: env(--border-width--normal) solid env(--header-search-brdr-color); + border-radius: 5px; - .s-header .s-search-bar, - .s-header .s-search-bar::part(input), - .s-header .s-search-bar::part(button) { - font-size: 18px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */ - } + color: env(--header-text-color); + font-size: var(--input-font-size); +} + + + +/* Search: Spacing (Margin) */ +/* Create space between search bar & portal nav ONLY IF both elements exist */ +.s-header.is-on-portal .s-search-bar, +/* To apply style to old markup (see "Portal & Docs Selectors") */ +/* TODO: Hardcode `is-on-portal` in Portal & Docs markup */ +:--for-docs .s-header .s-search-bar, +:--for-portal .s-header .s-search-bar { + margin-right: var(--space-after-search-before-nav, 0); +} +/* Create space before search bar EVEN IF only search bar exists */ +.s-header .s-search-bar { + margin-left: var(--space-before-search, 0); +} +/* To apply style to old markup (see "Portal & Docs Selectors") */ +:--for-docs .s-header .s-search-bar, +:--for-portal .s-header .s-search-bar { + margin-left: var(--space-before-search, 0) !important; } @@ -977,7 +1031,7 @@ Styleguide Trumps.Scopes.Header .s-header .s-search-bar { /* To make space for portal nav in which to shove portal nav */ --space-after-search-before-nav: calc( - var(--portal-navlink-max-width) + (env(--border-width--normal) * 2) + var(--portal-navlink-max-width) + 5px ); } .s-header .s-portal-nav { @@ -999,9 +1053,7 @@ Styleguide Trumps.Scopes.Header /* To make a fake background */ /* HACK: Create background with a pseudo element that matches "row" height */ - .s-header .s-portal-nav { - position: relative; /* for `position: absolute` child/pseudo element */ - } + .s-header .s-portal-nav { position: relative; } .s-header .s-portal-nav::before { content: ''; position: absolute; diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/u-hide.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/u-hide.css new file mode 100644 index 000000000..47405d516 --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/u-hide.css @@ -0,0 +1,47 @@ +/* +Hide + +Different ways and reasons to hide elements. + +Resources: +- https://kittygiraudel.com/2021/02/17/hiding-content-responsibly/ +- https://codepen.io/vincent-valentin/full/JjGmxzV + +Markup: u-hide.css + +Styleguide Core.Trumps.Utilities.Hide +*/ + +/* Hides content for all users, even screen readers */ +.u-hide--for-all { + display: none; +} +.u-hide--for-all-but-has-layout { + visibility: hidden; +} + +/* Replace text with image; meets WCAG 2.0 success criteria */ +/* SEE: https://www.w3.org/TR/WCAG20-TECHS/C30.html */ +.u-hide--text-image-replacement { + /* background-image: url('…'); */ +} +.u-hide--text-image-replacement .u-hide__text { + position: absolute; + left: -9999em; +} + +/* Hides content for visual users, retain hidden text for screen readers */ +/* SEE: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ */ +.u-hide--visually:not(:focus):not(:active) { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; + + /* Added by TACC based on other examples */ + border: none; + padding: 0; +} diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/u-hide.html b/taccsite_cms/static/site_cms/css/src/_imports/trumps/u-hide.html new file mode 100644 index 000000000..d33a81a2d --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/trumps/u-hide.html @@ -0,0 +1,20 @@ +
+
+

Hide For All Users

+
Element A
+
Element B (Hidden For All)
+
Element C (Hidden For All) (Has Layout)
+
+
+

Hide Text To Replace With Image

+
+ Text Element +
+
+
+

Hide Visually

+
Element A
+
Element B (Hidden)
+ +
+
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 dd6213d82..4eadfea05 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 @@ -10,6 +10,8 @@ "--header-bkgd-color": "var(--global-color-primary--xx-dark)", "// --header-link-bkgd-color": "unique, not registered in global colors", "--header-link-bkgd-color": "#313131", + "--header-search-brdr-color": "var(--global-color-primary--dark)", + "--header-search-bkgd-color": "#313131", "--header-portal-nav-bkgd-color": "var(--global-color-primary--x-dark)" } 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 a58bcede0..03cffe7d9 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 @@ -10,6 +10,8 @@ "--header-bkgd-color": "var(--global-color-primary--x-light)", "// --header-link-bkgd-color": "registered in global vars as an alt. color", "--header-link-bkgd-color": "#D8D8D8", + "--header-search-brdr-color": "#D8D8D8", + "--header-search-bkgd-color": "var(--global-color-primary--x-light)", "--header-portal-nav-bkgd-color": "var(--global-color-primary--light)" } diff --git a/taccsite_cms/static/site_cms/css/src/freeze_variables/site.tacc-search-bar.css b/taccsite_cms/static/site_cms/css/src/freeze_variables/site.tacc-search-bar.css deleted file mode 100644 index b174cfa50..000000000 --- a/taccsite_cms/static/site_cms/css/src/freeze_variables/site.tacc-search-bar.css +++ /dev/null @@ -1,21 +0,0 @@ -/* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */ - -/* NOTE: This file exists so can use CSS vars from Portal */ - -/* TODO: Find a better solution */ -/* PORT: Migrate `:root` vars into `:host` so custom element can access them */ -/* FAQ: Styles within a custom element can not access the `:root` */ - -/* SETTINGS */ -/* Shared with Portal */ -@import url("_imports/settings/color.css"); -@import url("_imports/settings/border.css"); - -[part="button"] { - --global-color-primary--x-dark: var(--global-color-primary--x-dark); - --global-color-primary--normal: var(--global-color-primary--normal); -} - -[part="input"] { - --global-border--normal: var(--global-border--normal); -} diff --git a/taccsite_cms/static/site_cms/css/src/site.tacc-search-bar.css b/taccsite_cms/static/site_cms/css/src/site.tacc-search-bar.css index 60c7d09a7..feaf7fb59 100644 --- a/taccsite_cms/static/site_cms/css/src/site.tacc-search-bar.css +++ b/taccsite_cms/static/site_cms/css/src/site.tacc-search-bar.css @@ -5,21 +5,14 @@ /* Organize via ITCSS */ /* SEE: https://confluence.tacc.utexas.edu/x/IAA9Cw */ -/* SETTINGS */ +/* ELEMENTS */ -/* Shared with Portal */ -@import url("_imports/settings/border.css"); -@import url("_imports/settings/color.css"); - -/* COMPONENTS */ - -/* Shared with Portal */ -@import url("_imports/components/bootstrap.form.css"); -@import url("_imports/components/c-button.css"); +/* Unique to CMS */ +@import url("_imports/elements/tacc-search-bar.css"); /* TRUMPS */ /* Shared with Portal */ @import url("_imports/trumps/icon.css"); /* Unique to CMS */ -@import url("_imports/elements/tacc-search-bar.css"); +@import url("_imports/trumps/u-hide.css"); diff --git a/taccsite_cms/templates/nav_search.raw.html b/taccsite_cms/templates/nav_search.raw.html index 20fb42548..4ca437d2e 100644 --- a/taccsite_cms/templates/nav_search.raw.html +++ b/taccsite_cms/templates/nav_search.raw.html @@ -5,28 +5,29 @@ - + - - - -{# NOTE: Copied from Portal DataFiles search bar (rendered markup, not raw) #} -{# SEE: https://github.com/TACC/Frontera-Portal/blob/master/client/src/components/DataFiles/DataFilesSearchbar/DataFilesSearchbar.js #}
-
-
- -
- - -
+ + + + + +
From 4b0fbe85b489c000b1c2e5fb42017eea9501ef9f Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Thu, 3 Jun 2021 23:21:16 -0500 Subject: [PATCH 2/2] GH-101: Search (Frontera Cleanup) Remove Frontera styles that are no longer necessary. --- taccsite_custom | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/taccsite_custom b/taccsite_custom index 7f164a4c0..40627ba86 160000 --- a/taccsite_custom +++ b/taccsite_custom @@ -1 +1 @@ -Subproject commit 7f164a4c0cd51f3f7da0bf9c334fbfc04e294cc3 +Subproject commit 40627ba869949281cc5cf23180038ad2654f9a2f