Add mobile menu styles

mozilla · Aug 3, 2021 · 24b2029 · 24b2029
1 parent cfd1ba1
commit 24b2029
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 17 deletions.
diff --git a/static/js/app.js b/static/js/app.js
@@ -207,10 +207,10 @@ function toggleAliasCardDetailsVisibility(aliasCard) {
 }
 
 function resetBodyPadding() {
-  const header = document.querySelector("header");
-  const headerHeight = header.clientHeight;
-  document.body.style.paddingTop = headerHeight + "px";
-  return;
+  // const header = document.querySelector("header");
+  // const headerHeight = header.clientHeight;
+  // document.body.style.paddingTop = headerHeight + "px";
+  // return;
 }
 
 function recruitmentLogic() {
@@ -226,11 +226,11 @@ function recruitmentLogic() {
   }
 
   // Reset document.body padding to accomodate height of recruitment banner
-  resetBodyPadding()
+  // resetBodyPadding()
 
   // Reset document.body padding when window is resized and the 
   // submenu becomes visible/hidden
-  window.addEventListener("resize", resetBodyPadding);
+  // window.addEventListener("resize", resetBodyPadding);
 
   recruitmentBannerLink.addEventListener("click", () => {
     const date = new Date();
@@ -278,11 +278,11 @@ function addEventListeners() {
     mobileMenuButton.addEventListener("click", () => {
       mobileMenuWrapper.classList.toggle("menu-open");
       if (mobileMenuWrapper.classList.contains("menu-open")) {
-        mobileMenuLinks.style.top = mobileMenuWrapper.clientHeight + "px";
-       return mobileMenuWrapper.style.minHeight = mobileMenuLinks.clientHeight + mobileMenuWrapper.clientHeight + "px";
+        // mobileMenuLinks.style.top = mobileMenuWrapper.clientHeight + "px";
+      //  return mobileMenuWrapper.style.minHeight = mobileMenuLinks.clientHeight + mobileMenuWrapper.clientHeight + "px";
       }
-      mobileMenuLinks.style.top = "0";
-      return mobileMenuWrapper.style.minHeight = "0";
+      // mobileMenuLinks.style.top = "0";
+      // return mobileMenuWrapper.style.minHeight = "0";
     });
   }
 

diff --git a/static/scss/partials/main.scss b/static/scss/partials/main.scss
@@ -1498,12 +1498,18 @@ input.input-has-error {
 .mobile-menu {
   position: relative;
   z-index: 1;
-  overflow: hidden;
-  min-height: 0;
+  // overflow: hidden;
+  // min-height: 0;
   background: #2f2f54;
   transition: all 0.4s ease;
 }
 
+.mobile-menu-wrapper {
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
 .menu-open {
   transition: all 0.4s ease;
 }
@@ -1567,14 +1573,20 @@ input.input-has-error {
   visibility: visible;
   pointer-events: all;
   transition: all 0.3s ease;
+  max-height: 300px;
 }
 
 .mobile-menu-links {
-  visibility: hidden;
+  overflow: hidden;
+  max-height: 0;
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
+  top: 100%;
+  width: 100%;
+  // visibility: hidden;
+  // position: absolute;
+  // top: 0;
+  // left: 0;
+  // right: 0;
   pointer-events: none;
   background: #2f2f54;
   box-shadow: inset 1px 3px 3px #20123a30;
@@ -1611,7 +1623,7 @@ input.input-has-error {
 }
 
 .faqs-headline {
-  margin: 3em 0 2em;
+  margin: 3rem 0 2rem;
   font-size: 2em;
 }