From dfe387417ed7eb2899733fbf1eb9e63ed0a0f2ac Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sat, 27 Feb 2021 16:03:43 +0300 Subject: [PATCH 1/3] fix(v2): fit footer in viewport when content area is too small --- .../src/theme/DocPage/styles.module.css | 1 + .../src/theme/DocSidebar/styles.module.css | 3 ++- packages/docusaurus-theme-classic/src/theme/Layout/styles.css | 1 + 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css index 8cc65e99ce89..ed791f83757d 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css @@ -12,6 +12,7 @@ @media (min-width: 997px) { .docPage { display: flex; + width: 100%; } .docMainContainer { diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css index a1de555cdab8..9a1267cd4004 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css @@ -13,7 +13,8 @@ .sidebar { display: flex; flex-direction: column; - height: 100vh; + max-height: 100vh; + height: 100%; position: sticky; top: 0; padding-top: var(--ifm-navbar-height); diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/styles.css b/packages/docusaurus-theme-classic/src/theme/Layout/styles.css index a22555524a80..0b0a157629d9 100644 --- a/packages/docusaurus-theme-classic/src/theme/Layout/styles.css +++ b/packages/docusaurus-theme-classic/src/theme/Layout/styles.css @@ -23,4 +23,5 @@ body { .main-wrapper { flex: 1 0 auto; + display: flex; } From e48abc037a6cfdd32ab8e2b9baf51ea72d4d2e3f Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sat, 27 Feb 2021 16:39:39 +0300 Subject: [PATCH 2/3] Fix --- .../src/theme/DocPage/index.tsx | 164 +++++++++--------- .../src/theme/DocPage/styles.module.css | 15 +- .../src/theme/Layout/styles.css | 1 - 3 files changed, 92 insertions(+), 88 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx index df33dcf7a40d..de850847a777 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx @@ -11,6 +11,7 @@ import {MDXProvider} from '@mdx-js/react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import renderRoutes from '@docusaurus/renderRoutes'; import type {PropVersionMetadata} from '@docusaurus/plugin-content-docs-types'; +import Head from '@docusaurus/Head'; import Layout from '@theme/Layout'; import DocSidebar from '@theme/DocSidebar'; import MDXComponents from '@theme/MDXComponents'; @@ -52,86 +53,93 @@ function DocPageContent({ }, [hiddenSidebar]); return ( - -
- {sidebar && ( -
{ - if ( - !e.currentTarget.classList.contains(styles.docSidebarContainer) - ) { - return; - } + <> + + + + +
+ {sidebar && ( +
{ + if ( + !e.currentTarget.classList.contains( + styles.docSidebarContainer, + ) + ) { + return; + } - if (hiddenSidebarContainer) { - setHiddenSidebar(true); - } - }} - role="complementary"> - + if (hiddenSidebarContainer) { + setHiddenSidebar(true); + } + }} + role="complementary"> + - {hiddenSidebar && ( -
- -
- )} -
- )} -
-
- {children} -
-
-
- + {hiddenSidebar && ( +
+ +
+ )} +
+ )} +
+
+ {children} +
+
+
+ + ); } diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css index ed791f83757d..19d9ac8b2718 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css @@ -9,12 +9,13 @@ --doc-sidebar-width: 300px; } -@media (min-width: 997px) { - .docPage { - display: flex; - width: 100%; - } +.docPage, +.docMainContainer { + display: flex; + width: 100%; +} +@media (min-width: 997px) { .docMainContainer { flex-grow: 1; max-width: calc(100% - var(--doc-sidebar-width)); @@ -72,10 +73,6 @@ } @media (max-width: 996px) { - .docPage { - display: inherit; - } - .docSidebarContainer { margin-top: 0; } diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/styles.css b/packages/docusaurus-theme-classic/src/theme/Layout/styles.css index 0b0a157629d9..a22555524a80 100644 --- a/packages/docusaurus-theme-classic/src/theme/Layout/styles.css +++ b/packages/docusaurus-theme-classic/src/theme/Layout/styles.css @@ -23,5 +23,4 @@ body { .main-wrapper { flex: 1 0 auto; - display: flex; } From ee839f51d61bf1020c642aa6374bf26c9f225eb1 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 3 Mar 2021 02:15:41 +0300 Subject: [PATCH 3/3] Better solution --- .../src/theme/DocPage/index.tsx | 165 +++++++++--------- .../src/theme/DocPage/styles.module.css | 4 + 2 files changed, 83 insertions(+), 86 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx index de850847a777..242cacfd6a17 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx @@ -11,7 +11,6 @@ import {MDXProvider} from '@mdx-js/react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import renderRoutes from '@docusaurus/renderRoutes'; import type {PropVersionMetadata} from '@docusaurus/plugin-content-docs-types'; -import Head from '@docusaurus/Head'; import Layout from '@theme/Layout'; import DocSidebar from '@theme/DocSidebar'; import MDXComponents from '@theme/MDXComponents'; @@ -53,93 +52,87 @@ function DocPageContent({ }, [hiddenSidebar]); return ( - <> - - - - -
- {sidebar && ( -
{ - if ( - !e.currentTarget.classList.contains( - styles.docSidebarContainer, - ) - ) { - return; - } + +
+ {sidebar && ( +
{ + if ( + !e.currentTarget.classList.contains(styles.docSidebarContainer) + ) { + return; + } - if (hiddenSidebarContainer) { - setHiddenSidebar(true); - } - }} - role="complementary"> - + if (hiddenSidebarContainer) { + setHiddenSidebar(true); + } + }} + role="complementary"> + - {hiddenSidebar && ( -
- -
- )} -
- )} -
-
- {children} -
-
-
- - + {hiddenSidebar && ( +
+ +
+ )} +
+ )} +
+
+ {children} +
+
+
+ ); } diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css index 19d9ac8b2718..f5511946c72f 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css @@ -9,6 +9,10 @@ --doc-sidebar-width: 300px; } +:global(.main-docs-wrapper) { + display: flex; +} + .docPage, .docMainContainer { display: flex;