Merge pull request #104 from eleme/next-doc

changelog

CHANGELOG.md

@@ -2,34 +2,34 @@
 
 ### 0.2.0
 
-`2016-07-29`
+*2016-07-29*
 
 - 增加 grid 相关组件
 - form-item 增加 required 属性
 
-*非兼容性更新*
+#### 非兼容性更新
 
 - progress 的 percentage 属性值范围从 0～1 改变为 1~100.
-
+  
 ### 0.1.9
 
-`2016-07-12`
+*2016-07-12*
 
 - 增加 menu 组件
 
-*非兼容性更新*
+#### 非兼容性更新
 
 - 使用了新的图标集，原有的某些图标可能不存在了
 
 ### 0.1.8
 
-`2016-07-07`
+*2016-07-07*
 
 - dropdown 和 tooltip 首次出现闪动问题
 
 ### 0.1.7
 
-`2016-07-06`
+*2016-07-06*
 
 - dropdown 增加触发下拉菜单方式的参数
 - 修正若干组件的样式问题和浏览器兼容问题
@@ -37,23 +37,25 @@
 - 在 radio-group 里增加 radio-button 类型
 - 为 select 添加 singleCancelable 选项
 
-### 0.1.6
+### 0.1.6 
+
+*2016-06-30*
 
-`2016-06-30`
 - dropdown-menu 改为动态创建
 - 修复 textarea 缺失 model 参数的 bug
 - 修复 pagination 和 input-group 在 safari 下的样式问题
 
 ### 0.1.5
 
-`2016-06-29`
+*2016-06-29*
+
 - 为 MessageBox 和 Notification 注册全局方法
 - button 的 loading 状态时改为不触发 hover 和点击等操作
 - input组件 增加 maxlength 和 minlength 属性支持
 
 ### 0.1.4
 
-`2016-06-29`
+*2016-06-29*
 
 - 增加 Tabs、Form、MessageBox、Alert、Notification、Slider 组件
 - dropdown menu 现在是直接插入到 body 节点下，并且修正了自适应宽度的 bug
@@ -62,4 +64,3 @@
 - 增加 radio-group 组件
 - 增加 checkbox-group 组件
 - Select 组件 API 更新，现在的用法和原生 select 标签更加相似
-

examples/app.vue

@@ -26,7 +26,31 @@
     min-height: 100%;
   }
 
