From 216c262bf2833ab7a6883331f971abbdfcc74a49 Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Mon, 28 Mar 2022 08:51:07 +0200 Subject: [PATCH 1/8] fix(techdocs): mobile sidebar width Signed-off-by: Camila Belo --- .../techdocs/src/reader/components/Reader.tsx | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index 9ce9ad5d6d..0d7615fab3 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -450,12 +450,6 @@ export const useTechDocsReaderDom = ( scrollbar-color: rgb(193, 193, 193) #eee; scrollbar-width: thin; } - .md-sidebar .md-sidebar__scrollwrap { - width: calc(16rem - 10px); - } - .md-sidebar--secondary { - right: ${theme.spacing(3)}px; - } .md-sidebar::-webkit-scrollbar { width: 5px; } @@ -478,6 +472,12 @@ export const useTechDocsReaderDom = ( .md-sidebar::-webkit-scrollbar-thumb:hover { background: rgb(125, 125, 125); } + .md-sidebar--secondary { + right: ${theme.spacing(3)}px; + } + .md-sidebar__scrollwrap { + overflow: unset !important; + } .md-content { max-width: calc(100% - 16rem * 2); @@ -556,15 +556,18 @@ export const useTechDocsReaderDom = ( height: 100%; } .md-sidebar--primary { - width: 12.1rem !important; + width: 16rem !important; z-index: 200; left: ${ - isPinned ? 'calc(-12.1rem + 242px)' : 'calc(-12.1rem + 72px)' + isPinned ? 'calc(-16rem + 242px)' : 'calc(-16rem + 72px)' } !important; } .md-sidebar--secondary:not([hidden]) { display: none; } + [data-md-toggle=drawer]:checked~.md-container .md-sidebar--primary { + transform: translateX(16rem); + } .md-content { max-width: 100%; @@ -593,8 +596,8 @@ export const useTechDocsReaderDom = ( @media screen and (max-width: 600px) { .md-sidebar--primary { - left: -12.1rem !important; - width: 12.1rem; + left: -16rem !important; + width: 16rem; } } `, From e56bcbfb0ccaa65d3f4ff21235a1a00a4a5f8389 Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Mon, 28 Mar 2022 09:05:16 +0200 Subject: [PATCH 2/8] fix(techdocs): footer link width Signed-off-by: Camila Belo --- plugins/techdocs/src/reader/components/Reader.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index 0d7615fab3..6d180b1d50 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -492,7 +492,7 @@ export const useTechDocsReaderDom = ( .md-footer__title { background-color: unset; } - .md-footer-nav__link { + .md-footer__link, .md-footer-nav__link { width: 16rem; } @@ -588,7 +588,7 @@ export const useTechDocsReaderDom = ( position: static; padding-left: 0; } - .md-footer-nav__link { + .md-footer__link, .md-footer-nav__link { /* footer links begin to overlap at small sizes without setting width */ width: 50%; } From 52708317f9aafb9a0cd743b72d1e9963c91efc14 Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Mon, 28 Mar 2022 09:09:46 +0200 Subject: [PATCH 3/8] fix(techdocs): inner content width Signed-off-by: Camila Belo --- plugins/techdocs/src/reader/components/Reader.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index 6d180b1d50..5391863b50 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -573,6 +573,9 @@ export const useTechDocsReaderDom = ( max-width: 100%; margin-left: 0; } + .md-content__inner { + margin: 0; + } .md-header__button { margin: 0.4rem 0; From bf4d0528971fe42f9ce4efebb05348ef12307bd4 Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Mon, 28 Mar 2022 10:44:43 +0200 Subject: [PATCH 4/8] fix(techdocs): code block margins Signed-off-by: Camila Belo --- plugins/techdocs/src/reader/components/Reader.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index 5391863b50..02a7929539 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -576,6 +576,10 @@ export const useTechDocsReaderDom = ( .md-content__inner { margin: 0; } + .md-content__inner .highlighttable { + max-width: 100%; + margin: 1em 0; + } .md-header__button { margin: 0.4rem 0; @@ -707,7 +711,7 @@ export const useTechDocsReaderDom = ( .highlight .md-clipboard:after { content: unset; } - + .highlight .nx { color: ${isDarkTheme ? '#ff53a3' : '#ec407a'}; } From 49f646a9c953ffea3bce348563d5fbfe94312abe Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Mon, 28 Mar 2022 10:45:46 +0200 Subject: [PATCH 5/8] fix(techdocs): drawer toggle margins Signed-off-by: Camila Belo --- .../techdocs/src/reader/transformers/addSidebarToggle.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/plugins/techdocs/src/reader/transformers/addSidebarToggle.ts b/plugins/techdocs/src/reader/transformers/addSidebarToggle.ts index 9d9db15e45..69256d3ed6 100644 --- a/plugins/techdocs/src/reader/transformers/addSidebarToggle.ts +++ b/plugins/techdocs/src/reader/transformers/addSidebarToggle.ts @@ -34,10 +34,11 @@ export const addSidebarToggle = (): Transformer => { const toggleSidebar = mkdocsToggleSidebar.cloneNode() as HTMLLabelElement; ReactDOM.render(React.createElement(MenuIcon), toggleSidebar); - toggleSidebar.style.paddingLeft = '5px'; - toggleSidebar.classList.add('md-content__button'); - toggleSidebar.title = 'Toggle Sidebar'; toggleSidebar.id = 'toggle-sidebar'; + toggleSidebar.title = 'Toggle Sidebar'; + toggleSidebar.classList.add('md-content__button'); + toggleSidebar.style.setProperty('padding', '0 0 0 5px'); + toggleSidebar.style.setProperty('margin', '0.4rem 0 0.4rem 0.4rem'); article?.prepend(toggleSidebar); return dom; }; From 0152c0de2290fa9391c6008e13a267e7feaba6b1 Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Mon, 28 Mar 2022 10:50:24 +0200 Subject: [PATCH 6/8] fix(techdocs): add changeset file Signed-off-by: Camila Belo --- .changeset/techdocs-parents-suffer.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 .changeset/techdocs-parents-suffer.md diff --git a/.changeset/techdocs-parents-suffer.md b/.changeset/techdocs-parents-suffer.md new file mode 100644 index 0000000000..8e366dd506 --- /dev/null +++ b/.changeset/techdocs-parents-suffer.md @@ -0,0 +1,12 @@ +--- +'@backstage/plugin-techdocs': patch +--- + +Some documentation layout tweaks: + +- drawer toggle margins +- code block margins +- sidebar drawer width +- inner content width +- footer link width +- sidebar table of contents scroll From e8d84d2ee6969e64dee30c61cf217c92b6bfb375 Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Mon, 28 Mar 2022 13:45:00 +0200 Subject: [PATCH 7/8] fix(techdocs): use sidebar config Signed-off-by: Camila Belo --- plugins/techdocs/src/reader/components/Reader.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index 02a7929539..b3cb8ec6ae 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -38,7 +38,10 @@ import { CompoundEntityRef } from '@backstage/catalog-model'; import { useApi, configApiRef } from '@backstage/core-plugin-api'; import { scmIntegrationsApiRef } from '@backstage/integration-react'; import { BackstageTheme } from '@backstage/theme'; -import { SidebarPinStateContext } from '@backstage/core-components'; +import { + sidebarConfig, + SidebarPinStateContext, +} from '@backstage/core-components'; import { techdocsStorageApiRef } from '../../api'; @@ -559,7 +562,9 @@ export const useTechDocsReaderDom = ( width: 16rem !important; z-index: 200; left: ${ - isPinned ? 'calc(-16rem + 242px)' : 'calc(-16rem + 72px)' + isPinned + ? `calc(-16rem + ${sidebarConfig.drawerWidthOpen}px)` + : `calc(-16rem + ${sidebarConfig.drawerWidthClosed}px)` } !important; } .md-sidebar--secondary:not([hidden]) { From 179b5070fc6418c74223b32dc287c722b347e513 Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Mon, 28 Mar 2022 14:54:45 +0200 Subject: [PATCH 8/8] fix(techdocs): apply review suggestion Signed-off-by: Camila Belo --- plugins/techdocs/src/reader/components/Reader.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index b3cb8ec6ae..28453b8201 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -611,6 +611,9 @@ export const useTechDocsReaderDom = ( left: -16rem !important; width: 16rem; } + .md-sidebar--primary .md-sidebar__scrollwrap { + bottom: ${sidebarConfig.mobileSidebarHeight}px; + } } `, }),