docs style groundwork (#7281)

* docs style groundwork

* update docs style

CHANGELOG.en-US.md

@@ -641,4 +641,4 @@ Breaking change
 
 *2016-11-9*
 
-Element 1.0.0 released.
+- Element 1.0.0 released.

CHANGELOG.zh-CN.md

@@ -777,4 +777,4 @@
 
 *2016-08-30*
 
-Element 1.0.0-rc.1 发布
+- Element 1.0.0-rc.1 发布

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 || '');
       }
     },
 

examples/bus.js

@@ -0,0 +1,2 @@
+import Vue from 'vue';
+export default new Vue();

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);
         });

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', () => {
+        window.addEventListener('scroll', fn, false);
-          fn();
-        }, false);
       }
       scroll(() => {
         if (this.isHome) {

examples/pages/template/component.tpl

@@ -1,10 +1,43 @@
 <style>
   .page-component {
-    padding-bottom: 95px;
     box-sizing: border-box;
-    .content {
+    height: 100%;
-      margin-left: -1px;
+  
+    &.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>
+    <div
-      <el-col :xs="24" :sm="6">
+      class="page-component__nav"
-        <side-nav :data="navsData[lang]" :base="`/${ lang }/component`"></side-nav>
+      :class="{ 'is-extended': !showHeader }">
-      </el-col>
+      <side-nav :data="navsData[lang]" :base="`/${ lang }/component`"></side-nav>
-      <el-col :xs="24" :sm="18">
+    </div>
-        <router-view class="content"></router-view>
+    <div class="page-component__content">
-        <footer-nav></footer-nav>
+      <router-view class="content"></router-view>
-      </el-col>
+      <footer-nav></footer-nav>
-    </el-row>
+    </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() {