GH-101: Navigation Bar (Responsive Nav Item Width)

- The responsive space between nav items now considers portal elements.
- Whether header is loaded on portal is noted by presence of a class.

taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css

@@ -194,24 +194,55 @@ Styleguide Trumps.Scopes.Header
   color: env(--header-text-color) !important;
 }
 
+
+
+/* Responsive Design */
+
+.s-header .navbar-nav .nav-link,
+/* To overwrite Bootstrap (see "Portal & Docs Selectors") */
+:--for-portal .s-header .navbar-nav .nav-link {
+  padding-right: var(--space-between-horz, 0);
+  padding-left: var(--space-between-horz, 0);
+}
+
 /* To set less space between nav links when screen is narrow */
+/* " (sans Portal) */
+@media (--medium-and-above) {
+  /* To have 15px of space for 12px font */
+  .s-header:not(.is-on-portal) .nav-link { --space-between-horz: 1.25em; }
+}
+@media (--medium-and-below) {
+  /* To have "narrower" space (designed by dev) */
+  .s-header:not(.is-on-portal) .nav-link { --space-between-horz: 0.5em; }
+}
+/* " (with Portal) */
 @media (--wide-and-above) {
-  .s-header .navbar-nav .nav-link,
-  /* 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 */
-  }
+  /* To have 15px of space for 12px font */
+  .s-header.is-on-portal .nav-link,
+  /* To apply style to old markup (see "Portal & Docs Selectors") */
+  /* TODO: Hardcode `is-on-portal` in Portal & Docs markup */
+  :--for-docs .s-header .nav-link,
+  :--for-portal .s-header .nav-link { --space-between-horz: 1.25em; }
 }
 @media (--wide-and-below) {
-  .s-header .navbar-nav .nav-link,
-  /* 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) */
-  }
+  /* To have "narrower" space (designed by dev) */
+  .s-header.is-on-portal .nav-link,
+  /* To apply style to old markup (see "Portal & Docs Selectors") */
+  /* TODO: Hardcode `is-on-portal` in Portal & Docs markup */
+  :--for-docs .s-header .nav-link,
+  :--for-portal .s-header .nav-link { --space-between-horz: 0.5em; }
 }
 
+
+
+
+
+/* Dropdowns */
+
+
+
+/* Toggle */
+
 .s-header .dropdown-toggle::after {
   @extend %x-arrow;
 
@@ -231,12 +262,6 @@ Styleguide Trumps.Scopes.Header
 
 
 
-
-
-/* Dropdowns */
-
-
-
 /* Menu */
 
 .s-header .dropdown-menu {

taccsite_cms/templates/header.html

@@ -6,7 +6,7 @@
 {% include "header_branding.html" %}
 
 <!-- Navigation Bar -->
-<nav id="header-navbar" class="s-header  navbar {% if settings.PORTAL %}navbar-expand-xl{% else %}navbar-expand-lg{% endif %} navbar-dark">
+<nav id="header-navbar" class="s-header  navbar navbar-dark {% if settings.PORTAL %}navbar-expand-lg  is-on-portal{% else %}navbar-expand-md{% endif %}">
   <!-- Portal Logo -->
   {% include "header_logo.html" %}