Merge branch 'main' into mh-topic-page-layouts

GSA · Feb 12, 2025 · 2679f15 · 2679f15
2 parents a6f49a1 + 2bd25e6
commit 2679f15
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 55 deletions.
diff --git a/content/news/2020/06/2020-06-30-bringing-our-humanity-work-5-ingredients.md b/content/news/2020/06/2020-06-30-bringing-our-humanity-work-5-ingredients.md
@@ -99,6 +99,7 @@ This month, we’re focusing on large group meetings: divisional Town Halls or o
 <p>We also encourage gratitude and reflection. Kudos are another staple of our meetings: we set aside a timeblock for teammates to thank each other, in their own words. The moderator can gather names ahead of time and call on each person to unmute. They can also read off kudos for anyone who can’t attend or would prefer not to unmute.</p>
 
 </li>
+
 </ol>
 
 We hope you’ll stir together our five ingredients and create the dish that best serves your audience. Stay tuned for the next piece, focused on small team meetings.
diff --git a/themes/digital.gov/layouts/guides/single.html b/themes/digital.gov/layouts/guides/single.html
@@ -8,7 +8,7 @@
         {{- $guideData = index $.Site.Data.guidenav (.Params.guide) -}}
       {{ end }}
       {{- if $guideData.showInPageNav -}}
-        <div class="dg-guide__container">
+        <div class="dg-guide__container grid-container grid-container-desktop">
           <aside class="dg-guide__nav">
             {{- partial "core/guides/guide-sidenav.html" . -}}
           </aside>

diff --git a/themes/digital.gov/layouts/partials/core/guides/guide-menu-bar.html b/themes/digital.gov/layouts/partials/core/guides/guide-menu-bar.html
@@ -15,39 +15,39 @@
 
 
 <div class="dg-guide__menu-bar">
-  <div class="dg-guide__menu-bar-image-container" hidden>
-    <a href="{{- .Site.BaseURL -}}" title="{{- .Site.Title }} Home">
-      <picture class="dg-guide__menu-bar-image">
-        <source
-          srcset="{{- "img/digitalgov-logo.svg" | relURL -}}"
-          media="(min-width: 480px)"
-        />
-        <img
-          src="{{- "img/digit-100.svg" | relURL -}}"
-          alt="Digital Gov Logo"
-        />
-      </picture>
-    </a>
-    {{- if $glossary -}}
-      <button title="Show glossary" class="dg-glossary__toggle">
-        <svg
-          class="dg-glossary__toggle-icon"
-          width="100%"
-          height="100%"
-          viewBox="0 0 21 21"
-          aria-hidden="true"
-          focusable="false"
-        >
-          <path
-            d="M13.9583 2.99612C13.9583 2.25376 13.5274 1.631 12.9074 1.25803C12.2875 0.885127 11.4706 0.755653 10.6759 0.999207L7.41667 1.99802L4.15746 0.999208C3.36272 0.755654 2.54584 0.885127 1.92596 1.25803C1.30597 1.631 0.875 2.25376 0.875 2.99612V11.6299C0.875 12.5372 1.54014 13.3298 2.50921 13.6268L7.41667 15.1307L12.3241 13.6268C13.2932 13.3298 13.9583 12.5372 13.9583 11.6299V2.99612ZM11.1429 2.17693C11.4882 2.07112 11.8416 2.12807 12.107 2.28774C12.3723 2.44735 12.5417 2.7033 12.5417 2.99612V11.6299C12.5417 11.9855 12.2789 12.3198 11.8571 12.4491L8.125 13.5928V3.10179L11.1429 2.17693ZM2.29167 2.99612C2.29167 2.7033 2.46099 2.44735 2.7263 2.28774C2.99172 2.12808 3.34516 2.07112 3.69046 2.17694L6.70833 3.10179V13.5928L2.97621 12.4491C2.55441 12.3198 2.29167 11.9855 2.29167 11.6299V2.99612Z"
+  <div
+    class="dg-guide__menu-bar-container grid-container grid-container-desktop"
+  >
+    <div class="dg-guide__menu-bar-image-container" hidden>
+      <a href="{{- .Site.BaseURL -}}" title="{{- .Site.Title }} Home">
+        <picture class="dg-guide__menu-bar-image">
+          <img
+            src="{{- "img/digit-100.svg" | relURL -}}"
+            alt="Digital Gov Logo"
           />
