GH-101/FP-1458: Header Redesign #222 - Mobile Nav Layout 2

TODO.md

@@ -0,0 +1,21 @@
+# GH-101 Header Redesign
+
+## Known Issues
+
+1. On CMS & Docs, there is a large gap in the navigation bar.
+2. On CMS, mobile navbar opens and closes very slowly.
+3. The portal login link is a bit too wide.
+4. The code is often difficult to follow.
+
+## New Issues
+
+- remove down arrow on mobile toggle
+- if close is issue, allow click on bottom no link area of lsit to close menu
+- remove click on portal nav toggle (for consistency with cms/search nav)
+- turn off scrolling when mobile menu is open
+- docs “Next” button is too high a z-index
+- rollover on all, do not let dropdown be clickable to return
+
+## Production Bug
+
+- Docs mobile nav not working… fix may be delayed, pending WMA CEPv2 chat

taccsite_cms/static/site_cms/css/src/_imports/components/bootstrap.navbar.css

@@ -0,0 +1,17 @@
+/*
+Navbar (Bootstrap)
+
+Add to Bootstrap styles. See:
+
+- [Bootstrap Grid](https://getbootstrap.com/docs/4.0/components/navbar/)
+
+Styleguide Components.Bootstrap.Navbar
+*/
+
+/* To support collapsing navbar horizontally */
+/* SEE: https://stackoverflow.com/a/50064701/11817077 */
+.collapsing.width {
+  transition-property: width, visibility;
+  width: 0;
+  height: auto;
+}

taccsite_cms/static/site_cms/css/src/_imports/trumps/for-portal.header.css

@@ -7,31 +7,44 @@ Styleguide Trumps.ForOtherSites.Portal
 */
 @import url("_imports/tools/selectors.css");
 
+
+
+/* Selectors */
+
+/* HACK: Relying on definition from `s-header.css` */
+/* @custom-selector :--portal-button */
+
+
+
 /* Ammend `s-header.css` (for Header because of Body) */
 
 @media (--nav-compressed) {
 
-  /* To position navbar+button based on screen width instead of parent width */
-  /* FAQ: Portal body min-width places a static button outside narrow screen */
+  /* To position navbar menus/buttons based on window width not parent width */
+  /* FAQ: Portal at body min. width places menu buttons outside narrow screen */
+  /* NOTE: If Portal had no horz. body scroll, then we would not need this */
   :--for-portal .s-header :--navbar-toggle {
     position: absolute; /* assumes Bootstrap `.navbar { position: relative }` */
     width: env(--header-navbar-toggle-width);
     left: calc(
       100vw
-      - env(--header-navbar-mobile-right-pad)
       - env(--header-navbar-toggle-width)
-    ); /* full screen width – distance from right of screen – its own width */
-
-    /* To overwrite `s-header.css` */
-    margin-right: auto;
+      - env(--header-navbar-toggle-width--portal-user)
+    ); /* FAQ: = window width – width of all toggles */
+  }
+  :--for-portal .s-header .s-portal-nav {
+    position: absolute; /* assumes Bootstrap `.navbar { position: relative }` */
+    width: env(--header-navbar-toggle-width--portal-user); /* !!!: Makes "Log In" link too wide */
+    left: calc(
+      100vw
+      - env(--header-navbar-toggle-width--portal-user)
+    ); /* FAQ: = window width – its own width (not others, cuz it's the last) */
   }
-  :--for-portal .s-header .navbar-collapse {
-    width: calc(
-      100vw - env(--header-navbar-mobile-right-pad)
-    );
 
-    /* To overwrite `s-header.css` */
-    right: auto;
+  /* To prevent negligible width change from browser dynamic calculation */
+  /* CAVEAT: Only Portal may use this cuz only its markup knows login state */
+  :--for-portal .s-header.is-portal-user :--portal-button {
+    width: env(--header-navbar-toggle-width--portal-user);
   }
 
 }