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

Table of contents mobile style

Browse Source
This commit is contained in:
kvakazyambra 2023-09-20 23:57:44 +03:00
parent 5aa0d1c98b
commit 42493c2e98
3 changed files with 133 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Article/FullArticle.tsx
View File

@ -297,7 +297,7 @@ export const FullArticle = (props: Props) => {
</Show>
</article>
<Show when={isDesktop() && body()}>
<Show when={body()}>
<div class="col-md-6 offset-md-1">
<TableOfContents variant="article" parentSelector="#shoutBody" body={body()} />
</div>

74
src/components/TableOfContents/TableOfContents.module.scss
View File

@ -1,7 +1,38 @@
.TableOfContentsFixedWrapper {
min-height: 100%;
position: relative;
top: 0;
@include media-breakpoint-down(xl) {
background: #000;
bottom: 0;
color: #fff;
font-size: 1.6rem;
left: 0;
min-height: auto;
max-height: 50vh;
position: fixed;
top: auto;
width: 100%;
.TableOfContentsHeading {
text-transform: capitalize;
}
.TableOfContentsHeading,
button {
&,
&:hover {
color: #fff;
}
}
.TableOfContentsHeadingsItem {
font-size: 1.6rem;
margin-top: 1.6rem;
}
}
&:not(.TableOfContentsFixedWrapperLefted) {
margin-top: -0.2em;
@ -32,19 +63,31 @@
}
.TableOfContentsContainer {
position: sticky;
top: 100px;
right: 20px;
display: flex;
width: 100%;
height: calc(100vh - 120px);
overflow: auto;
flex-direction: column;
align-items: flex-start;
background-color: transparent;
.TableOfContentsFixedWrapperLefted & {
height: calc(100vh - 250px);
@include media-breakpoint-up(xl) {
flex-direction: column;
height: calc(100vh - 120px);
position: sticky;
.TableOfContentsFixedWrapperLefted & {
height: calc(100vh - 250px);
}
}
}
.TableOfContentsContainerInner {
@include media-breakpoint-down(xl) {
flex: 1 100%;
max-height: 50vh;
overflow: auto;
padding: 1.4rem 2rem;
}
}
@ -74,11 +117,31 @@
border: none;
cursor: pointer;
@include media-breakpoint-down(xl) {
background: #fff;
border: 1px solid #000;
border-radius: 100%;
bottom: 1rem;
height: 40px;
position: fixed;
right: 1rem;
top: auto;
width: 40px;
}
&:hover {
filter: invert(1);
}
}
.TableOfContentsCloseButton {
height: 2.4rem;
position: absolute;
top: 1.4rem;
right: 1.4rem;
width: 2.4rem;
}
.TableOfContentsHeadingsList {
position: relative;
display: flex;
@ -97,7 +160,6 @@
font-weight: 400;
line-height: 20px;
text-align: left;
letter-spacing: -0.14px;
&:hover {
color: rgb(0 0 0 / 50%);

90
src/components/TableOfContents/TableOfContents.tsx
View File

@ -68,42 +68,48 @@ export const TableOfContents = (props: Props) => {
>
<div class={styles.TableOfContentsContainer}>
<Show when={isVisible()}>
<div class={styles.TableOfContentsHeader}>
<p class={styles.TableOfContentsHeading}>{t('contents')}</p>
</div>
<ul class={styles.TableOfContentsHeadingsList}>
<For each={headings()}>
{(h) => (
<li>
<button
class={clsx(styles.TableOfContentsHeadingsItem, {
[styles.TableOfContentsHeadingsItemH3]: h.nodeName === 'H3',
[styles.TableOfContentsHeadingsItemH4]: h.nodeName === 'H4'
})}
innerHTML={h.textContent}
onClick={(e) => {
e.preventDefault()
<div class={styles.TableOfContentsContainerInner}>
<div class={styles.TableOfContentsHeader}>
<p class={styles.TableOfContentsHeading}>{t('contents')}</p>
</div>
<ul class={styles.TableOfContentsHeadingsList}>
<For each={headings()}>
{(h) => (
<li>
<button
class={clsx(styles.TableOfContentsHeadingsItem, {
[styles.TableOfContentsHeadingsItemH3]: h.nodeName === 'H3',
[styles.TableOfContentsHeadingsItemH4]: h.nodeName === 'H4'
})}
innerHTML={h.textContent}
onClick={(e) => {
e.preventDefault()
scrollToHeader(h)
}}
/>
</li>
)}
</For>
</ul>
scrollToHeader(h)
}}
/>
</li>
)}
</For>
</ul>
</div>
</Show>
<button
class={clsx(styles.TableOfContentsPrimaryButton, {
[styles.TableOfContentsPrimaryButtonLefted]: props.variant === 'editor' && !isVisible()
})}
class={clsx(
styles.TableOfContentsPrimaryButton,
{
[styles.TableOfContentsPrimaryButtonLefted]: props.variant === 'editor' && !isVisible()
},
'd-none d-xl-block'
)}
onClick={(e) => {
e.preventDefault()
toggleIsVisible()
}}
title={isVisible() ? t('Hide table of contents') : t('Show table of contents')}
>
<Show when={isVisible()} fallback={<Icon name="show-table-of-contents" class={'icon'} />}>
<Show when={isVisible()} fallback={<Icon name="show-table-of-contents" class="icon" />}>
{props.variant === 'editor' ? (
<Icon name="hide-table-of-contents" class="icon" />
) : (
@ -111,7 +117,39 @@ export const TableOfContents = (props: Props) => {
)}
</Show>
</button>
<Show when={isVisible()}>
<button
class={clsx(styles.TableOfContentsCloseButton, 'd-xl-none')}
onClick={(e) => {
e.preventDefault()
toggleIsVisible()
}}
title={isVisible() ? t('Hide table of contents') : t('Show table of contents')}
>
<Icon name="close-white" class="icon" />
</button>
</Show>
</div>
<Show when={!isVisible()}>
<button
class={clsx(
styles.TableOfContentsPrimaryButton,
{
[styles.TableOfContentsPrimaryButtonLefted]: props.variant === 'editor' && !isVisible()
},
'd-xl-none'
)}
onClick={(e) => {
e.preventDefault()
toggleIsVisible()
}}
title={isVisible() ? t('Hide table of contents') : t('Show table of contents')}
>
<Icon name="hide-table-of-contents-2" class="icon" />
</button>
</Show>
</div>
</Show>
)