fix(layout): consolidate sticky header (#8781)

* fix(layout): consolidate sticky header use `--sticky-header-height` everywhere * fix toc for articles * fix MP-165 * lint * naming * printing
mdn · May 8, 2023 · 496ab9f · 496ab9f
1 parent 9c28eb6
commit 496ab9f
Show file tree

Hide file tree

Showing 10 changed files with 31 additions and 42 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -71,6 +71,8 @@
       .sidebar,
       .top-navigation-main,
       .page-footer,
+      .top-banner,
+      .place,
       ul.prev-next,
       .language-menu {
         display: none !important;

diff --git a/client/src/app.scss b/client/src/app.scss
@@ -93,10 +93,19 @@
   --form-elem-height: 2rem;
 
   /* Major Components */
-  --sticky-header-height: 0;
   --top-nav-height: 4rem;
-  --main-document-header-height: 6rem;
+  --article-actions-container-height: 2rem;
   --icon-size: 1rem;
+  --sticky-header-height: calc(
+    var(--top-nav-height) + var(--article-actions-container-height) + 2px
+  );
+}
+
+.top-banner.visible ~ * {
+  --sticky-header-height: calc(
+    var(--top-nav-height) + var(--article-actions-container-height) +
+      var(--top-banner-height) + 2px
+  );
 }
 
 @media screen and (min-width: $screen-md) {

diff --git a/client/src/document/hooks.ts b/client/src/document/hooks.ts
@@ -129,6 +129,11 @@ export function useStickyHeaderHeight() {
       // SSR.
       return 0;
     }
+    const sidebar = document.querySelector(".sidebar-container");
+
+    if (sidebar) {
+      return parseFloat(getComputedStyle(sidebar).top);
+    }
 
     const styles = getComputedStyle(document.documentElement);
     const stickyHeaderHeight = styles

diff --git a/client/src/document/index.scss b/client/src/document/index.scss
@@ -4,10 +4,6 @@
 @use "../ui/molecules/grids/grids.scss" as *;
 @use "../ui/base/typography" as *;
 
-:root {
-  --sticky-header-height: var(--main-document-header-height);
-}
-
 .main-document-header-container {
   position: sticky;
   top: 0;
@@ -630,13 +626,13 @@ kbd {
 }
 
 .sidebar-container {
-  --offset: var(--main-document-header-height);
+  --offset: var(--sticky-header-height);
   --max-height: calc(100vh - var(--offset));
 
   @media screen and (max-width: $screen-lg) {
     .mdn-cta-container ~ .document-page & {
       // minus 3 rem to ~ account for the top banner
-      --offset: calc(var(--main-document-header-height) + 3rem);
+      --offset: calc(var(--sticky-header-height) + 3rem);
     }
   }
 
@@ -646,7 +642,7 @@ kbd {
   }
   max-height: var(--max-height);
   position: sticky;
-  top: 5rem;
+  top: var(--offset);
   @media screen and (min-width: $screen-md) {
     .sidebar {
       mask-image: linear-gradient(
@@ -670,7 +666,7 @@ kbd {
       display: flex;
       flex-direction: column;
       gap: 0;
-      height: calc(100vh - var(--main-document-header-height));
+      height: calc(100vh - var(--sticky-header-height));
       mask-image: linear-gradient(
         to bottom,
         rgba(0, 0, 0, 0) 0%,
@@ -679,7 +675,7 @@ kbd {
       );
       overflow: auto;
       position: sticky;
-      top: var(--main-document-header-height);
+      top: var(--sticky-header-height);
 
       .place {
         margin: 1rem 0;

diff --git a/client/src/homepage/static-page/index.tsx b/client/src/homepage/static-page/index.tsx
@@ -3,10 +3,9 @@ import useSWR from "swr";
 import { CRUD_MODE } from "../../env";
 import { SidebarContainer } from "../../document/organisms/sidebar";
 import { TOC } from "../../document/organisms/toc";
-import { DocParent, Toc } from "../../../../libs/types/document";
+import { Toc } from "../../../../libs/types/document";
 import { PageNotFound } from "../../page-not-found";
 import { Loading } from "../../ui/atoms/loading";
-import { ArticleActionsContainer } from "../../ui/organisms/article-actions-container";
 
 interface StaticPageDoc {
   id: string;
@@ -19,7 +18,6 @@ interface StaticPageProps {
   extraClasses?: string;
   locale: string;
   slug: string;
-  parents: DocParent[];
   fallbackData?: any;
   title?: string;
   sidebarHeader?: ReactElement;
@@ -29,7 +27,6 @@ function StaticPage({
   extraClasses = "",
   locale,
   slug,
-  parents = [],
   fallbackData = undefined,
   title = "MDN",
   sidebarHeader = <></>,
@@ -67,10 +64,6 @@ function StaticPage({
 
   return (
     <>
-      <ArticleActionsContainer
-        parents={[...parents, { uri: baseURL, title: hyData.title }]}
-      />
-
       <div className="main-wrapper">
         <SidebarContainer doc={hyData}>
           {sidebarHeader || null}

diff --git a/client/src/plus/index.tsx b/client/src/plus/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Routes, Route, useLocation, useParams } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 
 import { useIsServer } from "../hooks";
 import { Loading } from "../ui/atoms/loading";
@@ -60,11 +60,6 @@ export function Plus({ pageTitle, ...props }: { pageTitle?: string }) {
     document.title = pageTitle || MDN_PLUS_TITLE;
   }, [pageTitle]);
 
-  const { locale = "en-US" } = useParams();
-  const { pathname } = useLocation();
-
-  const parents = [{ uri: `/${locale}/plus`, title: MDN_PLUS_TITLE }];
-
   return (
     <Routes>
       <Route
@@ -78,27 +73,23 @@ export function Plus({ pageTitle, ...props }: { pageTitle?: string }) {
       <Route
         path="collections/*"
         element={
-          <Layout
-            parents={[...parents, { uri: pathname, title: "Collections" }]}
-          >
+          <Layout>
             <Collections />
           </Layout>
         }
       />
       <Route
         path="updates/*"
         element={
-          <Layout parents={[...parents, { uri: pathname, title: "Updates" }]}>
+          <Layout>
             <Updates />
           </Layout>
         }
       />
       <Route
         path="/settings"
         element={
-          <Layout
-            parents={[...parents, { uri: pathname, title: "My Settings" }]}
-          >
+          <Layout>
             <Settings {...props} />
           </Layout>
         }

diff --git a/client/src/plus/plus-docs/index.tsx b/client/src/plus/plus-docs/index.tsx
@@ -90,7 +90,6 @@ function PlusDocs({ ...props }) {
         locale,
         slug: `plus/docs/${slug}`,
         title: MDN_PLUS_TITLE,
-        parents: [{ uri: `/${locale}/plus`, title: MDN_PLUS_TITLE }],
         sidebarHeader: <PlusDocsNav />,
         fallbackData: props.hyData ? props : undefined,
       }}

diff --git a/client/src/ui/molecules/grids/_document-page.scss b/client/src/ui/molecules/grids/_document-page.scss
@@ -61,7 +61,7 @@
     padding-right: 1rem;
 
     .toc {
-      --offset: var(--main-document-header-height);
+      --offset: var(--sticky-header-height);
 
       display: block;
       grid-area: toc;

diff --git a/client/src/ui/organisms/article-actions-container/index.scss b/client/src/ui/organisms/article-actions-container/index.scss
@@ -5,7 +5,7 @@
   background-color: var(--background-secondary);
   border-bottom: 1px solid var(--border-primary);
   margin: 0;
-  min-height: 2rem;
+  min-height: var(--article-actions-container-height);
   padding: 0;
   position: sticky;
   top: 0;
@@ -52,9 +52,3 @@
     }
   }
 }
-
-@media screen and (max-width: $screen-md) {
-  :root {
-    --sticky-header-height: 2rem;
-  }
-}
diff --git a/client/src/ui/organisms/article-actions/index.scss b/client/src/ui/organisms/article-actions/index.scss
@@ -154,7 +154,7 @@
       bottom: auto;
       box-shadow: var(--shadow-02);
       left: var(--article-actions-position-left, initial);
-      max-height: calc(100vh - 12px - var(--main-document-header-height));
+      max-height: calc(100vh - 12px - var(--sticky-header-height));
       padding: 0;
       position: absolute;
       right: 0;