discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Feature/wrapper for table of contents (#199)

Browse Source 
* update editor layout for TableOfContents
This commit is contained in:
Ilya Y 2023-08-31 12:11:32 +03:00 committed by GitHub
parent 1a233d074d
commit 39e27cc307
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 169 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Editor/Editor.tsx
View File

@ -249,11 +249,7 @@ export const Editor = (props: Props) => {
return (
<>
<div class="row">
<div class="col-md-5">
<Show when={isDesktop() && html()}>
<TableOfContents variant="editor" parentSelector="#editorBody" body={html()} />
</Show>
</div>
<div class="col-md-5" />
<div class="col-md-12">
<div ref={(el) => (editorElRef.current = el)} id="editorBody" />
</div>

9
src/components/Views/Edit.module.scss
View File

@ -215,3 +215,12 @@
background-repeat: no-repeat;
}
}
.wrapperTableOfContents {
position: sticky;
left: 0;
top: 0;
margin-bottom: -157px;
width: 240px;
padding-top: 100px;
}

10
src/components/Views/Edit.tsx
View File

@ -22,6 +22,8 @@ import { AutoSaveNotice } from '../Editor/AutoSaveNotice'
import { PublishSettings } from './PublishSettings'
import { createStore } from 'solid-js/store'
import SimplifiedEditor from '../Editor/SimplifiedEditor'
import { isDesktop } from '../../utils/media-query'
import { TableOfContents } from '../TableOfContents'
type Props = {
shout: Shout
@ -247,6 +249,13 @@ export const EditView = (props: Props) => {
<AutoSaveNotice active={saving()} />
<div class="position-relative">
<div class={styles.wrapperTableOfContents}>
<Show when={isDesktop() && form.body}>
<TableOfContents variant="editor" parentSelector="#editorBody" body={form.body} />
</Show>
</div>
<div class="row">
<div class="col-md-19 col-lg-18 col-xl-16 offset-md-5">
<Show when={page().route === 'edit'}>
@ -400,6 +409,7 @@ export const EditView = (props: Props) => {
/>
</Show>
</div>
</div>
</form>
</div>
<Show when={page().route === 'editSettings'}>