refactor(toc): rename css classes

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-06-06 22:07:28 +02:00
parent 2b593ed4fe
commit 450d70961a
3 changed files with 8 additions and 7 deletions

View file

@ -71,14 +71,14 @@ export const DocumentMarkdownRenderer: React.FC<DocumentMarkdownRendererProps> =
return ( return (
<div <div
className={`${styles['markdown-document']} vh-100`} className={`${styles.document} vh-100`}
ref={internalDocumentRenderPaneRef} ref={internalDocumentRenderPaneRef}
onScroll={onUserScroll} onScroll={onUserScroll}
data-scroll-element={true} data-scroll-element={true}
onMouseEnter={onMakeScrollSource} onMouseEnter={onMakeScrollSource}
onTouchStart={onMakeScrollSource}> onTouchStart={onMakeScrollSource}>
<div className={styles['markdown-document-side']} /> <div className={styles.side} />
<div className={styles['markdown-document-content']}> <div className={styles.content}>
<div ref={rendererRef} className={`position-relative`}> <div ref={rendererRef} className={`position-relative`}>
<div <div
{...cypressId('markdown-body')} {...cypressId('markdown-body')}

View file

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

View file

@ -4,7 +4,7 @@
* SPDX-License-Identifier: AGPL-3.0-only * SPDX-License-Identifier: AGPL-3.0-only
*/ */
.markdown-document { .document {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
@ -12,14 +12,14 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.markdown-document-side { .side {
position: sticky; position: sticky;
top: 0; top: 0;
bottom: 0; bottom: 0;
flex: 1 0 0; flex: 1 0 0;
} }
.markdown-document-content { .content {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
flex: 0 0 900px; flex: 0 0 900px;