GH-101: Portal & Docs Narrow Screen Header Fixes

TACC · Jun 11, 2021 · 59a97d3 · 59a97d3
1 parent f3aab4c
commit 59a97d3
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 1 deletion.
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
@@ -50,6 +50,11 @@ Styleguide Components.Branding
 /* Elements */
 
 .c-branding__link {
+  /* To center image (in case other styles shrink the image) */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   /* FAQ: Percentage-based math adapts to container height */
   height: var(--height, 90%);
 }

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
@@ -30,7 +30,7 @@ body {
 
 body {
   /* To avoid negative whitespace at right on horz scroll on tiny screen */
-  min-width: 320px; /* developer-decided value */
+  min-width: env(--body-min-width);
 
   font-family: var(--global-font-family);
 

diff --git a/taccsite_cms/static/site_cms/css/src/_imports/tools/media-queries.css b/taccsite_cms/static/site_cms/css/src/_imports/tools/media-queries.css
@@ -19,6 +19,10 @@ Styleguide Tools.CustomMediaQueries.Breakpoints
 
 /* Standard Breakpoints (based on Bootstrap) */
 
+@custom-media --xx-narrow-and-below (width < 320px);
+@custom-media --xx-narrow-and-above (width >= 320px);
+@custom-media --xx-narrow-to-narrow (320px <= width < 576px);
+
 @custom-media --x-narrow-and-below (width < 576px);
 @custom-media --x-narrow-and-above (width >= 576px);
 @custom-media --x-narrow-to-narrow (576px <= width < 768px);

diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-docs.header.css
@@ -21,6 +21,27 @@ Styleguide Trumps.ForOtherSites.Docs
 
 
 
+/* Ammend `s-header.css` (for Header because of Body) */
+
+@media (--xx-narrow-and-below) {
+
+  /* To position navbar+button based on screen width instead of parent width */
+  /* FAQ: Portal body min-width places a static button outside narrow screen */
+  :--for-docs .s-header :--navbar-button {
+    flex-grow: 1;
+
+    /* To overwrite `s-header.css` */
+    margin-right: 0;
+  }
+  :--for-docs .s-header .navbar-collapse {
+    /* To overwrite `s-header.css` */
+    right: 0;
+  }
+
+}
+
+
+
 /* Initialize Sidebar Position (for Dependency on Header Height) */
 
 /* To position Docs' sidebar nav at expected initial vertical location ASAP */

diff --git a/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-portal.header.css b/taccsite_cms/static/site_cms/css/src/_imports/trumps/for-portal.header.css
@@ -0,0 +1,37 @@
+/*
+Portal
+
+The [Core Portal](https://github.com/TACC/Core-Portal).
+
+Styleguide Trumps.ForOtherSites.Portal
+*/
+@import url("_imports/tools/selectors.css");
+
+/* 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 */
+  :--for-portal .s-header :--navbar-button {
+    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;
+  }
+  :--for-portal .s-header .navbar-collapse {
+    width: calc(
+      100vw - env(--header-navbar-mobile-right-pad)
+    );
+
+    /* To overwrite `s-header.css` */
+    right: auto;
+  }
+
+}
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
@@ -101,6 +101,14 @@ Styleguide Trumps.Scopes.Header
   border-bottom: 1px solid var(--global-color-primary--xx-light);
 }
 
+/* To avoid squished branding on super narrow screens */
+@media (--xx-narrow-and-below) {
+  .s-header .c-branding__image {
+    /* To allow image to shrink so spacing occurs in narrow box */
+    max-width: 80%;
+  }
+}
+
 
 
 

diff --git a/taccsite_cms/static/site_cms/css/src/_themes/constants.json b/taccsite_cms/static/site_cms/css/src/_themes/constants.json
@@ -11,6 +11,10 @@
     "--portal-navlink-normal-max-width": "206px",
     "--portal-navlink-mobile-max-width": "112px",
 
+    "// BODY": "",
+    "// --body-min-width": "developer-decided value",
+    "--body-min-width": "320px",
+
     "// HEADER": "",
     "--header-font-family": "Roboto, sans-serif",
     "--header-accent-color": "#877453",