Update Header and Footer responsive styles (#110)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: DanPaseltiner <[email protected]> Co-authored-by: Bob Zhao <[email protected]> Co-authored-by: Michelle Kang <[email protected]>
CDCgov · Nov 5, 2024 · 8211e77 · 8211e77
1 parent 3a0f7ce
commit 8211e77
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 31 deletions.
diff --git a/query-connector/src/app/query/components/footer/footer.module.scss b/query-connector/src/app/query/components/footer/footer.module.scss
@@ -1,24 +1,34 @@
 @use "../../../../styles/_variables" as *;
 
 .footerContainer {
-  height: 5rem;
+  height: $footer-content-height;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   background-color: $primary-darker;
-}
-
-.footerContainer > div {
-  flex-grow: 1;
+  overflow: scroll !important;
 }
 
 .cdcLogoContainer {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  margin-right: 0.5rem;
 }
 
-.contactUsContainer {
+.cdcFooterTextContainer {
   display: flex;
-  justify-content: end;
+  justify-content: space-between;
+  width: 100%;
+
+  p {
+    white-space: nowrap;
+    margin: 0;
+  }
+}
+
+@media (max-width: 64em) {
+  .cdcFooterTextContainer {
+    flex-direction: column;
+    justify-content: flex-start;
+  }
 }
diff --git a/query-connector/src/app/query/components/footer/footer.tsx b/query-connector/src/app/query/components/footer/footer.tsx
@@ -10,23 +10,21 @@ export default function FooterComponent() {
   return (
     <footer className={classNames("usa-footer", styles.footerContainer)}>
       <div className={styles.cdcLogoContainer}>
-        <div>
-          <Image
-            src="/tefca-viewer/CDC_logo.png"
-            alt="CDC logo"
-            width={62}
-            height={36}
-            className="usa-footer__logo-img"
-          />
-        </div>
+        <Image
+          src="/tefca-viewer/CDC_logo.png"
+          alt="CDC logo"
+          width={62}
+          height={36}
+          className="usa-footer__logo-img"
+        />
+      </div>
+      <div className={styles.cdcFooterTextContainer}>
         <div>
           <p className="text-base-lightest-important">
             Centers for Disease Control and Prevention
           </p>
         </div>
-      </div>
-      <div className={styles.contactUsContainer}>
-        <div className="width-fit-content">
+        <div>
           <p className="text-base-lightest-important">
             For more information about this solution, send us an email at{" "}
             <a

diff --git a/...query/components/header/header.module.css → ...uery/components/header/header.module.scss b/...query/components/header/header.module.css → ...uery/components/header/header.module.scss
@@ -1,21 +1,26 @@
+@use "../../../../styles/_variables" as *;
+
 .dataUsagePolicyButton {
   cursor: pointer;
   background: none !important;
   border: none !important;
   color: white !important;
   padding: 0px !important;
   font: inherit !important;
-  margin-right: 1rem !important;
+  margin: 0 0.5rem !important;
+  text-align: left !important;
 }
 
 .signinButton {
   padding: 0.5rem 1.25rem !important;
+  margin: 0 !important;
   cursor: pointer;
   background: none !important;
   border: 2px solid white !important;
   border-radius: 4px !important;
   color: white !important;
   font: inherit !important;
+  white-space: nowrap;
 }
 
 .menuButton {
@@ -41,7 +46,7 @@
   border-radius: 4px !important;
   padding: 0.5rem !important;
   background: #ffffff !important;
-  margin: 3.5rem 3rem 0rem 0rem !important;
+  margin: 3.5rem 2rem 0rem 0rem !important;
   width: 10rem !important;
   box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.16);
 }
@@ -51,16 +56,29 @@
   text-decoration: none !important;
   padding: 0.5rem 1rem !important;
   cursor: pointer;
+  width: 100%;
 }
 
 .menuItem:hover {
   text-decoration: none !important;
 }
 
+.subMenuItem {
+  display: flex;
+}
+
 .headerContentContainer {
+  display: flex;
   align-items: center !important;
   margin: 0 !important;
   padding: 0 !important;
-  height: 4.5rem;
+  height: $header-content-height;
   max-width: 100% !important;
 }
+
+@media (max-width: 63.99em) {
+  .menuDropdown {
+    z-index: 400 !important;
+    position: absolute;
+  }
+}
diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx
@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { Modal, ModalButton } from "../../designSystem/Modal";
 import { useRouter, usePathname } from "next/navigation";
 import { Button, Icon, ModalRef } from "@trussworks/react-uswds";
-import styles from "./header.module.css";
+import styles from "./header.module.scss";
 import { metadata } from "@/app/constants";
 import classNames from "classnames";
 /**
@@ -13,12 +13,30 @@ import classNames from "classnames";
  */
 export default function HeaderComponent() {
   const modalRef = useRef<ModalRef>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
   const [isClient, setIsClient] = useState(false);
   const [showMenu, setShowMenu] = useState(false);
 
+  const outsideMenuClick = (event: MouseEvent) => {
+    if (
+      showMenu &&
+      menuRef.current &&
+      !menuRef.current.contains(event.target as Node)
+    ) {
+      setShowMenu(false);
+    }
+  };
+
   useEffect(() => {
     setIsClient(true);
-  }, []);
+
+    document.addEventListener("mousedown", outsideMenuClick);
+
+    return () => {
+      document.removeEventListener("mousedown", outsideMenuClick);
+    };
+  }, [showMenu]);
 
   const router = useRouter();
   const path = usePathname();
@@ -43,7 +61,7 @@ export default function HeaderComponent() {
           )}
         >
           <div className={classNames("display-flex", "flex-align-center")}>
