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

99
scss/sidebar.scss
View File

@ -1,7 +1,102 @@
.discourse-sidebar .d-toc-regular .d-toc-article .row {
width: 75%;
@media screen and (max-width: 1200px) {
width: 65%;
@media screen and (max-width: calc($large-width + 100px)) {
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;
}
}
}
}
}