3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-12 16:47:26 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(v2): removes hardcoded sidebar width (#1535)

Browse source 
* fix(v2): removes hardcoded sidebar width

* fix(v2): remove grid layout and keep fixed width of sidebar
This commit is contained in:
Tushar Sharma 2019-06-05 10:23:53 +05:30 • committed by Yangshun Tay
parent c66ae5a507
commit ec69460b4f
4 changed files with 39 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/docusaurus-plugin-content-docs/src/theme/DocItem/index.js
View file

@ -36,7 +36,7 @@ function DocItem(props) {
<Head> <Head>
{metadata && metadata.title && <title>{metadata.title}</title>} {metadata && metadata.title && <title>{metadata.title}</title>}
</Head> </Head>
<div className="container margin-vert--lg"> <div className={`${styles.container} container margin-bottom--lg`}>
<div className="row"> <div className="row">
<div className="col col--8"> <div className="col col--8">
<header> <header>

10
packages/docusaurus-plugin-content-docs/src/theme/DocItem/styles.module.css
View file

@ -9,6 +9,16 @@
min-height: calc(100vh - 50px); min-height: calc(100vh - 50px);
} }
.container {
padding-top: 2rem !important;
}
@media (min-width: 996px) {
.container {
padding-left: 2rem;
}
}
@media only screen and (min-width: 996px) { @media only screen and (min-width: 996px) {
.tableOfContents { .tableOfContents {
max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem)); max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));

8
packages/docusaurus-plugin-content-docs/src/theme/DocPage/index.js
View file

@ -12,6 +12,8 @@ import Layout from '@theme/Layout'; // eslint-disable-line
import DocSidebar from '@theme/DocSidebar'; import DocSidebar from '@theme/DocSidebar';
import './styles.css';
function DocPage(props) { function DocPage(props) {
const {route, docsMetadata, location} = props; const {route, docsMetadata, location} = props;
const {permalinkToId} = docsMetadata; const {permalinkToId} = docsMetadata;
@ -24,11 +26,11 @@ function DocPage(props) {
return ( return (
<Layout noFooter description={description}> <Layout noFooter description={description}>
<div className="container container--fluid"> <div className="container container--fluid">
<div className="row"> <div>
<div className="col col--3"> <div className="sidebar__container">
<DocSidebar docsMetadata={docsMetadata} sidebar={sidebar} /> <DocSidebar docsMetadata={docsMetadata} sidebar={sidebar} />
</div> </div>
<div className="col col--9"> <div className="content__container">
{renderRoutes(route.routes, {docsMetadata})} {renderRoutes(route.routes, {docsMetadata})}
</div> </div>
</div> </div>

23
packages/docusaurus-plugin-content-docs/src/theme/DocPage/styles.css Normal file
View file

@ -0,0 +1,23 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* width 19rem is calculated according to (sidebarWidth - sidebarPadding)
* i.e 20rem - ( 0.5rem + 0.5rem )
* Todo - 0.5rem and 20rem should be a css variable
*/
@media (min-width: 996px) {
.sidebar__container {
width: 19rem;
float: left;
min-height: calc(100vh - var(--ifm-navbar-height));
}
.content__container {
margin: 0 0 0 19rem;
}
}