Discource-C
/
DiscoTOC
mirror of https://github.com/discourse/DiscoTOC.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Sidebar fixes (#18)

This commit is contained in:
Jordan Vidrine 2022-01-05 10:40:18 -06:00 committed by GitHub
parent 780c744122
commit 5b2f5a455e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 115 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
common/common.scss
View File

@ -27,16 +27,16 @@
.d-toc-item { .d-toc-item {
padding: 6px 0; padding: 6px 0;
a { a {
color: var(--primary-high, $primary-high); color: var(--primary-high);
} }
&.d-toc-active { &.d-toc-active {
position: relative; position: relative;
&:before { &:before {
:not(.rtl) & { :not(.rtl) & {
border-left: 1px solid var(--tertiary, $tertiary); border-left: 1px solid var(--tertiary);
} }
.rtl & { .rtl & {
border-right: 1px solid var(--tertiary, $tertiary); border-right: 1px solid var(--tertiary);
} }
height: 100%; height: 100%;
content: ""; content: "";
@ -45,9 +45,9 @@
top: 0; top: 0;
} }
a { a {
color: var(--primary, $primary); color: var(--primary);
text-shadow: 0.1px 0.1px var(--primary, $primary), text-shadow: 0.1px 0.1px var(--primary),
-0.1px -0.1px var(--primary, $primary); -0.1px -0.1px var(--primary);
} }
} }
} }
@ -201,17 +201,17 @@
} }
> .row { > .row {
:not(.rtl) & { :not(.rtl) & {
border-right: 1px solid var(--primary-low, $primary-low); border-right: 1px solid var(--primary-low);
} }
.rtl & { .rtl & {
border-left: 1px solid var(--primary-low, $primary-low); border-left: 1px solid var(--primary-low);
} }
} }
} }
#topic-title { #topic-title {
margin-bottom: 0; margin-bottom: 0;
.title-wrapper { .title-wrapper {
border-bottom: 1px solid var(--primary-low, $primary-low); border-bottom: 1px solid var(--primary-low);
padding-bottom: 0.5em; padding-bottom: 0.5em;
width: auto; width: auto;
} }
@ -230,7 +230,7 @@
} }
#d-toc { #d-toc {
z-index: z("header") + 1; z-index: z("header") + 1;
background: var(--secondary, $secondary); background: var(--secondary);
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
@ -265,7 +265,7 @@
} }
.d-toc-close-wrapper { .d-toc-close-wrapper {
height: 3em; height: 3em;
background: var(--secondary, $secondary); background: var(--secondary);
color: var(--primary-med-or-secondary-med); color: var(--primary-med-or-secondary-med);
margin-bottom: 1em; margin-bottom: 1em;
position: -webkit-sticky; position: -webkit-sticky;
@ -283,8 +283,8 @@
bottom: 5px; bottom: 5px;
padding: 0.5em 1em; padding: 0.5em 1em;
background: var(--tertiary, $tertiary); background: var(--tertiary);
color: var(--secondary, $secondary); color: var(--secondary);
z-index: 3; z-index: 3;
margin-bottom: env(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom);
:not(.rtl) & { :not(.rtl) & {
@ -300,11 +300,11 @@
#d-toc > ul { #d-toc > ul {
:not(.rtl) & { :not(.rtl) & {
margin-left: 20px; margin-left: 20px;
border-left: 1px solid var(--primary-low, $primary-low); border-left: 1px solid var(--primary-low);
} }
.rtl & { .rtl & {
margin-right: 20px; margin-right: 20px;
border-right: 1px solid var(--primary-low, $primary-low); border-right: 1px solid var(--primary-low);
} }
&:last-child { &:last-child {
margin-bottom: 5em; margin-bottom: 5em;
@ -330,9 +330,9 @@
} }
.edit-title .d-editor-preview [data-theme-toc] { .edit-title .d-editor-preview [data-theme-toc] {
background: var(--tertiary, $tertiary); background: var(--tertiary);
color: var(--secondary, $secondary); color: var(--secondary);
border-top: 2px solid var(--secondary, $secondary); border-top: 2px solid var(--secondary);
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: 0; top: 0;

99
scss/sidebar.scss
View File

@ -1,7 +1,102 @@
.discourse-sidebar .d-toc-regular .d-toc-article .row { .discourse-sidebar .d-toc-regular .d-toc-article .row {
width: 75%; width: 75%;
@media screen and (max-width: 1200px) { @media screen and (max-width: calc($large-width + 100px)) {
width: 65%; width: calc(100vw - 240px - 3em);
}
}
@media screen and (max-width: calc($large-width + 100px)) {
.discourse-sidebar {
.d-toc-regular {
.post-bottom-wrapper {
padding: 1em 0.75em;
&.desktop {
display: none;
}
}
#d-toc {
z-index: z("header") + 1;
background: var(--secondary);
position: fixed;
right: 0;
top: 0;
height: 100vh;
width: 100vw;
max-width: 500px;
overflow: scroll;
transition: transform 0.5s, opacity 0.25s;
transform: translatex(100%);
opacity: 0;
:not(.rtl) & {
margin-left: -1px;
}
.rtl & {
margin-right: -1px;
}
&.d-toc-mobile {
transform: translatex(0);
opacity: 1;
}
.d-toc-active {
&:before {
:not(.rtl) & {
margin-left: -1px;
}
.rtl & {
margin-right: -1px;
}
}
}
}
.d-toc-close-wrapper {
height: 3em;
background: var(--secondary);
color: var(--primary-med-or-secondary-med);
margin-bottom: 1em;
position: -webkit-sticky;
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: flex-end;
.d-toc-close {
padding: 1em 0.75em;
}
}
.d-toc-toggle {
position: fixed;
bottom: 5px;
padding: 0.5em 1em;
background: var(--tertiary);
color: var(--secondary);
z-index: 3;
margin-bottom: env(safe-area-inset-bottom);
:not(.rtl) & {
right: 16px;
}
.rtl & {
left: 16px;
}
body.footer-nav-visible & {
bottom: 49px;
}
}
#d-toc > ul {
:not(.rtl) & {
margin-left: 20px;
border-left: 1px solid var(--primary-low);
}
.rtl & {
margin-right: 20px;
border-right: 1px solid var(--primary-low);
}
&:last-child {
margin-bottom: 5em;
}
}
}
} }
} }