-        </svg>
-      </button>
-    {{- end -}}
+        </picture>
+      </a>
+      {{- if $glossary -}}
+        <button title="Show glossary" class="dg-glossary__toggle">
+          <svg
+            class="dg-glossary__toggle-icon"
+            width="100%"
+            height="100%"
+            viewBox="0 0 21 21"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path
+              d="M13.9583 2.99612C13.9583 2.25376 13.5274 1.631 12.9074 1.25803C12.2875 0.885127 11.4706 0.755653 10.6759 0.999207L7.41667 1.99802L4.15746 0.999208C3.36272 0.755654 2.54584 0.885127 1.92596 1.25803C1.30597 1.631 0.875 2.25376 0.875 2.99612V11.6299C0.875 12.5372 1.54014 13.3298 2.50921 13.6268L7.41667 15.1307L12.3241 13.6268C13.2932 13.3298 13.9583 12.5372 13.9583 11.6299V2.99612ZM11.1429 2.17693C11.4882 2.07112 11.8416 2.12807 12.107 2.28774C12.3723 2.44735 12.5417 2.7033 12.5417 2.99612V11.6299C12.5417 11.9855 12.2789 12.3198 11.8571 12.4491L8.125 13.5928V3.10179L11.1429 2.17693ZM2.29167 2.99612C2.29167 2.7033 2.46099 2.44735 2.7263 2.28774C2.99172 2.12808 3.34516 2.07112 3.69046 2.17694L6.70833 3.10179V13.5928L2.97621 12.4491C2.55441 12.3198 2.29167 11.9855 2.29167 11.6299V2.99612Z"
+            />
+          </svg>
+        </button>
+      {{- end -}}
+    </div>
+    <nav class="dg-guide__menu-bar-links" aria-label="Secondary menu bar">
+      {{ partial "core/guides/guide-menu-links.html" (dict "guideData" $guideData "currentPage" $currentPage "pageScope" .) }}
+    </nav>
   </div>
-  <nav class="dg-guide__menu-bar-links" aria-label="Secondary menu bar">
-    {{ partial "core/guides/guide-menu-links.html" (dict "guideData" $guideData "currentPage" $currentPage "pageScope" .) }}
-  </nav>
 </div>
 
 <div class="usa-accordion guide-mobile-menu">

diff --git a/themes/digital.gov/src/js/guide-menu-bar.js b/themes/digital.gov/src/js/guide-menu-bar.js
@@ -1,15 +1,20 @@
 // Uses manual breakpoints because USWDS breakpoints are not accessible within JS
-const deviceBreakpoint = 480;
-const menuBarScrollOffsetMobile = 150;
-const menuBarScrollOffsetFull = 320;
-const menuBarScrollOffsetDefault = 30;
+const menuBarScrollOffsetDefault = 600;
 let menuBarLinks = null;
 let menuBarImage = null;
+let menuBarContainer = null;
+let guideContent = null;
+let guideContainer = null;
 
+const guideSideNav = document.querySelector(".dg-guide__nav");
 const menuBar = document.querySelector(".dg-guide__menu-bar");
+
 if (menuBar) {
   menuBarLinks = menuBar.querySelector(".dg-guide__menu-bar-links");
   menuBarImage = menuBar.querySelector(".dg-guide__menu-bar-image-container");
+  menuBarContainer = menuBar.querySelector(".dg-guide__menu-bar-container");
+  guideContent = document.querySelector(".dg-guide__content");
+  guideContainer = document.querySelector(".dg-guide__container");
 }
 
 // Scroll the guide menu bar so that the currently selected item is in view
@@ -19,25 +24,60 @@ function scrollMenuBar(offset) {
   menuBarLinks.scrollLeft = currentItem.offsetLeft - offset;
 }
 
+/**
+ * Dynamically adjust the padding on the menu bar links to keep
+ * in alignment with dg-guide__content and HCD guides dg-guide__container
+ * */
+function adjustMenuPadding() {
+  let container = null;
+  if (guideSideNav) {
+    container = guideContainer;
+  } else {
+    container = guideContent;
+  }
+
+  const containerStyles = window.getComputedStyle(container);
+  const containerMarginLeft = parseFloat(containerStyles.marginLeft);
+  const containerPaddingLeft = parseFloat(containerStyles.paddingLeft);
+
+  // Get the width of the sibling element
+  const menuBarImageStyles = window.getComputedStyle(menuBarImage);
+  const menuBarMarginLeft = parseFloat(menuBarImageStyles.marginLeft);
+  const menuBarMarginRight = parseFloat(menuBarImageStyles.marginRight);
+
+  const menuBarImageOffsetWidth = menuBarImage.offsetWidth;
+  const menuBarImageWidth =
+    menuBarMarginLeft + menuBarMarginRight + menuBarImageOffsetWidth;
+  const containerMargin = containerMarginLeft + containerPaddingLeft;
+
+  // Calculate the new padding-left for the menu
+  const newPaddingLeft = containerMargin - menuBarImageWidth;
+  menuBarLinks.style.paddingLeft = `${newPaddingLeft}px`;
+}
+
 // Handler for intersection events between the menu bar and the window
 function intersection(e) {
   // Check if menu bar intersected the top of the page
   if (!e.isIntersecting && e.boundingClientRect.top < 1) {
     menuBar.classList.add("sticky");
+    menuBarContainer.classList.remove(
+      "grid-container",
+      "grid-container-desktop"
+    );
+
     menuBarImage.removeAttribute("hidden");
     menuBarImage.setAttribute("tabindex", "0");
-
-    // Check if viewing on mobile device
-    if (window.innerWidth < deviceBreakpoint) {
-      scrollMenuBar(menuBarScrollOffsetMobile);
-    } else {
-      scrollMenuBar(menuBarScrollOffsetFull);
-    }
+    // call function to reset the menubar when menuBarImage is displayed
+    adjustMenuPadding();
+    window.addEventListener("resize", adjustMenuPadding);
     // Menu bar is no longer intersecting
   } else {
     menuBarImage.setAttribute("hidden", "");
     menuBarImage.setAttribute("tabindex", "-1");
+    menuBarLinks.style.paddingLeft = 0;
     menuBar.classList.remove("sticky");
+    window.removeEventListener("resize", adjustMenuPadding);
+    menuBarContainer.classList.add("grid-container", "grid-container-desktop");
     scrollMenuBar(menuBarScrollOffsetDefault);
   }
 }
