From d34e38a936632b6fbbd41e40296e57e1dc198b2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?=
 <Leopoldthecoder@users.noreply.github.com>
Date: Thu, 28 Sep 2017 22:36:38 -0500
Subject: [PATCH] docs style groundwork (#7281)

* docs style groundwork

* update docs style
---
 CHANGELOG.en-US.md                    |  2 +-
 CHANGELOG.zh-CN.md                    |  2 +-
 examples/app.vue                      | 23 ++++++++-
 examples/bus.js                       |  2 +
 examples/components/footer-nav.vue    |  2 +-
 examples/components/header.vue        | 30 ++++++++---
 examples/pages/template/component.tpl | 74 ++++++++++++++++++++++-----
 7 files changed, 109 insertions(+), 26 deletions(-)
 create mode 100644 examples/bus.js

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index f15ec285f..c017b5235 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -641,4 +641,4 @@ Breaking change
 
 *2016-11-9*
 
-Element 1.0.0 released.
+- Element 1.0.0 released.
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 68fa3326a..765e14ec3 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -777,4 +777,4 @@
 
 *2016-08-30*
 
-Element 1.0.0-rc.1 发布
+- Element 1.0.0-rc.1 发布
diff --git a/examples/app.vue b/examples/app.vue
index 331068574..05d15bb68 100644
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -11,6 +11,22 @@
 
   #app {
     height: 100%;
+    
+    @when component {
+      .main-cnt {
+        padding: 0;
+        margin-top: 0;
+        min-height: auto;
+      }
+      .headerWrapper {
+        position: fixed;
+        width: 100%;
+        left: 0;
+        top: 0;
+        z-index: 1000;
+        border-bottom: solid 1px #ccc;
+      }
+    }
   }
 
   body {
@@ -167,12 +183,12 @@
 </style>
 
 <template>
-  <div id="app">
+  <div id="app" :class="{ 'is-component': isComponent }">
     <main-header v-if="lang !== 'play'"></main-header>
     <div class="main-cnt">
       <router-view></router-view>
     </div>
-    <main-footer v-if="lang !== 'play'"></main-footer>
+    <main-footer v-if="lang !== 'play' && !isComponent"></main-footer>
   </div>
 </template>
 
@@ -188,6 +204,9 @@
     computed: {
       lang() {
         return this.$route.path.split('/')[1] || 'zh-CN';
+      },
+      isComponent() {
+        return /^component-/.test(this.$route.name || '');
       }
     },
 
diff --git a/examples/bus.js b/examples/bus.js
new file mode 100644
index 000000000..c17d88ac5
--- /dev/null
+++ b/examples/bus.js
@@ -0,0 +1,2 @@
+import Vue from 'vue';
+export default new Vue();
diff --git a/examples/components/footer-nav.vue b/examples/components/footer-nav.vue
index f43214a68..2a8b5117d 100644
--- a/examples/components/footer-nav.vue
+++ b/examples/components/footer-nav.vue
@@ -90,7 +90,7 @@
     methods: {
       setNav() {
         let nav = navConfig[this.lang];
-        this.nav = nav[0].children.concat(nav[1]);
+        this.nav = [nav[0]].concat(nav[2].children);
         nav[3].groups.map(group => group.list).forEach(list => {
           this.nav = this.nav.concat(list);
         });
diff --git a/examples/components/header.vue b/examples/components/header.vue
index e66138a8a..001e632ef 100644
--- a/examples/components/header.vue
+++ b/examples/components/header.vue
@@ -1,6 +1,11 @@
 <style scoped>
   .headerWrapper {
     height: 80px;
+    transition: transform .3s;
+    
+    &.is-hidden {
+      transform: translateY(-80px);
+    }
   }
   .header {
     height: 80px;
@@ -25,7 +30,7 @@
       font-weight: normal;
 
       a {
-        color: #fff;
+        color: #333;
         text-decoration: none;
         display: block;
       }
@@ -90,7 +95,7 @@
 
       a {
         text-decoration: none;
-        color: #fff;
+        color: #333;
         display: block;
         padding: 0 20px;
         opacity: .8;
@@ -157,7 +162,9 @@
   }
 </style>
 <template>
-  <div class="headerWrapper">
+  <div
+    class="headerWrapper"
+    :class="{ 'is-hidden': !visible }">
     <header class="header"
     ref="header"
     :style="headerStyle"
@@ -216,6 +223,7 @@
   </div>
 </template>
 <script>
+  import bus from '../bus';
   import compoLang from '../i18n/component.json';
 
   export default {
@@ -223,7 +231,8 @@
       return {
         active: '',
         isHome: false,
-        headerStyle: {}
+        headerStyle: {},
+        visible: true
       };
     },
     watch: {
@@ -231,6 +240,10 @@
         immediate: true,
         handler() {
           this.isHome = /^home/.test(this.$route.name);
+          if (/^component/.test(this.$route.name)) {
+            this.headerStyle.backgroundColor = '#fff';
+            return;
+          }
           this.headerStyle.backgroundColor = `rgba(32, 160, 255, ${ this.isHome ? '0' : '1' })`;
         }
       }
@@ -250,11 +263,14 @@
         this.$router.push(this.$route.path.replace(this.lang, targetLang));
       }
     },
+    created() {
+      bus.$on('toggleHeader', visible => {
+        this.visible = visible;
+      });
+    },
     mounted() {
       function scroll(fn) {
-        window.addEventListener('scroll', () => {
-          fn();
-        }, false);
+        window.addEventListener('scroll', fn, false);
       }
       scroll(() => {
         if (this.isHome) {
diff --git a/examples/pages/template/component.tpl b/examples/pages/template/component.tpl
index 25435208e..d1c79265b 100644
--- a/examples/pages/template/component.tpl
+++ b/examples/pages/template/component.tpl
@@ -1,10 +1,43 @@
 <style>
   .page-component {
-    padding-bottom: 95px;
     box-sizing: border-box;
-    .content {
-      margin-left: -1px;
+    height: 100%;
+  
+    &.page-container {
+      padding: 0;
+    }
+  
+    .page-component__nav {
+      width: 240px;
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      overflow: auto;
+      padding-top: 80px;
+      transition: padding-top .3s;
+      
+      &.is-extended {
+        padding-top: 0;
+      }
+    }
+    
+    .side-nav {
+      height: 100%;
+      padding-top: 50px;
+      padding-bottom: 50px;
+      padding-right: 0;
+      
+      & > ul {
+        padding-bottom: 50px;
+      }
+    }
 
+    .page-component__content {
+      padding-left: 270px;
+    }
+    
+    .content {
+      padding-top: 130px;
       > {
         h3 {
           margin: 45px 0 20px;
@@ -83,15 +116,15 @@
 </style>
 <template>
   <div class="page-container page-component">
-    <el-row>
-      <el-col :xs="24" :sm="6">
-        <side-nav :data="navsData[lang]" :base="`/${ lang }/component`"></side-nav>
-      </el-col>
-      <el-col :xs="24" :sm="18">
-        <router-view class="content"></router-view>
-        <footer-nav></footer-nav>
-      </el-col>
-    </el-row>
+    <div
+      class="page-component__nav"
+      :class="{ 'is-extended': !showHeader }">
+      <side-nav :data="navsData[lang]" :base="`/${ lang }/component`"></side-nav>
+    </div>
+    <div class="page-component__content">
+      <router-view class="content"></router-view>
+      <footer-nav></footer-nav>
+    </div>
     <transition name="back-top-fade">
       <div
         class="page-component-up"
@@ -106,6 +139,7 @@
   </div>
 </template>
 <script>
+  import bus from '../../bus';
   import navsData from '../../nav.config.json';
   import throttle from 'throttle-debounce/throttle';
 
@@ -115,7 +149,9 @@
         lang: this.$route.meta.lang,
         navsData,
         hover: false,
-        showBackToTop: false
+        showBackToTop: false,
+        scrollTop: 0,
+        showHeader: true
       };
     },
     methods: {
@@ -126,7 +162,17 @@
         document.documentElement.scrollTop = 0;
       },
       handleScroll() {
-        this.showBackToTop = (document.body.scrollTop || document.documentElement.scrollTop) >= 0.5 * document.body.clientHeight;
+        const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+        this.showBackToTop = scrollTop >= 0.5 * document.body.clientHeight;
+        if (this.showHeader !== this.scrollTop > scrollTop) {
+          this.showHeader = this.scrollTop > scrollTop;
+          bus.$emit('toggleHeader', this.showHeader);
+        }
+        if (scrollTop === 0) {
+          this.showHeader = true;
+          bus.$emit('toggleHeader', this.showHeader);
+        }
+        this.scrollTop = scrollTop;
       }
     },
     mounted() {