From 315ac1d3d593aa8eb4b1d30697e8910c78deea53 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 17 May 2021 22:14:44 -0500
Subject: [PATCH] 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.
---
 .../css/src/_imports/trumps/s-header.css      | 61 +++++++++++++------
 taccsite_cms/templates/header.html            |  2 +-
 2 files changed, 44 insertions(+), 19 deletions(-)

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 7913764f8..7d2e8e41a 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
@@ -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 {
diff --git a/taccsite_cms/templates/header.html b/taccsite_cms/templates/header.html
index 8b9d4422b..abbb253af 100644
--- a/taccsite_cms/templates/header.html
+++ b/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" %}