mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-13 22:54:42 -04:00
refactor(toc): rename css classes
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
parent
2b593ed4fe
commit
450d70961a
3 changed files with 8 additions and 7 deletions
|
@ -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')}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue