fix: fix iPad TOC orientation css bug

pogor-dev · Aug 21, 2019 · 87857b2 · 87857b2
1 parent f64c499
commit 87857b2
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git a/assets/css/_core/_media.scss b/assets/css/_core/_media.scss
@@ -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;
   }

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -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);
             }
         }
     };