[bug] fix header shade when using reverse layout order

Author: zombieFox

src/css/header.css

@@ -38,13 +38,12 @@
 .header-shade {
   background-color: transparent;
   content: "";
-  display: block;
-  position: absolute;
   width: 100%;
   height: 100%;
+  display: block;
+  position: absolute;
   top: 0;
   left: 0;
-  opacity: 0;
   pointer-events: none;
   transition: background-color var(--layout-transition-speed-slow) ease-in-out, opacity var(--layout-transition-speed-slow) ease-in-out, border-radius var(--layout-transition-speed-fast) ease-in-out;
 }
@@ -55,16 +54,7 @@
 
 .is-header-shade-style-always .header-shade,
 .is-header-shade-style-scroll .header-shade {
-  background-color: rgba(var(--header-shade-color));
-  opacity: var(--header-shade-opacity);
-}
-
-.is-header-border-top .header-shade {
-  border-top: calc(var(--layout-line-width) * var(--header-border-top)) solid rgb(var(--theme-accent));
-}
-
-.is-header-border-bottom .header-shade {
-  border-bottom: calc(var(--layout-line-width) * var(--header-border-bottom)) solid rgb(var(--theme-accent));
+  background-color: rgba(var(--header-shade-color), var(--header-shade-opacity));
 }
 
 .header-area {
@@ -82,6 +72,24 @@
   border-bottom: calc(var(--layout-line-width) * var(--header-border-bottom)) solid transparent;
 }
 
+.header-border {
+  width: 100%;
+  height: 100%;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+.is-header-border-top .header-border {
+  border-top: calc(var(--layout-line-width) * var(--header-border-top)) solid rgb(var(--theme-accent));
+}
+
+.is-header-border-bottom .header-border {
+  border-bottom: calc(var(--layout-line-width) * var(--header-border-bottom)) solid rgb(var(--theme-accent));
+}
+
 .is-header-radius .header-shade {
   border-radius: calc(var(--theme-radius) * 4);
 }

src/index.html

@@ -47,6 +47,7 @@
 
     <header class="header">
       <div class="header-shade"></div>
+      <div class="header-border"></div>
       <div class="header-area">
         <div class="header-item-grid">
           <div class="header-item header-greeting">

src/js/header.js

@@ -77,9 +77,11 @@ var header = (function() {
 
   var _renderShade = function() {
     var html = helper.e("html");
+    var headerRect = helper.e(".header").getBoundingClientRect();
+    var layoutRect = helper.e(".layout").getBoundingClientRect();
     var fontSize = parseInt(getComputedStyle(html).fontSize, 10);
     var scrollTop = document.documentElement.scrollTop;
-    var scrollHeight = document.documentElement.scrollHeight;
+    // var scrollHeight = document.documentElement.scrollHeight;
     var innerHeight = window.innerHeight;
     // if shade show
     if (state.get().header.shade.show) {
@@ -91,16 +93,16 @@ var header = (function() {
       } else if (state.get().header.shade.style == "scroll") {
         helper.removeClass(html, "is-header-shade-style-always");
         // check header position
-        if (state.get().layout.order == "headerLink") {
+        if (state.get().layout.order == "headerlink") {
           // check scroll position
-          if (scrollTop > fontSize * 2) {
+          if (scrollTop > fontSize * 2 && headerRect.top == 0) {
             helper.addClass(html, "is-header-shade-style-scroll");
           } else {
             helper.removeClass(html, "is-header-shade-style-scroll");
           };
         } else if (state.get().layout.order == "linkheader") {
           // check scroll position
-          if (scrollTop < (scrollHeight - innerHeight) - (fontSize * 2)) {
+          if (headerRect.bottom == innerHeight && (scrollTop + innerHeight) < ((scrollTop + layoutRect.bottom) - (fontSize * 2))) {
             helper.addClass(html, "is-header-shade-style-scroll");
           } else {
             helper.removeClass(html, "is-header-shade-style-scroll");

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "3.29.0";
+  var current = "3.29.1";
 
   var compare = function(a, b) {
     var pa = a.split(".");

src/manifest.json

@@ -2,7 +2,7 @@
   "name": "nightTab",
   "short_name": "nightTab",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-  "version": "3.29.0",
+  "version": "3.29.1",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"