From 6d7a6ade27ad0c39e5fc2bc706e635281313fd01 Mon Sep 17 00:00:00 2001 From: pintusoliya <37680791+pintusoliya@users.noreply.github.com> Date: Thu, 29 Aug 2024 05:31:29 +0530 Subject: [PATCH] docs table horizontal scroll fix (#11845) --- website/src/css/custom.css | 13 ++++ .../src/theme/DocRoot/Layout/Main/index.js | 23 ++++++ .../DocRoot/Layout/Main/styles.module.css | 21 ++++++ .../Layout/Sidebar/ExpandButton/index.js | 28 ++++++++ .../Sidebar/ExpandButton/styles.module.css | 27 +++++++ .../src/theme/DocRoot/Layout/Sidebar/index.js | 70 +++++++++++++++++++ .../DocRoot/Layout/Sidebar/styles.module.css | 32 +++++++++ website/src/theme/DocRoot/Layout/index.js | 27 +++++++ .../theme/DocRoot/Layout/styles.module.css | 9 +++ website/src/theme/DocRoot/index.js | 30 ++++++++ .../LocaleDropdownNavbarItem/index.js | 2 +- .../styles.module.css | 13 ---- 12 files changed, 281 insertions(+), 14 deletions(-) create mode 100644 website/src/theme/DocRoot/Layout/Main/index.js create mode 100644 website/src/theme/DocRoot/Layout/Main/styles.module.css create mode 100644 website/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.js create mode 100644 website/src/theme/DocRoot/Layout/Sidebar/ExpandButton/styles.module.css create mode 100644 website/src/theme/DocRoot/Layout/Sidebar/index.js create mode 100644 website/src/theme/DocRoot/Layout/Sidebar/styles.module.css create mode 100644 website/src/theme/DocRoot/Layout/index.js create mode 100644 website/src/theme/DocRoot/Layout/styles.module.css create mode 100644 website/src/theme/DocRoot/index.js diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 8c2932f5bdfa..83bfd6188534 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -436,6 +436,19 @@ h1.blogPostTitle_src-theme-BlogPostItem-styles-module{ margin-left: 8px; } +.locale-dropdown-wrapper { + display: flex; + align-items: center; + &:hover { + path { + stroke: var(--ifm-navbar-link-hover-color); + } + } + &:after { + display: none !important; + } +} + @media(max-width:1524px) { .navbar__item { padding: var(--ifm-navbar-item-padding-vertical) 7px; diff --git a/website/src/theme/DocRoot/Layout/Main/index.js b/website/src/theme/DocRoot/Layout/Main/index.js new file mode 100644 index 000000000000..dd794ca18d13 --- /dev/null +++ b/website/src/theme/DocRoot/Layout/Main/index.js @@ -0,0 +1,23 @@ +import React from 'react'; +import clsx from 'clsx'; +import {useDocsSidebar} from '@docusaurus/plugin-content-docs/client'; +import styles from './styles.module.css'; +export default function DocRootLayoutMain({hiddenSidebarContainer, children}) { + const sidebar = useDocsSidebar(); + return ( +
+
+ {children} +
+
+ ); +} diff --git a/website/src/theme/DocRoot/Layout/Main/styles.module.css b/website/src/theme/DocRoot/Layout/Main/styles.module.css new file mode 100644 index 000000000000..096eb0649021 --- /dev/null +++ b/website/src/theme/DocRoot/Layout/Main/styles.module.css @@ -0,0 +1,21 @@ +.docMainContainer { + display: flex; + width: 100%; +} + +@media (min-width: 997px) { + .docMainContainer { + flex-grow: 1; + max-width: calc(100% - var(--doc-sidebar-width)); + } + + .docMainContainerEnhanced { + max-width: calc(100% - var(--doc-sidebar-hidden-width)); + } + + .docItemWrapperEnhanced { + max-width: calc( + var(--ifm-container-width) + var(--doc-sidebar-width) + ) !important; + } +} diff --git a/website/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.js b/website/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.js new file mode 100644 index 000000000000..c3a354687a6b --- /dev/null +++ b/website/src/theme/DocRoot/Layout/Sidebar/ExpandButton/index.js @@ -0,0 +1,28 @@ +import React from 'react'; +import {translate} from '@docusaurus/Translate'; +import IconArrow from '@theme/Icon/Arrow'; +import styles from './styles.module.css'; +export default function DocRootLayoutSidebarExpandButton({toggleSidebar}) { + return ( +
+ +
+ ); +} diff --git a/website/src/theme/DocRoot/Layout/Sidebar/ExpandButton/styles.module.css b/website/src/theme/DocRoot/Layout/Sidebar/ExpandButton/styles.module.css new file mode 100644 index 000000000000..f4cd944d83c8 --- /dev/null +++ b/website/src/theme/DocRoot/Layout/Sidebar/ExpandButton/styles.module.css @@ -0,0 +1,27 @@ +@media (min-width: 997px) { + .expandButton { + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + transition: background-color var(--ifm-transition-fast) ease; + background-color: var(--docusaurus-collapse-button-bg); + } + + .expandButton:hover, + .expandButton:focus { + background-color: var(--docusaurus-collapse-button-bg-hover); + } + + .expandButtonIcon { + transform: rotate(0); + } + + [dir='rtl'] .expandButtonIcon { + transform: rotate(180deg); + } +} diff --git a/website/src/theme/DocRoot/Layout/Sidebar/index.js b/website/src/theme/DocRoot/Layout/Sidebar/index.js new file mode 100644 index 000000000000..5c0ff425df94 --- /dev/null +++ b/website/src/theme/DocRoot/Layout/Sidebar/index.js @@ -0,0 +1,70 @@ +import React, {useState, useCallback} from 'react'; +import clsx from 'clsx'; +import {prefersReducedMotion, ThemeClassNames} from '@docusaurus/theme-common'; +import {useDocsSidebar} from '@docusaurus/plugin-content-docs/client'; +import {useLocation} from '@docusaurus/router'; +import DocSidebar from '@theme/DocSidebar'; +import ExpandButton from '@theme/DocRoot/Layout/Sidebar/ExpandButton'; +import styles from './styles.module.css'; +// Reset sidebar state when sidebar changes +// Use React key to unmount/remount the children +// See https://github.com/facebook/docusaurus/issues/3414 +function ResetOnSidebarChange({children}) { + const sidebar = useDocsSidebar(); + return ( + + {children} + + ); +} +export default function DocRootLayoutSidebar({ + sidebar, + hiddenSidebarContainer, + setHiddenSidebarContainer, +}) { + const {pathname} = useLocation(); + const [hiddenSidebar, setHiddenSidebar] = useState(false); + const toggleSidebar = useCallback(() => { + if (hiddenSidebar) { + setHiddenSidebar(false); + } + // onTransitionEnd won't fire when sidebar animation is disabled + // fixes https://github.com/facebook/docusaurus/issues/8918 + if (!hiddenSidebar && prefersReducedMotion()) { + setHiddenSidebar(true); + } + setHiddenSidebarContainer((value) => !value); + }, [setHiddenSidebarContainer, hiddenSidebar]); + return ( + + ); +} diff --git a/website/src/theme/DocRoot/Layout/Sidebar/styles.module.css b/website/src/theme/DocRoot/Layout/Sidebar/styles.module.css new file mode 100644 index 000000000000..221aabf56422 --- /dev/null +++ b/website/src/theme/DocRoot/Layout/Sidebar/styles.module.css @@ -0,0 +1,32 @@ +:root { + --doc-sidebar-width: 300px; + --doc-sidebar-hidden-width: 30px; +} + +.docSidebarContainer { + display: none; +} + +@media (min-width: 997px) { + .docSidebarContainer { + display: block; + width: var(--doc-sidebar-width); + margin-top: calc(-1 * var(--ifm-navbar-height)); + border-right: 1px solid var(--ifm-toc-border-color); + will-change: width; + transition: width var(--ifm-transition-fast) ease; + clip-path: inset(0); + } + + .docSidebarContainerHidden { + width: var(--doc-sidebar-hidden-width); + cursor: pointer; + } + + .sidebarViewport { + top: 0; + position: sticky; + height: 100%; + max-height: 100vh; + } +} diff --git a/website/src/theme/DocRoot/Layout/index.js b/website/src/theme/DocRoot/Layout/index.js new file mode 100644 index 000000000000..62b846519811 --- /dev/null +++ b/website/src/theme/DocRoot/Layout/index.js @@ -0,0 +1,27 @@ +import React, {useState} from 'react'; +import {useDocsSidebar} from '@docusaurus/plugin-content-docs/client'; +import BackToTopButton from '@theme/BackToTopButton'; +import DocRootLayoutSidebar from '@theme/DocRoot/Layout/Sidebar'; +import DocRootLayoutMain from '@theme/DocRoot/Layout/Main'; +import styles from './styles.module.css'; +export default function DocRootLayout({children}) { + const sidebar = useDocsSidebar(); + const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false); + return ( +
+ +
+ {sidebar && ( + + )} + + {children} + +
+
+ ); +} diff --git a/website/src/theme/DocRoot/Layout/styles.module.css b/website/src/theme/DocRoot/Layout/styles.module.css new file mode 100644 index 000000000000..a77c97589869 --- /dev/null +++ b/website/src/theme/DocRoot/Layout/styles.module.css @@ -0,0 +1,9 @@ +.docRoot { + display: flex; + width: 100%; +} + +.docsWrapper { + display: flex; + flex: 1 0 auto; +} diff --git a/website/src/theme/DocRoot/index.js b/website/src/theme/DocRoot/index.js new file mode 100644 index 000000000000..9154864d7585 --- /dev/null +++ b/website/src/theme/DocRoot/index.js @@ -0,0 +1,30 @@ +import React from 'react'; +import clsx from 'clsx'; +import {HtmlClassNameProvider, ThemeClassNames} from '@docusaurus/theme-common'; +import { + DocsSidebarProvider, + useDocRootMetadata, +} from '@docusaurus/plugin-content-docs/client'; +import DocRootLayout from '@theme/DocRoot/Layout'; +import NotFoundContent from '@theme/NotFound/Content'; + +const arrayOfPages = (matchPath) => [`${matchPath}/configurations`, `${matchPath}/basic_configurations`, `${matchPath}/timeline`, `${matchPath}/table_types`, `${matchPath}/migration_guide`, `${matchPath}/compaction`, `${matchPath}/clustering`, `${matchPath}/indexing`, `${matchPath}/metadata`, `${matchPath}/metadata_indexing`, `${matchPath}/record_payload`, `${matchPath}/file_sizing`, `${matchPath}/hoodie_cleaner`, `${matchPath}/concurrency_control`, , `${matchPath}/write_operations`, `${matchPath}/key_generation`]; +const showCustomStylesForDocs = (matchPath, pathname) => arrayOfPages(matchPath).includes(pathname); + +export default function DocRoot(props) { + const currentDocRouteMetadata = useDocRootMetadata(props); + if (!currentDocRouteMetadata) { + // We only render the not found content to avoid a double layout + // see https://github.com/facebook/docusaurus/pull/7966#pullrequestreview-1077276692 + return ; + } + const {docElement, sidebarName, sidebarItems} = currentDocRouteMetadata; + const addCustomClass = showCustomStylesForDocs(props.match.path, props.location.pathname) + return ( + + + {docElement} + + + ); +} diff --git a/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.js b/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.js index 9699207c589e..baa803b41158 100644 --- a/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.js +++ b/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.js @@ -57,7 +57,7 @@ export default function LocaleDropdownNavbarItem({ diff --git a/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css b/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css index e77b41ecaf65..b7bb8d2f316c 100644 --- a/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css +++ b/website/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css @@ -6,16 +6,3 @@ .globeIcon { margin-left: 5.5px; } - -.wrapper { - display: flex; - align-items: center; - &:hover { - path { - stroke: var(--ifm-navbar-link-hover-color); - } - } - &:after { - display: none !important; - } -}