mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-16 08:04:45 -04:00
Improve css in preparation for the sync scroll (#380)
* Improve css in preparation for the sync scroll Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de> * Remove scroll behaviour Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
parent
6add1b2f1f
commit
512bca02e7
4 changed files with 7 additions and 16 deletions
|
@ -54,7 +54,7 @@ export const Splitter: React.FC<SplitterProps> = ({ containerClassName, left, ri
|
||||||
</div>
|
</div>
|
||||||
</ShowIf>
|
</ShowIf>
|
||||||
<ShowIf condition={showRight}>
|
<ShowIf condition={showRight}>
|
||||||
<div className='splitter right overflow-y-scroll'>
|
<div className='splitter right'>
|
||||||
{right}
|
{right}
|
||||||
</div>
|
</div>
|
||||||
</ShowIf>
|
</ShowIf>
|
||||||
|
|
|
@ -4,9 +4,7 @@
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
&.sticky {
|
&.sticky {
|
||||||
position: sticky;
|
position: fixed;
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
>ul>li {
|
>ul>li {
|
||||||
|
@ -52,12 +50,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.markdown-toc-sidebar-button {
|
.markdown-toc-sidebar-button {
|
||||||
position: absolute;
|
position: fixed;
|
||||||
height: 100%;
|
right: 40px;
|
||||||
right: 20px;
|
bottom: 20px;
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
&>.dropup {
|
&>.dropup {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
|
|
|
@ -23,7 +23,7 @@ export const MarkdownRenderWindow: React.FC<RenderWindowProps> = ({ content, onM
|
||||||
const realWidth = width || 0
|
const realWidth = width || 0
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={'bg-light flex-fill pb-5 flex-row d-flex min-h-100'} ref={renderer}>
|
<div className={'bg-light flex-fill pb-5 flex-row d-flex w-100 h-100 overflow-y-scroll'} ref={renderer}>
|
||||||
<div className={'col-md'}/>
|
<div className={'col-md'}/>
|
||||||
<MarkdownRenderer
|
<MarkdownRenderer
|
||||||
className={'flex-fill'}
|
className={'flex-fill'}
|
||||||
|
@ -34,7 +34,7 @@ export const MarkdownRenderWindow: React.FC<RenderWindowProps> = ({ content, onM
|
||||||
onFirstHeadingChange={onFirstHeadingChange}
|
onFirstHeadingChange={onFirstHeadingChange}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className={`col-md d-flex flex-column ${realWidth < 1280 ? 'justify-content-end' : ''}`}>
|
<div className={'col-md'}>
|
||||||
<ShowIf condition={realWidth >= 1280 && !!tocAst}>
|
<ShowIf condition={realWidth >= 1280 && !!tocAst}>
|
||||||
<MarkdownToc ast={tocAst as TocAst} sticky={true}/>
|
<MarkdownToc ast={tocAst as TocAst} sticky={true}/>
|
||||||
</ShowIf>
|
</ShowIf>
|
||||||
|
|
|
@ -36,7 +36,3 @@ body {
|
||||||
.overflow-y-scroll {
|
.overflow-y-scroll {
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
.min-h-100 {
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue