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".
TACC · May 13, 2021 · b2cec49 · b2cec49
1 parent 80ed3c0
commit b2cec49
Show file tree

Hide file tree

Showing 12 changed files with 235 additions and 119 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)"
 
   }
 }