-  .page-cnt {
+  .container,
+  .page-container {
+    width: 960px;
+    margin: 0 auto;
+  }
+
+  .page-container {
+    padding-top: 55px;
+
+    h2 {
+      font-size: 28px;
+      color: #1f2d3d;
+      margin: 0;
+    }
+    h3 {
+      font-size: 22px;
+    }
+    h2, h3, h4, h5 {
+      font-weight: normal;
+      color: #1f2f3d;
+    }
+    p {
+      font-size: 14px;
+      color: #5e6d82;
+    }
   }
   .demo {
     margin: 20px 0;

examples/assets/styles/common.css

@@ -1,93 +1 @@
-.app__content {
-  min-width: 740px;
 
-  &.no-toc {
-    min-width: 660px;
-
-    .app__main {
-      max-width: 906px;
-      margin: 36px 42px;
-    }
-  }
-
-  .app__main {
-    margin: 36px 242px 36px 42px;
-  }
-}
-
-.app__main.commonpage {
-  p {
-    color: #333;
-    font-size: 14px;
-    line-height: 22px;
-    margin-bottom: 0;
-  }
-
-  small {
-    color: #ccc;
-    font-size: 12px;
-    font-weight: normal;
-    padding-left: 20px;
-  }
-
-  ul {
-    list-style: none;
-    padding-left: 0;
-    margin: 0;
-  }
-
-  li {
-    color: #333;
-    font-size: 14px;
-    line-height: 22px;
-
-    &::before {
-      content: "-";
-      margin: 0 4px;
-    }
-  }
-
-  hr {
-    border-color: #e4e4e4;
-    border-style: solid;
-    margin: 36px 0;
-    border-top: 0;
-  }
-
-  a {
-    color: #2270c1;
-  }
-
-  code {
-    background-color: #f8f8f8;
-    padding: 4px;
-    color: #666;
-  }
-
-  .hljs {
-    max-height: 100%;
-    min-height: 100%;
-    background-color: #f8f8f8;
-    border: none;
-    color: #666;
-    padding: 20px 36px;
-    margin: 16px 0;
-
-    &::before {
-      content: none;
-    }
-
-    .hljs-comment, .hljs-quote {
-      color: #aaa;
-    }
-
-    .hljs__button {
-      display: none;
-    }
-  }
-}
-
-.container {
-  width: 960px;
-  margin: 0 auto;
-}

examples/components/header.vue

@@ -140,7 +140,6 @@
     watch: {
     },
     mounted() {
-      var scrollTop = 0;
       function scroll(fn) {
         var beforeScrollTop = document.body.scrollTop;
 
@@ -152,7 +151,6 @@
 
           fn(delta > 0 ? 'down' : 'up');
           beforeScrollTop = afterScrollTop;
-          scrollTop = afterScrollTop;
         }, false);
       }
       scroll((direction) => {

examples/components/side-nav.vue

@@ -10,6 +10,7 @@
     ul {
       padding: 0;
       margin: 0;
+      overflow: hidden;
     }
 
     .nav-item {

examples/pages/changelog.vue

@@ -1,3 +1,159 @@
+<style>
+  .page-changelog {
+    padding-bottom: 100px;
+
+    .fr {
+      float: right;
+    }
+    h2 {
+      margin-bottom: 40px;
+    }
+    .timeline {
+      margin: 0 0 0 105px;
+      padding-left: 25px;
+      position: relative;
+      color: #5e6d82;
+
+      &:before {
+        content: '';
+        width: 1px;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 10px;
+        background-color: #eaeefa;
+      }
+
+      > li {
+        list-style: none;
+        position: relative;
+
+        &:not(:last-child) {
+          margin-bottom: 50px;
+        }
+
+        &:first-child {
+          margin-top: -10px;
+
+          h3:before {
+            left: -33px;
+            top: 5px;
+            width: 16px;
+            height: @width;
+            background-color: #81c8fa;
+            border: 0;
+          }          
+        }
+      }
+
+      ul {
+        padding-left: 0;
+      }
+
+      li li {
+        font-size: 14px;
+        list-style: none;
+        padding-left: 0;
+
+        &:before {
+          content: '';
+          circle: 4px #5e6d82;
+          margin-right: 5px;
+          display: inline-block;
+          vertical-align: middle;
+        }
+      }
+
+      h3 {
+        margin: 0 0 10px;
+
+        &:before {
+          content: '';
+          display: block;
+          position: absolute;
+          left: -31px;
+          top: 7px;
+          circle: 13px transparent;
+          border: 2px solid #2ca2fc;
+          box-sizing: border-box;
+        }
+      }
+      h4 {
+        margin: 50px 0 10px;
+      }
+      p {
+        margin: 0;
+      }
+
+      em {
+        position: absolute;
+        left: -127px;
+        font-style: normal;
+        top: 4px;
+        font-size: 14px;
+        color: #99a9bf;
+      }
+    }
+  }
+</style>
 <template>
-  <div>changelog</div>
-</template>
+  <div class="page-container page-changelog">
+    <h2><el-button class="fr">Github Releases</el-button>更新日志</h2>
+    <ul class="timeline" ref="timeline">
+    </ul>
+    <change-log ref="changeLog"></change-log>
+    <!-- <ul class="timeline">
+      <li>
+        <h3>2.0.0</h3>
+        <em>2016.06.29</em>
+        <p>很高兴的通知各位,经过四个月时间的紧密开发,Element v1.0.0 终于发布了。从去年 5 月 7 日提交第一行代码以来, 经过整整一年的开发迭代,Element 受到社区的大量关注,使用的公司和产品持续增加,已经日趋成熟。这个版本我们重构了底层代码和站点,持续完善现有组件功能和优化细节,其中很多都来自社区的贡献,无法一一感谢,欢迎各位持续关注和鞭策。在升级过程中遇到任何问题,请及时反馈给我们。</p>
+        <h4>新增</h4>
+        <ul>
+          <li>支持按需加载。可参考 element-init 的模版代码, 需要配合 babel-plugin-antd 插件和 style 配置进行使用。#900</li>
+          <li>结全新单页站点，使用 React 和 antd 进行了彻底重构，加载更快，访问更流畅。</li>
+        </ul>
+        <h4>优化</h4>
+        <ul>
+          <li>支持按需加载。可参考 element-init 的模版代码, 需要配合 babel-plugin-antd 插件和 style 配置进行使用。#900</li>
+          <li>结全新单页站点，使用 React 和 antd 进行了彻底重构，加载更快，访问更流畅。</li>
+        </ul>
+      </li>
+      <li>
+        <h3>1.6.1</h3>
+        <em>2016.06.29</em>
+        <ul>
+          <li>支持按需加载。可参考 element-init 的模版代码, 需要配合 babel-plugin-antd 插件和 style 配置进行使用。#900</li>
+          <li>结全新单页站点，使用 React 和 antd 进行了彻底重构，加载更快，访问更流畅。</li>
+        </ul>
+      </li>
+    </ul> -->
+  </div>
+</template>
+<script>
+  import ChangeLog from '../../CHANGELOG.md';
+  export default {
+    components: {
+      ChangeLog
+    },
+    data() {
+      return {
+        count: 3
+      };
+    },
+    mounted() {
+      var changeLog = this.$refs.changeLog;
+      var changeLogNodes = changeLog.$el.children;
+      var fragments = '<li>' + changeLogNodes[1].outerHTML;
+
+      for (let len = changeLogNodes.length, i = 2; i < len; i++) {
+        let node = changeLogNodes[i];
+        fragments += node.tagName !== 'H3'
+          ? changeLogNodes[i].outerHTML
+          : `</li><li>${changeLogNodes[i].outerHTML}`;
+      }
+      this.$refs.timeline.innerHTML = `${fragments}</li>`;
+
+      changeLog.$el.remove();
+    }
+  };
+</script>

examples/pages/component.vue

@@ -1,26 +1,13 @@
 <style>
   .page-component {
-    padding: 50px 0 95px;
+    padding-bottom: 95px;
   }
   .el-col {
     box-sizing: border-box;
   }
   .page-component .content > {
-    h2, h3, h4, h5 {
-      font-weight: normal;
-      color: #1f2f3d;
-    }
-    h2 {
-      margin: 0;
-      font-size: 28px;
-    }
     h3 {
       margin: 45px 0 15px;
-      font-size: 22px;
-    }
-    p {
-      font-size: 14px;
-      color: #5e6d82;
     }
     table {
       width: 100%;
@@ -42,7 +29,7 @@
   }
 </style>
 <template>
-  <div class="page-component container">
+  <div class="page-container page-component">
     <el-row :gutter="25">
       <el-col :span="6">
         <side-nav :data="navsData" base="/component"></side-nav>

examples/pages/design.vue

@@ -1,6 +1,6 @@
 <style scoped>
   .cards {
-    margin-bottom: 70px;
+    margin: 30px 0 70px;
   }
   .card {
     background: #fbfcfd;

examples/pages/guide.vue

@@ -3,7 +3,7 @@
     box-sizing: border-box;
   }
   .page-guide {
-    padding: 50px 0 95px;
+    padding: 55px 0 95px;
 
     .content {
       padding-left: 25px;
@@ -50,7 +50,7 @@
   }
 </style>
 <template>
-  <div class="page-guide container">
+  <div class="page-container page-guide">
     <el-row>
       <el-col :span="5">
         <side-nav :data="navsData" base="/guide"></side-nav>

examples/pages/resource.vue

@@ -1,6 +1,6 @@
 <style scoped>
   .page-resource {
-    padding-top: 40px;
+    padding-top: 55px;
   }
   .cards {
     margin: 35px auto 110px;
@@ -20,6 +20,14 @@
       list-style: none;
     }
   }
+  h2 {
+    font-size: 28px;
+    margin: 0;
+  }
+  p {
+    font-size: 14px;
+    color: #5e6d82;
+  }
   .card {
     height: 394px;
     width: 100%;
@@ -67,7 +75,7 @@
   }
 </style>
 <template>
-  <div class="page-resource container">
+  <div class="page-container page-resource">
     <h2>资源</h2>
     <p>这里提供 Element 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。</p>
     <div class="cards">