@@ -55,3 +95,5 @@ document.addEventListener("DOMContentLoaded", () => {
   }
   scrollMenuBar(false);
 });
+
+// Adjust padding when the window resizes
diff --git a/themes/digital.gov/src/scss/new/guides/_guide-content.scss b/themes/digital.gov/src/scss/new/guides/_guide-content.scss
@@ -2,6 +2,10 @@
 
 .dg-guide__container {
   display: flex;
+
+  .dg-guide__menu-bar-links {
+    // padding-left: calc(50vw - 36rem);
+  }
 }
 
 .dg-guide__content {

diff --git a/themes/digital.gov/src/scss/new/guides/_guide-menu-bar.scss b/themes/digital.gov/src/scss/new/guides/_guide-menu-bar.scss
@@ -1,24 +1,27 @@
 @use "uswds-core" as *;
 
+// nav
+
 // Styles the desktop horizontal menu bar
 .dg-guide__menu-bar {
   @include u-border-y("1px", "gray-cool-30", "solid");
   @include u-z(200);
-  align-items: center;
   background-color: color("gray-10");
   height: units(10);
-  justify-content: center;
   position: sticky;
   top: -1px;
   white-space: nowrap;
 
-  @include at-media("mobile-lg") {
+  &-container {
     display: flex;
+    height: 100%;
+    width: 100%;
   }
 
   &-image-container {
     flex-shrink: 0;
-    margin: 0 units(3);
+    margin-left: units(3);
+    margin-right: units(3);
 
     a {
       text-decoration: none;
@@ -30,23 +33,32 @@
   }
 
   &-links {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    justify-content: flex-start;
     // Fade out overflowing items when scrolling
-    mask: linear-gradient(90deg, #0000, #000 5% 95%, #0000);
+    // mask: linear-gradient(90deg, #0000, #000 1rem 95%, #0000);
     overflow-x: scroll;
     overflow-y: hidden;
-    padding: 0 units(3);
     scrollbar-width: none;
+
+    @media (max-width: 87.5rem) {
+      // padding-left: calc(50vw - 36rem);
+    }
   }
 
   &-links::-webkit-scrollbar {
     display: none;
   }
 
   .dg-guide__menu-bar-link {
+    border-bottom: units(0.5) solid transparent;
     color: color("ink");
     font-size: size("sans", "md");
     font-weight: font-weight("light");
-    margin: 0 units(3);
+    margin-right: units(5);
     text-decoration: none;
 
     &:hover {
@@ -60,10 +72,14 @@
   }
 
   &.sticky {
-    justify-content: space-evenly;
-
+    @include at-media("mobile-lg") {
+      align-items: center;
+      display: flex;
+      justify-content: left;
+    }
     .dg-guide__menu-bar-image-container {
       align-items: flex-end;
+      align-self: center;
       display: flex;
     }
   }

diff --git a/themes/digital.gov/src/scss/new/guides/_guide-nav.scss b/themes/digital.gov/src/scss/new/guides/_guide-nav.scss
@@ -3,7 +3,7 @@
 .dg-guide__nav-container {
   display: none;
   flex-shrink: 0;
-  margin: units(5) units(2) units(0) units(2);
+  margin-top: units(7);
   position: sticky;
   top: units(15);
   width: 10rem;
@@ -13,7 +13,7 @@
   }
 
   @include at-media("desktop") {
-    margin: units(5);
+    margin-top: units(7);
     width: 15rem;
   }
 

diff --git a/themes/digital.gov/src/scss/new/shortcodes/_note.scss b/themes/digital.gov/src/scss/new/shortcodes/_note.scss
@@ -56,7 +56,7 @@
       margin-bottom: units(0.5);
     }
   }
-  
+
   // For notes within list items
   li .note {
     @include u-padding-y("05");
-Original file line number
+Diff line change
@@ Expand Up @@
     <p>We also encourage gratitude and reflection. Kudos are another staple of our meetings: we set aside a timeblock for teammates to thank each other, in their own words. The moderator can gather names ahead of time and call on each person to unmute. They can also read off kudos for anyone who can’t attend or would prefer not to unmute.</p>
     </li>
     </ol>
     We hope you’ll stir together our five ingredients and create the dish that best serves your audience. Stay tuned for the next piece, focused on small team meetings.