Fix top nav on mobile

ripple · Aug 5, 2022 · c579d8f · c579d8f
1 parent d15fc59
commit c579d8f
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 18 deletions.
diff --git a/_components/LayoutWrapper.tsx b/_components/LayoutWrapper.tsx
@@ -6,7 +6,7 @@ import navbar from '../top-nav.yaml';
  * top navbar regardless of whether the top nav has an alert banner active.
  */
 export default function LayoutWrapper(props) {
-  const topmargin = navbar.alertbanner.show ? {"margin-top": "126px"} : {"margin-top": "80px"};
+  const topmargin = navbar.alertbanner.show ? {"marginTop": "126px"} : {"marginTop": "80px"};
   return (
     <div style={topmargin}>
       {props.children} {}

diff --git a/_override/NavBar.tsx b/_override/NavBar.tsx
@@ -24,6 +24,20 @@ export default function CustomNavBar(props: NavBarProps) {
     }
   });
 
+  React.useEffect(() => {
+    // Turns out jQuery is necessary for firing events on Bootstrap v4
+    // dropdowns. These events set classes so that the search bar and other
+    // submenus collapse on mobile when you expand one submenu.
+    const dds = $("#topnav-pages .dropdown");
+    const top_main_nav = document.querySelector("#top-main-nav");
+    dds.on("show.bs.dropdown", (evt) => {
+      top_main_nav.classList.add("submenu-expanded");
+    });
+    dds.on("hidden.bs.dropdown", (evt) => {
+      top_main_nav.classList.remove("submenu-expanded");
+    });
+  })
+
   return (
     <>
     <AlertBanner show={navbar.alertbanner.show}
@@ -51,8 +65,6 @@ export default function CustomNavBar(props: NavBarProps) {
 export function AlertBanner(props) {
   const {show, message, button, link} = props;
 
-  //if (!show) { return null; }
-
   return (
     <div className="top-banner fixed-top">
       <div className="d-flex justify-content-center">
@@ -143,7 +155,7 @@ export function NavDropdown(props) {
 
 export function NavWrapper(props) {
   return (
-    <nav className="top-nav navbar navbar-expand-lg navbar-dark fixed-top" style={props.belowAlertBanner ? {"margin-top": "46px"}: {}}>
+    <nav className="top-nav navbar navbar-expand-lg navbar-dark fixed-top" style={props.belowAlertBanner ? {"marginTop": "46px"}: {}}>
       {props.children}
     </nav>
   )

diff --git a/package.json b/package.json
@@ -10,9 +10,10 @@
     "clean": "redocly-portal clean"
   },
   "dependencies": {
-    "@redocly/developer-portal": "1.1.0-beta.101"
+    "@redocly/developer-portal": "1.1.0-beta.101",
+    "jquery": "^3.6.0"
   },
   "devDependencies": {
-    "@types/jquery": "^3.5.14"
+    "@types/jquery": "^3.6.0"
   }
 }
diff --git a/static/css/fixes.css b/static/css/fixes.css
@@ -21,6 +21,7 @@ a[title="Source"] {
   margin: 0 2rem 2rem 2rem;
 }
 
+
 /* Top nav dropdowns have different generated IDs compared to the old site */
 .top-nav .dropdown-menu.show#topnav_dd_about {
   grid-template-columns: 180px 180px 180px;
@@ -40,9 +41,6 @@ a[title="Source"] {
   padding: 40px;
   background-color: #232325;
 }
-.light .top-nav .dropdown-menu.show .col-for-popular_pages {
-  background-color: #E0E0E1;
-}
 .top-nav .dropdown-menu.show #dropdown-hero-for-docs {
   grid-column: 1 / 3;
 }
@@ -58,6 +56,41 @@ a[title="Source"] {
   }
 }
 
+@media (max-width: 991.98px) {
+  /* Fix dropdown size with top banner present */
+  .top-nav .dropdown-menu.show {
+    height: calc(100vh - 80px - 52px - 46px);
+  }
+
+  .top-nav .dropdown-menu.show#topnav_dd_docs {
+    display: grid;
+    grid-template-columns: minmax(187px, 1fr) minmax(187px, 1fr);
+    gap: 1px;
+  }
+  .top-nav .dropdown-menu.show#topnav_dd_docs .dropdown-hero {
+    grid-column: 1 / 3;
+    grid-row: 1;
+  }
+  .top-nav .dropdown-menu.show .col-for-popular_pages {
+    grid-column: 1 / 3;
+    grid-row: 4;
+    margin: -1px;
+    padding-top: 33px;
+  }
+
+  /* Fix spacing of community dropdown */
+  #topnav_dd_community.show {
+    padding: 1rem 2rem 4rem 2rem;
+  }
+  #dropdown-hero-for-community {
+    padding-left: 0;
+  }
+}
+
+.light .top-nav .dropdown-menu.show .col-for-popular_pages {
+  background-color: #E0E0E1;
+}
+
 /* Fixes for theme toggle. Some of these might be fixable by using overrides that don't add styles instead. */
 .light article,
 .light .styled-page p {
@@ -153,6 +186,9 @@ a[title="Source"] {
   color: #000;
   background-color: #E0E0E1;
 }
+.dark #search {
+  background-color: #111112;
+}
 
 /* Fixes for tables, esp. in light mode. */
 .dark .page-tree-nav + div details > table td,
