fix: fix screen-splash bug under dark theme and orientationchange bug

pogor-dev · Aug 21, 2019 · 0788330 · 0788330
1 parent a46456e
commit 0788330
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 61 deletions.
diff --git a/assets/css/_core/_media.scss b/assets/css/_core/_media.scss
@@ -1,14 +1,14 @@
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
   .navbar {
-    display: none !important;
+    display: none;
   }
 
   .post-toc {
-    display: none !important;
+    display: none;
   }
 
   .navbar-mobile {
-    display: block !important;
+    display: block;
     position: fixed;
     width: 100%;
     z-index: 100;
@@ -111,13 +111,13 @@
       }
 
       .dark-theme & {
-        background: $global-background-color-dark !important;
+        background: $global-background-color-dark;
       }
     }
   }
 
   #dynamic-to-top {
-    display: none !important;
+    display: none;
   }
 
   .post-warp {
@@ -129,51 +129,56 @@
   }
 }
 
-/* iPads (portrait and landscape) ----------- */
+/* iPads (portrait) ----------- */
 
 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
   .post-warp {
-    max-width: 600px !important;
+    max-width: 600px;
   }
 
   .navbar-mobile {
-    display: none !important;
+    display: none;
   }
 
   .post-toc {
-    display: none !important;
+    display: none;
+  }
+
+  .post-toc-mobile {
+    display: block;
   }
 }
 
-/* iPads (portrait and landscape) ----------- */
+/* iPads (landscape) ----------- */
 
 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
   .post-warp {
-    max-width: 560px !important;
+    max-width: 560px;
   }
 
   .post-toc {
-    margin-left: 580px !important;
+    display: block;
+    margin-left: 580px;
   }
 
   .navbar-mobile {
-    display: none !important;
+    display: none;
   }
 
   .post-toc-mobile {
-    display: none !important;
+    display: none;
   }
 }
 
 /* Desktops and laptops ----------- */
 
 @media only screen and (min-width: 1224px) {
   .navbar-mobile {
-    display: none !important;
+    display: none;
   }
 
   .post-toc-mobile {
-    display: none !important;
+    display: none;
   }
 }
 
@@ -182,10 +187,10 @@
 @media only screen and (min-width: 1824px) {
   /* Styles */
   .navbar-mobile {
-    display: none !important;
+    display: none;
   }
 
   .post-toc-mobile {
-    display: none !important;
+    display: none;
   }
 }
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -11,14 +11,12 @@ jQuery(function($) {
         });
     };
 
-    _Blog.toggleTheme = function(isDark) {
-        $('body').toggleClass('dark-theme', isDark);
+    _Blog.toggleTheme = function() {
         $('.theme-switch').on('click', () => {
             $('body').toggleClass('dark-theme');
-            window.localStorage && window.localStorage.setItem('theme', document.body.classList.contains('dark-theme') ? 'dark' : 'light', );
-            const currentTheme = window.localStorage && window.localStorage.getItem('theme');
-            const isDark = currentTheme === 'dark';
-            this.echarts(isDark);
+            isDark = !isDark;
+            window.localStorage && window.localStorage.setItem('theme', isDark ? 'dark' : 'light');
+            this.echarts();
         });
     };
 
@@ -53,12 +51,38 @@ jQuery(function($) {
         }
     };
 
+    _Blog._refactorToc = function(toc) {
+        // when headings do not start with `h1`
+        const oldTocList = toc.children[0];
+        let newTocList = oldTocList;
+        let temp;
+        while (newTocList.children.length === 1
+            && (temp = newTocList.children[0].children[0]).tagName === 'UL') {
+            newTocList = temp;
+        }
+
+        if (newTocList !== oldTocList) toc.replaceChild(newTocList, oldTocList);
+    };
+
+    _Blog._linkToc = function() {
+        const links = document.querySelectorAll('#TableOfContents a:first-child');
+        for (let i = 0; i < links.length; i++) links[i].className += ' toc-link';
+
+        for (let num = 1; num <= 6; num++) {
+            const headers = document.querySelectorAll('.post-content>h' + num);
+            for (let i = 0; i < headers.length; i++) {
+                const header = headers[i];
+                header.innerHTML = `<a href="#${header.id}" class="headerlink anchor"><i class="iconfont icon-link"></i></a>${header.innerHTML}`;
+            }
+        }
+    };
+
     _Blog._initToc = function() {
-        if ($('.post-toc').length && $('.post-toc').css('display') !== 'none') {
+        const $toc = $('.post-toc');
+        if ($toc.length && $toc.css('display') !== 'none') {
             const SPACING = 100;
-            const $toc = $('.post-toc');
             const $footer = $('.post-footer');
-            const minTop = $toc.position().top;
+            const minTop = $toc.position().top;;
             const mainTop = $('main').position().top;
             const minScrollTop = minTop + mainTop - SPACING;
             const changeTocState = function() {
@@ -146,38 +170,14 @@ jQuery(function($) {
                 this._linkToc();
                 this._initToc();
                 // Listen for orientation changes
-                window.addEventListener("orientationchange", this._initToc, false);
+                window.addEventListener("orientationchange", function() {
+                    this.setTimeout(_Blog._initToc, 0);
+                }, false);
             }
         }
     };
 
-    _Blog._refactorToc = function(toc) {
-        // when headings do not start with `h1`
-        const oldTocList = toc.children[0];
-        let newTocList = oldTocList;
-        let temp;
-        while (newTocList.children.length === 1
-            && (temp = newTocList.children[0].children[0]).tagName === 'UL') {
-            newTocList = temp;
-        }
-
-        if (newTocList !== oldTocList) toc.replaceChild(newTocList, oldTocList);
-    };
-
-    _Blog._linkToc = function() {
-        const links = document.querySelectorAll('#TableOfContents a:first-child');
-        for (let i = 0; i < links.length; i++) links[i].className += ' toc-link';
-
-        for (let num = 1; num <= 6; num++) {
-            const headers = document.querySelectorAll('.post-content>h' + num);
-            for (let i = 0; i < headers.length; i++) {
-                const header = headers[i];
-                header.innerHTML = `<a href="#${header.id}" class="headerlink anchor"><i class="iconfont icon-link"></i></a>${header.innerHTML}`;
-            }
-        }
-    };
-
-    _Blog.echarts = function(isDark) {
+    _Blog.echarts = function() {
         if (window.echartsMap) {
             for (let i = 0; i < echartsArr.length; i++) {
                 echartsArr[i].dispose();
@@ -230,15 +230,12 @@ jQuery(function($) {
     };
 
     $(document).ready(function() {
-        const currentTheme = window.localStorage && window.localStorage.getItem('theme');
-        const isDark = currentTheme === 'dark';
-
         _Blog.toggleMobileMenu();
-        _Blog.toggleTheme(isDark);
+        _Blog.toggleTheme();
         _Blog.changeTitle();
         _Blog.chroma();
         _Blog.responsiveTable();
-        _Blog.echarts(isDark);
+        _Blog.echarts();
         _Blog.countdown();
         _Blog.typeit();
         _Blog.toc();

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -6,7 +6,11 @@
         <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
         {{ partial "head.html" . }}
     </head>
-    <body class="">
+    <body>
+        <script>
+            var isDark = (window.localStorage && window.localStorage.getItem('theme')) === 'dark';
+            if (isDark) document.body.classList.add('dark-theme');
+        </script>
         <div class="wrapper">
             {{ partial "header.html" . }}
             <main class="main">