github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-12-22 23:42:15 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix: sticky position of toc sidebar

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-04-20 20:13:19 +02:00
parent 60c7305719
commit 927193e4b9
4 changed files with 5 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/global-styles/index.scss
View file

@ -30,18 +30,6 @@ body {
background-color: $dark;
}
#__next {
height: 100vh;
}
html {
height: 100%;
}
body {
min-height: 100%;
}
*:focus {
outline: 0 !important;
}

2
frontend/src/components/render-page/renderers/document/document-toc-sidebar.tsx
View file

@ -20,7 +20,7 @@ export const DocumentTocSidebar: React.FC<DocumentTocSidebarProps> = ({ width, b
const [tocAst, setTocAst] = useState<TocAst>()
useExtensionEventEmitterHandler(TableOfContentsMarkdownExtension.EVENT_NAME, setTocAst)
return (
<div className={`${styles['markdown-document-side']} pt-4`}>
<div className={styles['markdown-document-side']}>
<ShowIf condition={!!tocAst}>
<WidthBasedTableOfContents tocAst={tocAst as TocAst} baseUrl={baseUrl} width={width} />
</ShowIf>

3
frontend/src/components/render-page/renderers/document/markdown-document.module.scss
View file

@ -13,6 +13,9 @@
flex-direction: row;
.markdown-document-side {
position: sticky;
top: 0;
bottom: 0;
flex: 1 0 0;
}

2
frontend/src/components/render-page/renderers/document/width-based-table-of-contents.tsx
View file

@ -26,7 +26,7 @@ const MAX_WIDTH_FOR_BUTTON_VISIBILITY = 1100
*/
export const WidthBasedTableOfContents: React.FC<DocumentExternalTocProps> = ({ tocAst, width, baseUrl }) => {
if (width >= MAX_WIDTH_FOR_BUTTON_VISIBILITY) {
return <TableOfContents ast={tocAst} className={'sticky'} baseUrl={baseUrl} />
return <TableOfContents ast={tocAst} baseUrl={baseUrl} />
} else {
return <TableOfContentsHoveringButton tocAst={tocAst} baseUrl={baseUrl} />
}