From 114809d13f7664db97fdb396500fcf596dea7baf Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Thu, 21 Sep 2023 11:55:14 +0200 Subject: [PATCH 1/8] feat(blog): add toc Only for large screens for now. This also refactors the useStickyHeaderHeight hook. --- client/src/blog/index.scss | 52 ++++++ client/src/blog/index.tsx | 1 - client/src/blog/post.scss | 197 ++++++++++---------- client/src/blog/post.tsx | 23 ++- client/src/document/hooks.ts | 33 +--- client/src/document/organisms/toc/index.tsx | 3 +- 6 files changed, 169 insertions(+), 140 deletions(-) diff --git a/client/src/blog/index.scss b/client/src/blog/index.scss index 296f95164770..f84cf264d174 100644 --- a/client/src/blog/index.scss +++ b/client/src/blog/index.scss @@ -9,6 +9,8 @@ } .blog-container { + --author-gap: 1rem; + --avatar-size: 3rem; margin: 0 auto; max-width: min(calc(80vw + 4rem), var(--max-width)); padding: 2rem 1rem; @@ -30,6 +32,56 @@ } } + .date-author, + .author { + align-content: flex-start; + align-items: center; + display: flex; + flex-wrap: wrap; + } + + .date-author { + column-gap: 1.5rem; + padding-left: calc(var(--avatar-size) + var(--author-gap)); + } + + .author { + font-weight: var(--font-body-strong-weight); + gap: var(--author-gap); + margin-left: calc((var(--avatar-size) + var(--author-gap)) * -1); + + &::after { + margin-left: calc(4px - var(--author-gap)); + } + + img { + border: none !important; + border-radius: 3rem; + height: var(--avatar-size); + margin: 0; + object-fit: cover; + width: var(--avatar-size); + } + } + + figure.blog-image { + margin: 0 auto 2rem; + width: fit-content; + + img { + background: transparent; + border: none !important; + margin: 0 0 0.125rem; + width: 100%; + } + + figcaption { + font-size: smaller; + margin-left: auto; + width: fit-content; + } + } + h1 { margin-top: 1rem; } diff --git a/client/src/blog/index.tsx b/client/src/blog/index.tsx index 85d2ee68407a..6186bf32849b 100644 --- a/client/src/blog/index.tsx +++ b/client/src/blog/index.tsx @@ -9,7 +9,6 @@ import { BlogPost, AuthorDateReadTime } from "./post"; import { BlogImage, BlogPostMetadata } from "../../../libs/types/blog.js"; import "./index.scss"; -import "./post.scss"; import { Button } from "../ui/atoms/button"; import { SignUpSection as NewsletterSignUp } from "../newsletter"; diff --git a/client/src/blog/post.scss b/client/src/blog/post.scss index 23ad757e0e5f..c8f1692efb6e 100644 --- a/client/src/blog/post.scss +++ b/client/src/blog/post.scss @@ -1,135 +1,128 @@ @use "../ui/vars" as *; -.blog-container.post { - max-width: calc(48rem + 4rem); - - + .section-newsletter h2 { - font: var(--type-heading-h3); - margin: 0; - } -} - -.blog-container { - --author-gap: 1rem; - --avatar-size: 3rem; - - .date-author, - .author { - align-content: flex-start; - align-items: center; - display: flex; - flex-wrap: wrap; +.blog-post-container { + display: grid; + gap: 3rem; + grid-template-areas: + "post" + "newsletter"; + width: 100%; + @media screen and (min-width: $screen-lg) { + display: grid; + gap: 3rem; + grid-template-areas: + "post toc" + "newsletter toc"; + grid-template-columns: minmax(auto, 100%) minmax(0, 12rem); } - - .date-author { - column-gap: 1.5rem; - padding-left: calc(var(--avatar-size) + var(--author-gap)); + @media screen and (min-width: $screen-xl) { + display: grid; + gap: 3rem; + grid-template-areas: + "nothing post toc" + "nothing newsletter toc"; + grid-template-columns: minmax(auto, 1fr) minmax(0, 52rem) minmax(15rem, 1fr); } - .author { - font-weight: var(--font-body-strong-weight); - gap: var(--author-gap); - margin-left: calc((var(--avatar-size) + var(--author-gap)) * -1); + > .sidebar-container { + --offset: var(--top-nav-height); + display: none; - &::after { - margin-left: calc(4px - var(--author-gap)); + .toc-container { + position: unset; + top: auto; } + @media screen and (min-width: $screen-lg) { + display: flex; + grid-area: toc; - img { - border: none !important; - border-radius: 3rem; - height: var(--avatar-size); - margin: 0; - object-fit: cover; - width: var(--avatar-size); + .toc > nav { + margin-top: 2rem; + } } } - figure.blog-image { - margin: 0 auto 2rem; - width: fit-content; - - img { - background: transparent; - border: none !important; - margin: 0 0 0.125rem; - width: 100%; - } - - figcaption { - font-size: smaller; - margin-left: auto; - width: fit-content; - } + > .section-newsletter { + grid-area: newsletter; } - .previous-next { - display: flex; - gap: 1rem; + > .blog-post { + grid-area: post; + max-width: 52rem; - @media screen and (max-width: $screen-md) { - flex-direction: column-reverse; + + .section-newsletter h2 { + font: var(--type-heading-h3); + margin: 0; } - a { - color: var(--text-primary); + .previous-next { display: flex; gap: 1rem; - text-decoration: none; - width: 100%; - &:hover h2 { - text-decoration: underline; + @media screen and (max-width: $screen-md) { + flex-direction: column-reverse; } - &:active { - background: none; - } + a { + color: var(--text-primary); + display: flex; + gap: 1rem; + text-decoration: none; + width: 100%; - @media screen and (min-width: $screen-md) { - &.previous, - &.next { - &::before, - &::after { - align-self: center; - background-color: var(--text-primary); - flex-shrink: 0; - height: 1rem; - mask-position: center; - mask-repeat: no-repeat; - vertical-align: middle; - width: 1rem; - } + &:hover h2 { + text-decoration: underline; } - &.previous::before { - content: ""; - mask-image: url("../assets/icons/previous.svg"); + &:active { + background: none; } - &.next::after { - content: ""; - mask-image: url("../assets/icons/next.svg"); + @media screen and (min-width: $screen-md) { + &.previous, + &.next { + &::before, + &::after { + align-self: center; + background-color: var(--text-primary); + flex-shrink: 0; + height: 1rem; + mask-position: center; + mask-repeat: no-repeat; + vertical-align: middle; + width: 1rem; + } + } + + &.previous::before { + content: ""; + mask-image: url("../assets/icons/previous.svg"); + } + + &.next::after { + content: ""; + mask-image: url("../assets/icons/next.svg"); + } } } - } - - article { - margin: 0 auto; - } - h2:first-of-type { - color: var(--text-link); - font-size: 1rem; - margin: 0; - text-align: center; + article { + margin: 0 auto; + } - strong { - color: var(--text-primary); - display: block; - font-size: 0.8em; - font-weight: normal; - line-height: 1.2rem; + h2:first-of-type { + color: var(--text-link); + font-size: 1rem; + margin: 0; + text-align: center; + + strong { + color: var(--text-primary); + display: block; + font-size: 0.8em; + font-weight: normal; + line-height: 1.2rem; + } } } } diff --git a/client/src/blog/post.tsx b/client/src/blog/post.tsx index 7dac2dac23d1..bff43fa4cb9c 100644 --- a/client/src/blog/post.tsx +++ b/client/src/blog/post.tsx @@ -2,7 +2,7 @@ import useSWR from "swr"; import { HydrationData } from "../../../libs/types/hydration"; import { HTTPError, RenderDocumentBody } from "../document"; -import { WRITER_MODE } from "../env"; +import { PLACEMENT_ENABLED, WRITER_MODE } from "../env"; import "./index.scss"; import "./post.scss"; @@ -20,6 +20,8 @@ import { } from "../document/hooks"; import { DEFAULT_LOCALE } from "../../../libs/constants"; import { SignUpSection as NewsletterSignUp } from "../newsletter"; +import { TOC } from "../document/organisms/toc"; +import { SidePlacement } from "../ui/organisms/placement"; function MaybeLink({ className = "", link, children }) { return link ? ( @@ -191,11 +193,18 @@ export function BlogPost(props: HydrationData) { return ( <> {doc && blogMeta && ( - <> -
+
+
+
+ + {PLACEMENT_ENABLED && } +
+
+
{blogMeta?.sponsored && ( Sponsored @@ -206,7 +215,7 @@ export function BlogPost(props: HydrationData) { {blogMeta.links && }
- +
)} ); diff --git a/client/src/document/hooks.ts b/client/src/document/hooks.ts index f2175a9cfbcf..4dca4859fec1 100644 --- a/client/src/document/hooks.ts +++ b/client/src/document/hooks.ts @@ -108,35 +108,10 @@ 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 - .getPropertyValue("--sticky-header-height") - .trim(); - - if (stickyHeaderHeight.endsWith("rem")) { - const fontSize = styles.fontSize.trim(); - if (fontSize.endsWith("px")) { - return parseFloat(stickyHeaderHeight) * parseFloat(fontSize); - } else { - console.warn( - `[useStickyHeaderHeight] fontSize has unexpected unit: ${fontSize}` - ); - return 0; - } - } else if (stickyHeaderHeight.endsWith("px")) { - return parseFloat(stickyHeaderHeight); - } else { - console.warn( - `[useStickyHeaderHeight] --sticky-header-height has unexpected unit: ${stickyHeaderHeight}` - ); - return 0; - } + return ( + document.querySelector(".main-document-header-container") + ?.offsetHeight || 0 + ); } const [height, setHeight] = useState(determineStickyHeaderHeight()); diff --git a/client/src/document/organisms/toc/index.tsx b/client/src/document/organisms/toc/index.tsx index c4e2a8518130..fe479798384d 100644 --- a/client/src/document/organisms/toc/index.tsx +++ b/client/src/document/organisms/toc/index.tsx @@ -10,8 +10,9 @@ export function TOC({ toc }: { toc: Toc[] }) { const observedElements = React.useCallback(() => { const mainElement = document.querySelector("main") ?? document; const elements = mainElement.querySelectorAll( - "h1, h1 ~ *:not(section), h2, h2 ~ *:not(section), h3, h3 ~ *:not(section)" + "h1, h1 ~ *:not(section), h2:not(.document-toc-heading), h2:not(.document-toc-heading) ~ *:not(section), h3, h3 ~ *:not(section)" ); + console.log(elements); return Array.from(elements); }, []); From 7cf33350d6ecb0b7b0a9765984f4724ab71e4131 Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Thu, 21 Sep 2023 13:57:51 +0200 Subject: [PATCH 2/8] no placment on sponsored posts --- client/src/blog/post.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/blog/post.tsx b/client/src/blog/post.tsx index bff43fa4cb9c..0ed9b4cf2a81 100644 --- a/client/src/blog/post.tsx +++ b/client/src/blog/post.tsx @@ -201,7 +201,7 @@ export function BlogPost(props: HydrationData) { {doc.toc && !!doc.toc.length && } - {PLACEMENT_ENABLED && } + {PLACEMENT_ENABLED && !blogMeta?.sponsored && }
From ac2ec8d7fb402ee024e5cb0703140fc2b2218fef Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Thu, 21 Sep 2023 20:32:36 +0200 Subject: [PATCH 3/8] feedback --- client/src/app.scss | 1 + client/src/blog/post.scss | 6 ++---- client/src/document/hooks.ts | 9 ++++----- client/src/document/organisms/toc/index.tsx | 1 - 4 files changed, 7 insertions(+), 10 deletions(-) diff --git a/client/src/app.scss b/client/src/app.scss index 619b971270cf..98b24a976b1d 100644 --- a/client/src/app.scss +++ b/client/src/app.scss @@ -128,6 +128,7 @@ body { accent-color: var(--accent-primary); // for checkboxes, radios, etc. background-color: var(--background-primary); color: var(--text-primary); + min-height: var(--sticky-header-height); // used in useStickyHeaderHeight scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg); &.mobile-overlay-active { diff --git a/client/src/blog/post.scss b/client/src/blog/post.scss index c8f1692efb6e..29d0a8417053 100644 --- a/client/src/blog/post.scss +++ b/client/src/blog/post.scss @@ -7,17 +7,15 @@ "post" "newsletter"; width: 100%; + @media screen and (min-width: $screen-lg) { - display: grid; - gap: 3rem; grid-template-areas: "post toc" "newsletter toc"; grid-template-columns: minmax(auto, 100%) minmax(0, 12rem); } + @media screen and (min-width: $screen-xl) { - display: grid; - gap: 3rem; grid-template-areas: "nothing post toc" "nothing newsletter toc"; diff --git a/client/src/document/hooks.ts b/client/src/document/hooks.ts index 4dca4859fec1..79064ab2ce4e 100644 --- a/client/src/document/hooks.ts +++ b/client/src/document/hooks.ts @@ -108,10 +108,9 @@ export function useStickyHeaderHeight() { // SSR. return 0; } - return ( - document.querySelector(".main-document-header-container") - ?.offsetHeight || 0 - ); + + const height = parseFloat(getComputedStyle(document.body)["min-height"]); + return Number.isNaN(height) ? 0 : height; } const [height, setHeight] = useState(determineStickyHeaderHeight()); @@ -135,7 +134,7 @@ export function useStickyHeaderHeight() { window.addEventListener("resize", debouncedListener); return () => window.removeEventListener("resize", debouncedListener); - }, []); + }, [setHeight]); return height; } diff --git a/client/src/document/organisms/toc/index.tsx b/client/src/document/organisms/toc/index.tsx index fe479798384d..5065bbc589e1 100644 --- a/client/src/document/organisms/toc/index.tsx +++ b/client/src/document/organisms/toc/index.tsx @@ -12,7 +12,6 @@ export function TOC({ toc }: { toc: Toc[] }) { const elements = mainElement.querySelectorAll( "h1, h1 ~ *:not(section), h2:not(.document-toc-heading), h2:not(.document-toc-heading) ~ *:not(section), h3, h3 ~ *:not(section)" ); - console.log(elements); return Array.from(elements); }, []); From 706c7becff543941e9e9fa1a13ed49d675432324 Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Fri, 22 Sep 2023 14:12:30 +0200 Subject: [PATCH 4/8] use min height for top header --- client/src/app.scss | 16 ++++++++++++++-- client/src/app.tsx | 4 +++- client/src/document/hooks.ts | 7 ++++++- client/src/document/index.scss | 6 ------ client/src/document/index.tsx | 4 ++-- client/src/ui/organisms/top-navigation/index.tsx | 6 ++---- 6 files changed, 27 insertions(+), 16 deletions(-) diff --git a/client/src/app.scss b/client/src/app.scss index 98b24a976b1d..5a7a53e492d6 100644 --- a/client/src/app.scss +++ b/client/src/app.scss @@ -102,8 +102,10 @@ --top-nav-height: 4rem; --article-actions-container-height: 2rem; --icon-size: 1rem; + --sticky-header-standalone-height: calc(var(--top-nav-height) + 1px); --sticky-header-height: calc( - var(--top-nav-height) + var(--article-actions-container-height) + 2px + var(--sticky-header-standalone-height) + + var(--article-actions-container-height) + 1px ); } @@ -128,7 +130,6 @@ body { accent-color: var(--accent-primary); // for checkboxes, radios, etc. background-color: var(--background-primary); color: var(--text-primary); - min-height: var(--sticky-header-height); // used in useStickyHeaderHeight scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg); &.mobile-overlay-active { @@ -341,3 +342,14 @@ sup.new { background: var(--new-background-beta, var(--new-background)); } } + +.main-header-container { + min-height: var(--sticky-header-height); + position: sticky; + top: 0; + z-index: var(--z-index-main-header); + + &.standalone { + min-height: var(--sticky-header-standalone-height); + } +} diff --git a/client/src/app.tsx b/client/src/app.tsx index 656656cca46f..e7c23b95d261 100644 --- a/client/src/app.tsx +++ b/client/src/app.tsx @@ -55,7 +55,9 @@ function Layout({ pageType, children }) { > {pageType !== "document-page" && ( - +
+ +
)} {children} diff --git a/client/src/document/hooks.ts b/client/src/document/hooks.ts index 79064ab2ce4e..9669fefd75ad 100644 --- a/client/src/document/hooks.ts +++ b/client/src/document/hooks.ts @@ -109,7 +109,12 @@ export function useStickyHeaderHeight() { return 0; } - const height = parseFloat(getComputedStyle(document.body)["min-height"]); + const height = parseFloat( + getComputedStyle( + document.getElementsByClassName("main-header-container")?.[0] || + document.body + )["min-height"] + ); return Number.isNaN(height) ? 0 : height; } diff --git a/client/src/document/index.scss b/client/src/document/index.scss index 648185ad716d..fb149887e8fc 100644 --- a/client/src/document/index.scss +++ b/client/src/document/index.scss @@ -4,12 +4,6 @@ @use "../ui/molecules/grids/grids.scss" as *; @use "../ui/base/typography" as *; -.main-document-header-container { - position: sticky; - top: 0; - z-index: var(--z-index-main-header); -} - .main-page-content { overflow-wrap: break-word; padding: 3rem 1rem 1rem; diff --git a/client/src/document/index.tsx b/client/src/document/index.tsx index 8c22edf06fd9..6bcb182f68e4 100644 --- a/client/src/document/index.tsx +++ b/client/src/document/index.tsx @@ -189,7 +189,7 @@ export function Document(props /* TODO: define a TS interface for this */) { if (error) { return ( <> -
+
@@ -211,7 +211,7 @@ export function Document(props /* TODO: define a TS interface for this */) { return ( <> -
+
diff --git a/client/src/ui/organisms/top-navigation/index.tsx b/client/src/ui/organisms/top-navigation/index.tsx index cde7f2e8c3e3..6c3592f22d60 100644 --- a/client/src/ui/organisms/top-navigation/index.tsx +++ b/client/src/ui/organisms/top-navigation/index.tsx @@ -11,7 +11,7 @@ import { useLocation } from "react-router-dom"; const DARK_NAV_ROUTES = [/\/plus\/?$/i, "_homepage", /^\/?$/]; const TRANSPARENT_NAV_ROUTES = []; //["_homepage", /\/?$/]; -export function TopNavigation({ extraClasses }: { extraClasses?: string }) { +export function TopNavigation() { const location = useLocation(); const [showMainMenu, setShowMainMenu] = useState(false); @@ -30,9 +30,7 @@ export function TopNavigation({ extraClasses }: { extraClasses?: string }) { return (
From 065f9a0681af061281b4b343c2932863bc95f8e2 Mon Sep 17 00:00:00 2001 From: Claas Augner <495429+caugner@users.noreply.github.com> Date: Fri, 22 Sep 2023 16:57:30 +0200 Subject: [PATCH 5/8] Update client/src/blog/post.scss Co-authored-by: Leo McArdle --- client/src/blog/post.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/client/src/blog/post.scss b/client/src/blog/post.scss index 29d0a8417053..91a12dec67ce 100644 --- a/client/src/blog/post.scss +++ b/client/src/blog/post.scss @@ -30,6 +30,7 @@ position: unset; top: auto; } + @media screen and (min-width: $screen-lg) { display: flex; grid-area: toc; From 1637cb18bb14e852c4dd9396670bb0b100e33b1b Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Thu, 28 Sep 2023 10:52:36 +0200 Subject: [PATCH 6/8] reanming and moving to resize observer --- client/src/app.scss | 15 ++---- client/src/app.tsx | 2 +- client/src/document/hooks.ts | 46 +++++++------------ client/src/document/index.scss | 6 +-- client/src/document/index.tsx | 4 +- .../ui/molecules/grids/_document-page.scss | 2 +- .../ui/organisms/article-actions/index.scss | 2 +- 7 files changed, 30 insertions(+), 47 deletions(-) diff --git a/client/src/app.scss b/client/src/app.scss index 5a7a53e492d6..0613919bbf76 100644 --- a/client/src/app.scss +++ b/client/src/app.scss @@ -102,9 +102,9 @@ --top-nav-height: 4rem; --article-actions-container-height: 2rem; --icon-size: 1rem; - --sticky-header-standalone-height: calc(var(--top-nav-height) + 1px); - --sticky-header-height: calc( - var(--sticky-header-standalone-height) + + --sticky-header-without-actions-height: calc(var(--top-nav-height) + 1px); + --sticky-header-with-actions-height: calc( + var(--sticky-header-without-actions-height) + var(--article-actions-container-height) + 1px ); } @@ -123,7 +123,7 @@ } :target { - scroll-margin-top: var(--sticky-header-height); + scroll-margin-top: var(--sticky-header-with-actions-height); } body { @@ -343,13 +343,8 @@ sup.new { } } -.main-header-container { - min-height: var(--sticky-header-height); +.sticky-header-container { position: sticky; top: 0; z-index: var(--z-index-main-header); - - &.standalone { - min-height: var(--sticky-header-standalone-height); - } } diff --git a/client/src/app.tsx b/client/src/app.tsx index e7c23b95d261..243208bed85e 100644 --- a/client/src/app.tsx +++ b/client/src/app.tsx @@ -55,7 +55,7 @@ function Layout({ pageType, children }) { > {pageType !== "document-page" && ( -
+
)} diff --git a/client/src/document/hooks.ts b/client/src/document/hooks.ts index 9669fefd75ad..e88bb5868572 100644 --- a/client/src/document/hooks.ts +++ b/client/src/document/hooks.ts @@ -103,42 +103,30 @@ export function useCopyExamplesToClipboardAndAIExplain(doc: Doc | undefined) { * Provides the height of the sticky header. */ export function useStickyHeaderHeight() { - function determineStickyHeaderHeight(): number { - if (typeof getComputedStyle !== "function") { - // SSR. - return 0; - } - - const height = parseFloat( - getComputedStyle( - document.getElementsByClassName("main-header-container")?.[0] || - document.body - )["min-height"] - ); - return Number.isNaN(height) ? 0 : height; - } - - const [height, setHeight] = useState(determineStickyHeaderHeight()); + const [height, setHeight] = useState(0); const timeout = useRef | null>(null); useEffect(() => { - // Unfortunately we cannot observe the CSS variable using MutationObserver, - // but we know that it may change when the width of the window changes. - - const debouncedListener = () => { - if (timeout.current) { - window.clearTimeout(timeout.current); + const header = document.getElementsByClassName( + "sticky-header-container" + )?.[0]; + const resizeObserver = new ResizeObserver((entries) => { + for (const entry of entries) { + const { height } = entry.contentRect; + if (timeout.current) { + window.clearTimeout(timeout.current); + } + timeout.current = setTimeout(() => { + setHeight(height); + timeout.current = null; + }, 250); } - timeout.current = setTimeout(() => { - setHeight(determineStickyHeaderHeight()); - timeout.current = null; - }, 250); - }; + }); - window.addEventListener("resize", debouncedListener); + resizeObserver.observe(header); - return () => window.removeEventListener("resize", debouncedListener); + return () => resizeObserver.disconnect(); }, [setHeight]); return height; diff --git a/client/src/document/index.scss b/client/src/document/index.scss index fb149887e8fc..9eea148e32aa 100644 --- a/client/src/document/index.scss +++ b/client/src/document/index.scss @@ -763,7 +763,7 @@ kbd { } .sidebar-container { - --offset: var(--sticky-header-height); + --offset: var(--sticky-header-with-actions-height); --max-height: calc(100vh - var(--offset)); @media screen and (min-width: $screen-md) and (min-height: $screen-height-place-limit) { @@ -801,7 +801,7 @@ kbd { display: flex; flex-direction: column; gap: 0; - height: calc(100vh - var(--sticky-header-height)); + height: calc(100vh - var(--sticky-header-with-actions-height)); mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, @@ -810,7 +810,7 @@ kbd { ); overflow: auto; position: sticky; - top: var(--sticky-header-height); + top: var(--sticky-header-with-actions-height); .place { margin: 1rem 0; diff --git a/client/src/document/index.tsx b/client/src/document/index.tsx index 6bcb182f68e4..6fd1d0ed35b7 100644 --- a/client/src/document/index.tsx +++ b/client/src/document/index.tsx @@ -189,7 +189,7 @@ export function Document(props /* TODO: define a TS interface for this */) { if (error) { return ( <> -
+
@@ -211,7 +211,7 @@ export function Document(props /* TODO: define a TS interface for this */) { return ( <> -
+
diff --git a/client/src/ui/molecules/grids/_document-page.scss b/client/src/ui/molecules/grids/_document-page.scss index 24ab1d718587..97623596ae4c 100644 --- a/client/src/ui/molecules/grids/_document-page.scss +++ b/client/src/ui/molecules/grids/_document-page.scss @@ -62,7 +62,7 @@ padding-right: 1rem; .toc { - --offset: var(--sticky-header-height); + --offset: var(--sticky-header-with-actions-height); display: block; grid-area: toc; diff --git a/client/src/ui/organisms/article-actions/index.scss b/client/src/ui/organisms/article-actions/index.scss index 23e39fb2c691..df709e2d6123 100644 --- a/client/src/ui/organisms/article-actions/index.scss +++ b/client/src/ui/organisms/article-actions/index.scss @@ -158,7 +158,7 @@ bottom: auto; box-shadow: var(--shadow-02); left: var(--article-actions-position-left, initial); - max-height: calc(100vh - 12px - var(--sticky-header-height)); + max-height: calc(100vh - 12px - var(--sticky-header-with-actions-height)); padding: 0; position: absolute; right: 0; From 49098363ba59f883b1150ca62daaeb25f56d6066 Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Fri, 29 Sep 2023 13:47:02 +0200 Subject: [PATCH 7/8] fix scroll-margin-top without actions --- client/src/app.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/client/src/app.scss b/client/src/app.scss index 0613919bbf76..72f1a36aff69 100644 --- a/client/src/app.scss +++ b/client/src/app.scss @@ -126,6 +126,10 @@ scroll-margin-top: var(--sticky-header-with-actions-height); } +.sticky-header-container.without-actions ~ * :target { + scroll-margin-top: var(--sticky-header-without-actions-height); +} + body { accent-color: var(--accent-primary); // for checkboxes, radios, etc. background-color: var(--background-primary); From 73d492f8a92e7801ac0a38d59c3620245fdf890f Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Fri, 29 Sep 2023 17:22:13 +0200 Subject: [PATCH 8/8] fix(blog): move main-page-content class to article Avoids sidebar being inside the main-page-content, to be consistent with document pages. --- client/src/blog/post.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/client/src/blog/post.tsx b/client/src/blog/post.tsx index 0ed9b4cf2a81..2062a19417ea 100644 --- a/client/src/blog/post.tsx +++ b/client/src/blog/post.tsx @@ -193,7 +193,7 @@ export function BlogPost(props: HydrationData) { return ( <> {doc && blogMeta && ( -
+
-
+
{blogMeta?.sponsored && ( Sponsored