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) ----------- */
@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 {
max-width: 560px !important;
}

View File

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