fix: fix iPad TOC orientation css bug

This commit is contained in:
Dillon
2019-08-22 00:32:52 +08:00
parent f64c499957
commit 87857b2002
2 changed files with 30 additions and 9 deletions

View File

@@ -150,7 +150,23 @@
/* iPads (portrait and landscape) ----------- */ /* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
.post-warp {
max-width: 600px !important;
}
.navbar-mobile {
display: none !important;
}
.post-toc {
display: none !important;
}
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
.post-warp { .post-warp {
max-width: 560px !important; max-width: 560px !important;
} }

View File

@@ -54,7 +54,7 @@ jQuery(function($) {
}; };
_Blog._initToc = function() { _Blog._initToc = function() {
if ($('.post-toc').length) { if ($('.post-toc').length && $('.post-toc').css('display') !== 'none') {
const SPACING = 20; const SPACING = 20;
const $toc = $('.post-toc'); const $toc = $('.post-toc');
const $footer = $('.post-footer'); const $footer = $('.post-footer');
@@ -90,7 +90,6 @@ jQuery(function($) {
} }
}; };
changeTocState(); changeTocState();
$(window).scroll(changeTocState);
const HEADERFIX = 100; const HEADERFIX = 100;
const $toclink = $('.toc-link'); const $toclink = $('.toc-link');
@@ -127,7 +126,11 @@ jQuery(function($) {
} }
}; };
activeIndex(); activeIndex();
$(window).scroll(activeIndex); if (!this._initTocOnce) {
$(window).scroll(changeTocState);
$(window).scroll(activeIndex);
this._initTocOnce = true;
}
} }
}; };
@@ -136,12 +139,14 @@ jQuery(function($) {
if (tocContainer !== null) { if (tocContainer !== null) {
const toc = document.getElementById('TableOfContents'); const toc = document.getElementById('TableOfContents');
if (toc === null) { if (toc === null) {
// toc = true, but there are no headings // toc = true, but there are no headings
tocContainer.parentNode.removeChild(tocContainer); tocContainer.parentNode.removeChild(tocContainer);
} else { } else {
this._refactorToc(toc); this._refactorToc(toc);
this._linkToc(); this._linkToc();
this._initToc(); this._initToc();
// Listen for orientation changes
window.addEventListener("orientationchange", this._initToc, false);
} }
} }
}; };