From 496ab9f36773d86b6d8f7478deaa34e106353b88 Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Mon, 8 May 2023 11:18:49 +0200 Subject: [PATCH] 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 --- client/public/index.html | 2 ++ client/src/app.scss | 13 +++++++++++-- client/src/document/hooks.ts | 5 +++++ client/src/document/index.scss | 14 +++++--------- client/src/homepage/static-page/index.tsx | 9 +-------- client/src/plus/index.tsx | 17 ++++------------- client/src/plus/plus-docs/index.tsx | 1 - .../src/ui/molecules/grids/_document-page.scss | 2 +- .../article-actions-container/index.scss | 8 +------- .../src/ui/organisms/article-actions/index.scss | 2 +- 10 files changed, 31 insertions(+), 42 deletions(-) diff --git a/client/public/index.html b/client/public/index.html index 49b312463181..92a7b6d02754 100644 --- 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 index 2341ec5bf2a5..389909a3fe76 100644 --- 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 index 8909247d25b1..a7b8846017d6 100644 --- 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 index e4492c093a46..1cf415495551 100644 --- 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 index ec9cabe4eeab..3f1e54924839 100644 --- 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 ( <> - -
{sidebarHeader || null} diff --git a/client/src/plus/index.tsx b/client/src/plus/index.tsx index f909e21c4882..54b200a4424b 100644 --- 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 ( + } @@ -88,7 +81,7 @@ export function Plus({ pageTitle, ...props }: { pageTitle?: string }) { + } @@ -96,9 +89,7 @@ export function Plus({ pageTitle, ...props }: { pageTitle?: string }) { + } diff --git a/client/src/plus/plus-docs/index.tsx b/client/src/plus/plus-docs/index.tsx index 6e218298a7f0..8e8902a70cab 100644 --- 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: , 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 index a85335f815f7..4c63f4cf3aee 100644 --- 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 index 776cbaaf262d..e35d0a6aef18 100644 --- 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 index 7bf1a49a1a12..41f567ae179f 100644 --- 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;