Add toggle toc button

This commit is contained in:
Track3 2018-12-28 22:52:23 +08:00
parent 2b5999616d
commit 98c3c64499
3 changed files with 29 additions and 5 deletions

View file

@ -65,6 +65,12 @@ const showContent = () => {
document.getElementById('bg-img').classList.remove('show-bg-img');
}
// Toggle TOC
//
const toggleToc = () => {
document.getElementById('toc').classList.toggle('show-toc');
}
if (haveHeader == true) {
document.getElementById('menu-btn').addEventListener('click', mobileMenuToggle);

View file

@ -145,6 +145,10 @@ table {
height: 1em;
}
.desktop-only, .desktop-only-ib {
display: none;
}
// Accessibility
//
.screen-reader-text {
@ -234,6 +238,7 @@ table {
border: none;
background: none;
padding: 0;
margin-left: .4em;
cursor: pointer;
}
@ -656,6 +661,9 @@ hr.post-end {
text-align: center;
}
// Media Queries
//
@media (min-width: 800px) {
.site-main {
margin-top: 3em;
@ -677,6 +685,15 @@ hr.post-end {
margin-top: 8em;
}
.desktop-only,
#toc.show-toc {
display: block;
}
.desktop-only-ib {
display: inline-block;
}
figure.left {
margin-left: -240px;
p {
@ -702,7 +719,6 @@ hr.post-end {
#toc {
top: 13em;
display: block;
margin-left: 370px;
max-width: 220px;
}
@ -754,8 +770,7 @@ hr.post-end {
display: none;
}
#menu-btn,
#search-btn {
#menu-btn {
display: inline-block;
}

View file

@ -14,6 +14,9 @@
{{ with .Params.featuredImg -}}
<button class="hdr-btn" onclick="showFeaturedImg()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></button>
{{- end }}
{{- with .Params.toc -}}
<button class="hdr-btn desktop-only-ib" onclick="toggleToc()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg></button>
{{- end }}
{{- with .Site.Params.social -}}
<span class="hdr-social hide-in-mobile">{{ partialCached "social-icons.html" . }}</span>
{{- end -}}