-            <div className="usa-logo">
+            <div className="usa-logo" style={{ marginLeft: "0" }}>
               <em className="usa-logo__text text-base-lightest-important">
                 <a
                   className="font-mono-lg text-base-lightest-important font-weight-normal-important"
@@ -115,19 +133,19 @@ export default function HeaderComponent() {
       )}
 
       {showMenu && (
-        <div className={styles.menuDropdownContainer}>
+        <div ref={menuRef} className={styles.menuDropdownContainer}>
           <ul
             id="dropdown-menu"
             className={`usa-nav__submenu ${styles.menuDropdown}`}
           >
             {!isProduction && (
-              <li className={`usa-nav__submenu-item`}>
+              <li className={styles.subMenuItem}>
                 <a className={styles.menuItem} href={"/queryBuilding"}>
                   My queries
                 </a>
               </li>
             )}
-            <li className={`usa-nav__submenu-item`}>
+            <li className={styles.subMenuItem}>
               <a className={styles.menuItem} href={backLink}>
                 Log out
               </a>

diff --git a/query-connector/src/app/signin/page.tsx b/query-connector/src/app/signin/page.tsx
@@ -6,6 +6,7 @@ import { Fieldset, Icon, Label, TextInput } from "@trussworks/react-uswds";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
 import styles from "./signinPage.module.scss";
+import classNames from "classnames";
 
 /**
  * The sign-in page for Query Connector.
@@ -53,7 +54,7 @@ export default function SigninPage() {
   };
 
   return (
-    <div className="display-flex">
+    <div className={classNames("display-flex", styles.signInContainer)}>
       <div className={`${styles[`column-left`]} ${styles.column}`}>
         <Image
           alt="Graphic illustrating what TEFCA is"

diff --git a/query-connector/src/app/signin/signinPage.module.scss b/query-connector/src/app/signin/signinPage.module.scss
@@ -1,5 +1,12 @@
 @use "../../styles/_variables" as *;
 
+.signInContainer {
+  position: absolute;
+  top: $header-content-height;
+  bottom: $footer-content-height;
+  width: 100%;
+}
+
 .column {
   width: 100%;
   display: flex;

diff --git a/query-connector/src/styles/_variables.scss b/query-connector/src/styles/_variables.scss
@@ -18,3 +18,6 @@ $background-hover-color: #d9e8f680;
 $serif-font: family("heading");
 $sans-serif-font: "Public Sans Web", family("body");
 $mono-font: "Consolas", family("mono");
+
+$header-content-height: 4.5rem;
+$footer-content-height: 5rem;