GH-101: Navigation Bar (Fix & Doc Height Bugs)

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);

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

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/… */

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,13 +154,17 @@ 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 */
   }
 }
 @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) */