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 (
<div
className={`${styles['markdown-document']} vh-100`}
className={`${styles.document} vh-100`}
ref={internalDocumentRenderPaneRef}
onScroll={onUserScroll}
data-scroll-element={true}
onMouseEnter={onMakeScrollSource}
onTouchStart={onMakeScrollSource}>
<div className={styles['markdown-document-side']} />
<div className={styles['markdown-document-content']}>
<div className={styles.side} />
<div className={styles.content}>
<div ref={rendererRef} className={`position-relative`}>
<div
{...cypressId('markdown-body')}

View file

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

View file

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