@@ -209,6 +245,19 @@ a[title="Source"] {
   max-width: 100%;
 }
 
+@media only screen and (max-width: 900px) {
+  /* Fix Redocly style that pushes the search down at this breakpoint */
+  #topnav-pages > span > span {
+    margin: 0;
+  }
+}
+
+@media (max-width: 991.98px) {
+    #search {
+      line-height: 40px;
+    }
+}
+
 @media (min-width: 993px) {
   .top-nav #topnav-pages {
     flex-grow: 1 !important;
@@ -283,3 +332,45 @@ html.light .top-banner .btn-outline-secondary:not(:disabled):not(.disabled):hove
   background-color: #E0E0E1;
   border-color: #E0E0E1;
 }
+
+/* Fix mobile nav issues */
+@media (max-width: 991.98px) {
+  section .top-nav #top-main-nav {
+    position: relative;
+  }
+
+  /* Fix the search inner wrapper */
+  section #topnav-pages > span > span {
+    margin-left: 0;
+  }
+
+  /* Fix the search outer wrapper */
+  section #topnav-pages > span {
+    display: block;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 72px;
+    transition: all .2s ease;
+  }
+
+  #search {
+    padding: 1rem 2rem;
+    border-radius: 0;
+  }
+  /* hide search when mobile "dropdown" equivalent expanded */
+  .top-nav #top-main-nav.submenu-expanded #topnav-pages > span {
+    height: 0;
+    overflow: clip;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .light .top-nav .navbar-collapse .nav-item {
+    background-color: #E0E0E1;
+  }
+  .dark .top-nav .navbar-collapse .nav-item {
+    background-color: #111112;
+  }
+
+}
diff --git a/static/js/jump-to-top.js b/static/js/jump-to-top.js
@@ -1,4 +1,5 @@
 $(document).ready(function() {
+  console.log("Document ready is real")
 
   var TO_TOP_MIN = 50;
   var TO_TOP_SPEED = 500;
@@ -13,13 +14,4 @@ $(document).ready(function() {
   $(".jump-to-top").click(function() {
     $("html").animate({scrollTop: TO_TOP_POS}, TO_TOP_SPEED)
   });
-
-  // TODO: put this somewhere better.
-  // Code to make other menu items hide on mobile when we expand one
-  $("#topnav-pages .dropdown").on("show.bs.dropdown", (evt) => {
-    $("#top-main-nav").addClass("submenu-expanded")
-  })
-  $("#topnav-pages .dropdown").on("hidden.bs.dropdown", (evt) => {
-    $("#top-main-nav").removeClass("submenu-expanded")
-  })
 });
diff --git a/yarn.lock b/yarn.lock
@@ -8967,6 +8967,11 @@ joi@^17.2.1, joi@^17.4.0, joi@^17.4.2:
     "@sideway/formula" "^3.0.0"
     "@sideway/pinpoint" "^2.0.0"
 
+jquery@^3.5.14:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470"
+  integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==
+
 js-levenshtein@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"