mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-15 07:34:42 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Fix document renderer sizing issues (3/4) (#998)

Browse source 
* Rework renderer columns

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Tilman Vatteroth 2021-02-02 21:53:43 +01:00 • committed by GitHub
parent 123f959fb3
commit f7be49bbc3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 48 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/components/render-page/markdown-document.tsx
View file

@ -17,6 +17,7 @@ import { ScrollProps } from '../editor-page/synced-scroll/scroll-props'
import { TableOfContents } from '../editor-page/table-of-contents/table-of-contents'
import { FullMarkdownRenderer } from '../markdown-renderer/full-markdown-renderer'
import { ImageClickHandler } from '../markdown-renderer/replace-components/image/image-replacer'
import './markdown-document.scss'
export interface MarkdownDocumentProps extends ScrollProps {
extraClasses?: string
@ -53,33 +54,32 @@ export const MarkdownDocument: React.FC<MarkdownDocumentProps> = (
const [onLineMarkerPositionChanged, onUserScroll] = useSyncedScrolling(internalDocumentRenderPaneRef, rendererRef, contentLineCount, scrollState, onScroll)
return (
<div className={`overflow-y-scroll h-100 bg-light m-0 pb-5 row ${extraClasses ?? ''}`}
<div className={`markdown-document ${extraClasses ?? ''}`}
ref={internalDocumentRenderPaneRef} onScroll={onUserScroll} onMouseEnter={onMakeScrollSource}>
<div className={'col-md d-none d-md-block'}/>
<div className={'bg-light col'}>
<div className={'markdown-document-side'}/>
<div className={'bg-light markdown-document-content'}>
<YamlArrayDeprecationAlert/>
<div>
<FullMarkdownRenderer
rendererRef={rendererRef}
className={'flex-fill pt-4 mb-3'}
content={markdownContent}
onFirstHeadingChange={onFirstHeadingChange}
onLineMarkerPositionChanged={onLineMarkerPositionChanged}
onFrontmatterChange={onFrontmatterChange}
onTaskCheckedChange={onTaskCheckedChange}
onTocChange={(tocAst) => setTocAst(tocAst)}
wide={wide}
baseUrl={baseUrl}
onImageClick={onImageClick}/>
</div>
<FullMarkdownRenderer
rendererRef={rendererRef}
className={'flex-fill pt-4 mb-3'}
content={markdownContent}
onFirstHeadingChange={onFirstHeadingChange}
onLineMarkerPositionChanged={onLineMarkerPositionChanged}
onFrontmatterChange={onFrontmatterChange}
onTaskCheckedChange={onTaskCheckedChange}
onTocChange={(tocAst) => setTocAst(tocAst)}
wide={wide}
baseUrl={baseUrl}
onImageClick={onImageClick}/>
</div>
<div className={'col-md pt-4'}>
<div className={'markdown-document-side pt-4'}>
<ShowIf condition={!!tocAst}>
<ShowIf condition={width >= 1280}>
<ShowIf condition={width >= 1100}>
<TableOfContents ast={tocAst as TocAst} className={'sticky'} baseUrl={baseUrl}/>
</ShowIf>
<ShowIf condition={width < 1280}>
<ShowIf condition={width < 1100}>
<div className={'markdown-toc-sidebar-button'}>
<Dropdown drop={'up'}>
<Dropdown.Toggle id="toc-overlay-button" variant={'secondary'} className={'no-arrow'}>