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

FIX: add post controls icon to mobile (#11)

This commit is contained in:
Joe 2021-05-10 23:36:56 +08:00 committed by GitHub
parent 268ef4cb8f
commit fcc2d0698b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
common/common.scss
View File

@ -157,18 +157,24 @@
}
.post-bottom-wrapper {
padding: 1em 0.5em 0 0.5em;
a {
color: var(--primary-med-or-secondary-med);
}
}
.d-toc {
margin-top: 1em;
}
}
// large screens
@media screen and (min-width: $large-width) {
.d-toc {
margin-top: 1em;
}
.post-bottom-wrapper {
padding: 1em 0.5em 0 0.5em;
&.mobile {
display: none;
}
}
.d-toc-toggle {
display: none !important;
}
@ -232,8 +238,11 @@
@media screen and (max-width: $large-width) {
.d-toc-regular {
.post-bottom-wrapper {
padding: 1em 0.75em;
&.desktop {
display: none;
}
}
#d-toc {
z-index: z("header") + 1;
background: var(--secondary, $secondary);
@ -272,7 +281,7 @@
.d-toc-close-wrapper {
height: 3em;
background: var(--secondary, $secondary);
color: var(--primary-med-or-secondary-med);
margin-bottom: 1em;
position: -webkit-sticky;
position: sticky;
@ -280,11 +289,8 @@
display: flex;
align-items: center;
justify-content: flex-end;
:not(.rtl) & {
padding-right: 1em;
}
.rtl & {
padding-left: 1em;
.d-toc-close {
padding: 1em 0.75em;
}
}
.d-toc-toggle {

11
common/header.html
View File

@ -152,7 +152,7 @@
$("#main").on(
"click.toggleDtoc",
".d-toc-toggle, .d-toc-close",
".d-toc-toggle, .d-toc-close, .post-bottom-wrapper a",
dtocMobile
);
@ -319,13 +319,18 @@
.addClass("d-toc-article")
.append(
`<div class="d-toc-main">
<div class="post-bottom-wrapper">
<div class="post-bottom-wrapper dekstop">
<a href="#bottom-anchor" title="${I18n.t(
themePrefix("post_bottom_tooltip")
)}">${iconHTML("bottom")}</a>
</div>
<ul id="d-toc">
<div class="d-toc-close-wrapper">
<div class="d-toc-close-wrapper mobile">
<div class="post-bottom-wrapper">
<a href="#bottom-anchor" title="${I18n.t(
themePrefix("post_bottom_tooltip")
)}">${iconHTML("bottom")}</a>
</div>
<div class="d-toc-close">
${closeIcon}
</div>