From f3da97ffe814c7fac913012e5207077d539eda6b Mon Sep 17 00:00:00 2001 From: kvakazyambra Date: Thu, 24 Aug 2023 01:31:39 +0300 Subject: [PATCH] Fixed table of contents style --- public/icons/hide-table-of-contents.svg | 5 +- public/icons/show-table-of-contents.svg | 6 +- src/components/Editor/Editor.tsx | 15 +++-- src/components/Editor/Prosemirror.scss | 65 ------------------- .../TableOfContents.module.scss | 25 ++----- .../TableOfContents/TableOfContents.tsx | 7 +- src/components/Views/Edit.module.scss | 4 +- src/components/Views/Edit.tsx | 3 +- 8 files changed, 28 insertions(+), 102 deletions(-) diff --git a/public/icons/hide-table-of-contents.svg b/public/icons/hide-table-of-contents.svg index 6c8b9a0e..f1df16eb 100644 --- a/public/icons/hide-table-of-contents.svg +++ b/public/icons/hide-table-of-contents.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/public/icons/show-table-of-contents.svg b/public/icons/show-table-of-contents.svg index d887df58..8b13672d 100644 --- a/public/icons/show-table-of-contents.svg +++ b/public/icons/show-table-of-contents.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx index 102e599f..d6ccd409 100644 --- a/src/components/Editor/Editor.tsx +++ b/src/components/Editor/Editor.tsx @@ -246,10 +246,17 @@ export const Editor = (props: Props) => { return ( <> -
(editorElRef.current = el)} id="editorBody" /> - - - +
+
+ + + +
+
+
(editorElRef.current = el)} id="editorBody" /> +
+
+ = 768px) { - padding-left: calc(21.9%); - max-width: 72.7%; - } - - @media (width >= 1200px) { - padding-left: calc(21.5% + 1px); - max-width: 64.9%; - } -} - -.articleEditor hr, -.articleEditor blockquote, -.articleEditor figure, -.articleEditor article[data-type='incut'] { - @media (width >= 768px) { - margin-left: calc(21.9% + 3px) !important; - max-width: 73.6%; - } - - @media (width >= 1200px) { - margin-left: calc(21.4% + 3px) !important; - max-width: 65.3%; - } -} - -.articleEditor h2 { - @media (width >= 768px) { - padding-left: calc(21.9% + 2px); - max-width: 72.7%; - } - - @media (width >= 1200px) { - padding-left: 21.5%; - max-width: 87.1%; - } -} - -.articleEditor h3 { - @media (width >= 768px) { - padding-left: calc(21.9% + 2px); - } - - @media (width >= 1200px) { - padding-left: 21.5%; - max-width: 87.1%; - } -} - -.articleEditor * p, -.articleEditor * h2, -.articleEditor * h3, -.articleEditor * h4 { - @media (width >= 768px) { - padding-left: unset; - max-width: unset; - } -} /* Give a remote user a caret */ .collaboration-cursor__caret { diff --git a/src/components/TableOfContents/TableOfContents.module.scss b/src/components/TableOfContents/TableOfContents.module.scss index c6f310a9..36332850 100644 --- a/src/components/TableOfContents/TableOfContents.module.scss +++ b/src/components/TableOfContents/TableOfContents.module.scss @@ -1,9 +1,6 @@ .TableOfContentsFixedWrapper { - position: absolute; - top: 0; - right: 0; - width: 281px; min-height: 100%; + top: 0; } .TableOfContentsFixedWrapperLefted { @@ -13,12 +10,12 @@ .TableOfContentsContainer { position: sticky; - top: 150px; + top: 100px; right: 20px; display: flex; width: 100%; - height: auto; - padding: 20px; + height: calc(100vh - 250px); + overflow: auto; flex-direction: column; align-items: flex-start; background-color: transparent; @@ -41,25 +38,19 @@ .TableOfContentsPrimaryButton { position: absolute; - right: 20px; + right: 0; top: 10px; display: flex; align-items: center; justify-content: center; - width: 40px; - height: 40px; background: transparent; border: none; cursor: pointer; - - &:hover { - box-shadow: 0 0 1px 1px rgb(0 0 0 / 30%); - } } .TableOfContentsPrimaryButtonLefted { right: auto; - left: 20px; + left: 0; } .TableOfContentsHeadingsList { @@ -99,7 +90,3 @@ .TableOfContentsHeadingsItemH4 { padding-left: 16px; } - -.TableOfContentsIconRotated { - transform: rotate(180deg); -} diff --git a/src/components/TableOfContents/TableOfContents.tsx b/src/components/TableOfContents/TableOfContents.tsx index c5d5a5f8..12b4f310 100644 --- a/src/components/TableOfContents/TableOfContents.tsx +++ b/src/components/TableOfContents/TableOfContents.tsx @@ -104,12 +104,7 @@ export const TableOfContents = (props: Props) => { }} > }> - +
diff --git a/src/components/Views/Edit.module.scss b/src/components/Views/Edit.module.scss index b1fb8d2a..27221436 100644 --- a/src/components/Views/Edit.module.scss +++ b/src/components/Views/Edit.module.scss @@ -133,7 +133,7 @@ pointer-events: none; user-select: none; cursor: pointer; - left: 2rem; + left: 0; position: sticky; top: calc(100vh - 40px); width: 2.8rem; @@ -151,7 +151,7 @@ } @include media-breakpoint-up(xl) { - left: 4rem; + left: 0; } &:hover { diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx index 8461eaa2..dbaa5f84 100644 --- a/src/components/Views/Edit.tsx +++ b/src/components/Views/Edit.tsx @@ -235,7 +235,6 @@ export const EditView = (props: Props) => { {pageTitle()}
- + +