andy/hermit-V2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add toggle toc button

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

10
assets/js/main.js
View file

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

21
assets/scss/style.scss
View file

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

3
layouts/partials/header.html
View file

@ -14,6 +14,9 @@
{{ with .Params.featuredImg -}} {{ 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> <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 }} {{- 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 -}} {{- with .Site.Params.social -}}
<span class="hdr-social hide-in-mobile">{{ partialCached "social-icons.html" . }}</span> <span class="hdr-social hide-in-mobile">{{ partialCached "social-icons.html" . }}</span>
{{- end -}} {{- end -}}