1
0
mirror of synced 2026-05-22 18:33:15 +00:00

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
2 changed files with 38 additions and 27 deletions
+17 -11
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,7 +238,10 @@
@media screen and (max-width: $large-width) {
.d-toc-regular {
.post-bottom-wrapper {
display: none;
padding: 1em 0.75em;
&.desktop {
display: none;
}
}
#d-toc {
z-index: z("header") + 1;
@@ -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 {
+21 -16
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
);
@@ -310,8 +310,8 @@
.addClass("d-toc-cooked")
.prepend(
`<span class="d-toc-toggle">
${dtocIcon} ${I18n.t(themePrefix("table_of_contents"))}
</span>`
${dtocIcon} ${I18n.t(themePrefix("table_of_contents"))}
</span>`
)
.parents(".regular")
.addClass("d-toc-regular")
@@ -319,20 +319,25 @@
.addClass("d-toc-article")
.append(
`<div class="d-toc-main">
<div class="post-bottom-wrapper">
<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">
${closeIcon}
<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 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>
</div>
</div>
</ul>
</div>
`
</ul>
</div>
`
)
.parents(".topic-post")