refactor: header code refactor

2021-01-05 11:48:58 +08:00 · 2021-01-05 11:48:58 +08:00 · 0ea7753fe7
parent bfa9145a23
commit 0ea7753fe7
5 changed files with 94 additions and 173 deletions
--- a/source/css/layout/_partial/first-screen.styl
+++ b/source/css/layout/_partial/first-screen.styl
@ -10,14 +10,14 @@ $first-screen-img = $temp-img ? $temp-img:'/images/bg.svg';
  width: 100%;
  overflow: hidden;
  background: url($first-screen-img) center center / cover no-repeat;
-  background-position-y: $header-height - 2px;
+  background-position-y: $header-height - $header-progress-height;

  +keep-tablet() {
-    background-position-y: $header-height * 0.9 - 2px;
+    background-position-y: $header-height * 0.9 - $header-progress-height;
  }

  +keep-mobile() {
-    background-position-y: $header-height * 0.8 - 2px;
+    background-position-y: $header-height * 0.8 - $header-progress-height;
  }

  .content {
--- a/source/css/layout/_partial/header.styl
+++ b/source/css/layout/_partial/header.styl
@ -1,4 +1,3 @@
-$header-progress-height = 2.8px;
 $logo-title-font-size = 2.2rem;
 $pc-search-icon-font-size = 1.5rem;
 $menu-bar-line-height = 2.5px;
@ -12,6 +11,7 @@ $menu-bar-line-height = 2.5px;
  justify-content: center;
  background: var(--background-color);
  padding-top: $header-progress-height;
+  transition();

  hover-style(1.02, 1.02);

@ -42,6 +42,13 @@ $menu-bar-line-height = 2.5px;
    .left {
      display: flex;
      align-items: center;
+      transition();
+
+      .header-shrink & {
+        transform: scale(0.85);
+        transform-origin: left;
+        transition();
+      }

      .logo-title {
        font-size: $logo-title-font-size;
@ -64,6 +71,7 @@ $menu-bar-line-height = 2.5px;
    .right {

      .pc {
+
        .menu-list {
          display: flex;
          align-items: center;
@ -84,31 +92,11 @@ $menu-bar-line-height = 2.5px;
              margin-left: 0;
            }

-            a {

-              &:hover {
-
-                color: var(--default-text-color);
-
-                &::after {
-                  content: '';
-                  position: absolute;
-                  bottom: -10px;
-                  left: 50%;
-                  width: 100%;
-                  height: 2px;
-                  transform: translateX(-50%);
-                  background: var(--primary-color);
-                }
-              }
-
-            }
-
-
-            .active {
-              color: var(--second-text-color);
+            a:hover, .active {

              &::after {
+                transition();
                content: '';
                position: absolute;
                bottom: -10px;
@ -116,11 +104,15 @@ $menu-bar-line-height = 2.5px;
                width: 100%;
                height: 2px;
                transform: translateX(-50%);
-                background: var(--primary-color)
+                background: var(--primary-color);
+
+                .header-shrink & {
+                  transition();
+                  bottom: -($header-shrink-height / 2 - 12);
+                }
              }
            }

-
            &.search {
              font-size: $pc-search-icon-font-size;
              margin-left: 26px;
@ -132,6 +124,7 @@ $menu-bar-line-height = 2.5px;

      }

+
      .mobile {
        display: flex;
        justify-content: space-between;
@ -166,10 +159,14 @@ $menu-bar-line-height = 2.5px;
            background: var(--default-text-color);
            transition();

-            &::before {
+            .header-drawer-show & {
+              transition();
+              background: transparent;
+            }
+
+            &::before, &::after {
              content: '';
              position: absolute;
-              top: -6px;
              left: 0;
              width: 100%;
              height: $menu-bar-line-height;
@ -177,15 +174,22 @@ $menu-bar-line-height = 2.5px;
              transition();
            }

+
+            &::before {
+              top: -6px;
+
+              .header-drawer-show & {
+                transform: translateY(6px) rotate(45deg);
+              }
+            }
+
+
            &::after {
-              content: '';
-              position: absolute;
              bottom: -6px;
-              left: 0;
-              width: 100%;
-              height: $menu-bar-line-height;
-              background: var(--default-text-color);
-              transition();
+
+              .header-drawer-show & {
+                transform: translateY(-6px) rotate(-45deg);
+              }
            }
          }
        }
@ -204,9 +208,13 @@ $menu-bar-line-height = 2.5px;
    transform-origin: top;
    background: var(--background-color);
    z-index: $z-index-2;
-
    transition();

+    .header-drawer-show & {
+      transition();
+      transform: scaleY(1);
+    }
+
    .drawer-menu-list {
      display: flex;
      flex-direction: column;
@ -252,90 +260,16 @@ $menu-bar-line-height = 2.5px;
    visibility: hidden;
    opacity: 0;
    transition();
-  }

-}
-
-
-.header-drawer-show {
-  opacity: 1 !important;
-
-  .header-content {
-
-    .right {
-      .mobile {
-        .menu-bar {
-          .menu-bar-middle {
-
-            background: transparent;
-
-            &::before {
-              transform: translateY(6px) rotate(45deg);
-            }
-
-
-            &::after {
-              transform: translateY(-6px) rotate(-45deg);
-            }
-          }
-        }
-      }
-
-    }
-  }
-
-  .header-drawer {
-    transform: scaleY(1);
-  }
-
-  .window-mask {
-    visibility: visible;
-    opacity: 1;
-  }
-
-}
-
-
-.header-wrapper-shrink {
-
-  .header-content {
-
-    .left {
-      transform: scale(0.86);
-      transform-origin: left;
+    .header-drawer-show & {
+      visibility: visible;
+      opacity: 1;
      transition();
    }
-
-    .right {
-
-      .pc {
-
-        .menu-list {
-
-          .menu-item {
-
-            a:hover {
-              &::after {
-                transition();
-                bottom: -($header-shrink-height / 2 - 12);
-              }
-            }
-
-            .active::after {
-              transition();
-              bottom: -($header-shrink-height / 2 - 12);
-            }
-          }
-
-        }
-      }
-    }
-
-
  }

-
-  .header-drawer {
-    padding: $header-shrink-height 0 20px 0;
-  }
+}
+
+.header-drawer-show {
+  overflow: hidden;
 }
--- a/source/css/layout/common/variables.styl
+++ b/source/css/layout/common/variables.styl
@ -7,6 +7,7 @@
 // ========================================================================
 $header-height = 76px;                          // 头部默认高度
 $header-shrink-height = $header-height * 0.8;   // 头部收缩高度
+$header-progress-height = 2.8px;                // 头部进度条高度
 $main-content-width = 80%;                      // 中间内容区域宽度（PC）
 $main-content-width-tablet = 85%;               // 中间内容区域宽度（平板）
 $main-content-width-mobile = 90%;               // 中间内容区域宽度（手机）
--- a/source/css/layout/page.styl
+++ b/source/css/layout/page.styl
@ -1,4 +1,3 @@
-$header-progress-height = 2.8px;
 $temp-width = hexo-config('style.left_side_width');
 $page-aside-width = $temp-width ? convert($temp-width):260px;

@ -34,12 +33,25 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
      padding-top: $header-height;
      position: relative;

+      .header-shrink & {
+        padding-top: $header-shrink-height;
+        transition();
+
+        +keep-tablet() {
+          padding-top: $header-shrink-height * 0.9;
+        }
+
+        +keep-mobile() {
+          padding-top: $header-shrink-height * 0.8;
+        }
+      }
+
      +keep-tablet() {
-        padding-top: $header-height - 8px;
+        padding-top: $header-height * 0.9;
      }

      +keep-mobile() {
-        padding-top: $header-height - 16px;
+        padding-top: $header-height * 0.8;
      }

      .page-main-content-top {
@ -48,22 +60,35 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
        right: 0;
        width: 100%;
        height: $header-height;
+        z-index: $z-index-5;
+        box-sizing: border-box;
+        transition();
+
+        .header-shrink & {
+          height: $header-shrink-height;
+
+          +keep-tablet() {
+            height: $header-shrink-height * 0.9;
+          }
+
+          +keep-mobile() {
+            height: $header-shrink-height * 0.8;
+          }
+        }
+

        +keep-tablet() {
          height: $header-height * 0.9;
          padding-left: 0 !important;
        }

+
        +keep-mobile() {
          height: $header-height  * 0.8;
        }

-        z-index: $z-index-5;
-        box-sizing: border-box;
-        transition();
      }

-
      .page-main-content-middle {
        box-sizing: border-box;
        width: 100%;
@ -103,33 +128,6 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
        width: 100%;
      }
    }
-
-
-    .page-main-content-top-shrink {
-      padding-top: $header-shrink-height;
-      transition();
-
-      +keep-tablet() {
-        padding-top: $header-shrink-height * 0.9;
-      }
-
-      +keep-mobile() {
-        padding-top: $header-shrink-height * 0.8;
-      }
-
-      .page-main-content-top {
-        height: $header-shrink-height;
-
-        +keep-tablet() {
-          height: $header-shrink-height * 0.9;
-        }
-
-        +keep-mobile() {
-          height: $header-shrink-height * 0.8;
-        }
-      }
-
-    }
  }


@ -161,7 +159,7 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
    right: $component-interspace;
    transition();

-    &.shrink {
+    .header-shrink & {
      top: $header-shrink-height + $component-interspace;

      +keep-tablet() {
@ -173,6 +171,7 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
      }
    }

+
    +keep-tablet() {
      top: $header-height * 0.9 + $component-interspace;
      right: 10px;
@ -180,18 +179,18 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
      transform-origin: right top;
    }

+
    +keep-mobile() {
      top: $header-height * 0.8 + $component-interspace;
      right: 5px;
      transform: scale(0.72);
-      transform-origin: right top;
    }
  }


  .right-bottom-side-tools {
    position: fixed;
-    bottom: $component-interspace;
+    bottom: 5%;
    right: 0;
  }
 }
--- a/source/js/header-shrink.js
+++ b/source/js/header-shrink.js
@ -1,47 +1,34 @@
 KEEP.initHeaderShrink = () => {
  KEEP.utils.headerShrink = {
-
-    pageTemplateDom: document.querySelector('.page-main-content'),
    headerDom: document.querySelector('.header-wrapper'),
-    sidebarToolsDom: document.querySelector('.sidebar-tools'),
    isHeaderShrink: false,
-    isShowHeaderDrawer: false,

    init() {
      this.headerHeight = this.headerDom.getBoundingClientRect().height;
    },

    headerShrink() {
-
      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

      if (!this.isHeaderShrink && scrollTop > this.headerHeight) {
        this.isHeaderShrink = true;
-        this.headerDom.classList.add('header-wrapper-shrink');
-        this.pageTemplateDom.classList.add('page-main-content-top-shrink');
-        this.sidebarToolsDom && this.sidebarToolsDom.classList.add('shrink');
+        document.body.classList.add('header-shrink');
      } else if (this.isHeaderShrink && scrollTop <= this.headerHeight) {
        this.isHeaderShrink = false;
-        this.headerDom.classList.remove('header-wrapper-shrink');
-        this.pageTemplateDom.classList.remove('page-main-content-top-shrink');
-        this.sidebarToolsDom && this.sidebarToolsDom.classList.remove('shrink');
+        document.body.classList.remove('header-shrink');
      }

    },

    initMenuBarButton() {
      document.querySelector('.menu-bar').addEventListener('click', () => {
-        this.isShowHeaderDrawer = !this.isShowHeaderDrawer;
-        document.body.style.overflow = this.isShowHeaderDrawer ? 'hidden' : 'auto';
-        this.headerDom.classList.toggle('header-drawer-show');
+        document.body.classList.toggle('header-drawer-show');
      });
    },

    initWindowMask() {
      document.querySelector('.window-mask').addEventListener('click', () => {
-        this.isShowHeaderDrawer = !this.isShowHeaderDrawer;
-        document.body.style.overflow = this.isShowHeaderDrawer ? 'hidden' : 'auto';
-        this.headerDom.classList.toggle('header-drawer-show');
+        document.body.classList.toggle('header-drawer-show');
      });
    },
  }