From 63b465086df45ccb31f71f0ef2cc1e914452f23c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?=
 <Leopoldthecoder@users.noreply.github.com>
Date: Fri, 18 Nov 2016 16:49:07 +0800
Subject: [PATCH] Homepage: add responsive (#1177)

---
 CHANGELOG.en-US.md                            |  2 +-
 CHANGELOG.zh-CN.md                            |  2 +-
 examples/app.vue                              |  8 +++
 examples/assets/images/element-logo-small.svg | 12 ++++
 examples/components/footer.vue                |  8 +++
 examples/components/header.vue                | 45 ++++++++++++-
 examples/components/side-nav.vue              | 64 +++++++++++++++++--
 examples/index.tpl                            |  1 +
 examples/pages/template/component.tpl         |  5 +-
 examples/pages/template/design.tpl            |  8 +--
 examples/pages/template/guide.tpl             | 15 ++++-
 examples/pages/template/index.tpl             | 44 ++++++++++++-
 examples/pages/template/resource.tpl          | 18 ++++++
 13 files changed, 215 insertions(+), 17 deletions(-)
 create mode 100644 examples/assets/images/element-logo-small.svg

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 2f64e18a5..fd5a69fcd 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -23,7 +23,7 @@
 - Fixed DiatePicker not refresh year when switched in month picker, #1070
 - Added $loading service
 - Added `manual` trigger in Popover
-- Added props: `nodeKey` `emptyText` `checkStrictly` `defaultExpandAll` `autoExpandParent` `defaultCheckedKeys` `defaultExpandedKeys` and method: `setCheckedNodes` for Tree
+- Added props: `nodeKey`, `emptyText`, `checkStrictly`, `defaultExpandAll`, `autoExpandParent`, `defaultCheckedKeys`, `defaultExpandedKeys` and method: `setCheckedNodes` for Tree
 
 ### 1.0.0
 
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 88a673e31..45d5486a3 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -23,7 +23,7 @@
 - 修复 DatePicker 月份选择器直接切换年份并未更新年份数据 #1070
 - 新增 $loading 服务，用以调用 Loading
 - 新增 Popover 可手动控制显示隐藏，将 trigger 设置为 `manual`
-- 新增 Tree 的 `nodeKey` `emptyText` `checkStrictly` `defaultExpandAll` `autoExpandParent` `defaultCheckedKeys` `defaultExpandedKeys` 属性，`setCheckedNodes` 方法。
+- 新增 Tree 的 `nodeKey`、`emptyText`、`checkStrictly`、`defaultExpandAll`、`autoExpandParent`、`defaultCheckedKeys`、`defaultExpandedKeys` 属性，`setCheckedNodes` 方法。
 
 
 ### 1.0.0
diff --git a/examples/app.vue b/examples/app.vue
index 6fb049ce3..e6297e8a9 100644
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -54,6 +54,7 @@
   .container,
   .page-container {
     width: 1140px;
+    padding: 0 30px;
     margin: 0 auto;
   }
 
@@ -101,6 +102,13 @@
       width: 100%;
     }
   }
+
+  @media (max-width: 768px) {
+    .container,
+    .page-container {
+      padding: 0 20px;
+    }
+  }
 </style>
 
 <template>
diff --git a/examples/assets/images/element-logo-small.svg b/examples/assets/images/element-logo-small.svg
new file mode 100644
index 000000000..6319a87e9
--- /dev/null
+++ b/examples/assets/images/element-logo-small.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="30px" height="30px" viewBox="0 0 38 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 40 (33762) - http://www.bohemiancoding.com/sketch -->
+    <title>Shape Copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="v2.2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#FFFFFF">
+            <path d="M212.135441,45.1578077 Z M103.416502,46.2175511 C103.407008,47.7945682 102.587841,48.1463474 102.587841,48.1463474 C102.587841,48.1463474 88.4520478,56.3145087 87.5329956,56.8262751 C86.622336,57.2171561 86.0136703,56.8262751 86.0136703,56.8262751 C86.0136703,56.8262751 71.2225706,48.2479572 70.6826962,47.8708444 C70.1426843,47.4937316 70.1301643,46.9063774 70.1301643,46.9063774 C70.1301643,46.9063774 70.1450232,29.9199174 70.1301643,29.1333364 C70.1153053,28.3466177 71.0969576,27.7555461 71.0969576,27.7555461 L85.8755373,19.2134387 C86.7853714,18.7332016 87.6711286,19.2134387 87.6711286,19.2134387 C87.6711286,19.2134387 100.726623,26.8020937 102.173442,27.6177257 C103.591507,28.2919577 103.416502,29.6843424 103.416502,29.6843424 C103.416502,29.6843424 103.425307,44.7519192 103.416502,46.2175511 L103.416502,46.2175511 Z M97.5160105,29.1691339 C94.4900173,27.4274483 87.3615842,23.2971063 87.3615842,23.2971063 C87.3615842,23.2971063 86.6661039,22.9212326 85.9517747,23.2971063 L74.3487406,29.98215 C74.3487406,29.98215 73.5780025,30.4449014 73.589697,31.0604805 C73.6013915,31.6760597 73.589697,44.9698708 73.589697,44.9698708 C73.589697,44.9698708 73.5994654,45.4295932 74.0234951,45.7246472 C74.4473873,46.0197011 86.0601898,52.7332451 86.0601898,52.7332451 C86.0601898,52.7332451 86.538152,53.0391759 87.2530315,52.7332451 C87.9746526,52.3327262 99.0730335,45.9402582 99.0730335,45.9402582 C99.0730335,45.9402582 99.7162325,45.6648929 99.7236619,44.4307056 C99.7257257,44.0747959 99.7265512,42.6932881 99.7266887,40.9575229 L86.6600502,48.8752394 L86.6600502,45.846221 C86.6600502,44.6021205 87.6231289,43.7809811 87.6231289,43.7809811 L99.1807607,36.8165793 C99.6168978,36.3611251 99.7068768,35.6315447 99.7254505,35.3556287 C99.7250378,34.0904627 99.7244874,32.9852841 99.7240747,32.2851678 L86.6600502,40.2012321 L86.6600502,37.034531 C86.6600502,35.7904305 87.4855462,35.2446564 87.4855462,35.2446564 L97.5160105,29.1691339 Z" id="Shape-Copy"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/examples/components/footer.vue b/examples/components/footer.vue
index 99f24a768..29cf04c8a 100644
--- a/examples/components/footer.vue
+++ b/examples/components/footer.vue
@@ -40,6 +40,7 @@
 
     .container {
       height: 100%;
+      box-sizing: border-box;
     }
 
     .footer-main {
@@ -122,6 +123,13 @@
       margin: 10px;
     }
   }
+  @media (max-width: 768px) {
+    .footer {
+      .footer-social {
+        display: none;
+      }
+    }
+  }
 </style>
 
 <script type="text/babel">
diff --git a/examples/components/header.vue b/examples/components/header.vue
index 75877a788..14d0cb751 100644
--- a/examples/components/header.vue
+++ b/examples/components/header.vue
@@ -15,6 +15,7 @@
 
     .container {
       height: 100%;
+      box-sizing: border-box;
     }
 
     h1 {
@@ -51,9 +52,13 @@
       padding: 0;
       margin: 0;
     }
-    .nav-logo {
+    .nav-logo,
+    .nav-logo-small {
       vertical-align: sub;
     }
+    .nav-logo-small {
+      display: none;
+    }
     .nav-item {
       margin: 0;
       float: left;
@@ -116,6 +121,40 @@
     top: 0;
     background-color: rgba(32, 160, 255, 0);
   }
+
+  @media (max-width: 850px) {
+    .header {
+      .nav-logo {
+        display: none;
+      }
+      .nav-logo-small {
+        display: inline-block;
+      }
+      .nav-item {
+        margin-left: 6px;
+
+        &:last-child {
+          margin-left: 10px;
+        }
+         
+        a {
+          padding: 0 5px;
+        }
+      }
+    }
+  }
+  @media (max-width: 700px) {
+    .header {
+      .container {
+        padding: 0 12px;
+      }
+      .nav-item a,
+      .nav-lang {
+        font-size: 12px;
+        vertical-align: top;
+      }
+    }
+  }
 </style>
 <template>
   <div class="headerWrapper">
@@ -131,6 +170,10 @@
             src="../assets/images/element-logo.svg"
             alt="element-logo"
             class="nav-logo">
+          <img
+            src="../assets/images/element-logo-small.svg"
+            alt="element-logo"
+            class="nav-logo-small">
         </router-link></h1>
         <ul class="nav">
           <li class="nav-item">
diff --git a/examples/components/side-nav.vue b/examples/components/side-nav.vue
index 22a7a151b..1c6fae66d 100644
--- a/examples/components/side-nav.vue
+++ b/examples/components/side-nav.vue
@@ -55,10 +55,10 @@
   }
 </style>
 <template>
-  <div class="side-nav">
+  <div class="side-nav" :style="navStyle">
     <ul>
       <li class="nav-item" v-for="item in data">
-        <a v-if="!item.path">{{item.name}}</a>
+        <a v-if="!item.path" @click="expandMenu">{{item.name}}</a>
         <router-link
           v-else
           active-class="active"
@@ -79,7 +79,7 @@
         </ul>
         <template v-if="item.groups">
           <div class="nav-group" v-for="group in item.groups">
-            <div class="nav-group__title">{{group.groupName}}</div>
+            <div class="nav-group__title" @click="expandMenu">{{group.groupName}}</div>
             <ul class="pure-menu-list">
               <li
                 class="nav-item"
@@ -110,8 +110,64 @@
     data() {
       return {
         highlights: [],
-        navState: []
+        navState: [],
+        isSmallScreen: false,
       };
+    },
+    watch: {
+      '$route.path'() {
+        this.handlePathChange();
+      }
+    },
+    computed: {
+      navStyle() {
+        return this.isSmallScreen ? { 'padding-bottom': '60px' } : {};
+      }
+    },
+    methods: {
+      handleResize() {
+        this.isSmallScreen = document.documentElement.clientWidth < 768;
+        this.handlePathChange();
+      },
+      handlePathChange() {
+        if (!this.isSmallScreen) {
+          this.expandAllMenu();
+          return;
+        }
+        this.$nextTick(() => {
+          this.hideAllMenu();
+          let activeAnchor = this.$el.querySelector('a.active');
+          let ul = activeAnchor.parentNode;
+          while (ul.tagName !== 'UL') {
+            ul = ul.parentNode;
+          }
+          ul.style.height = 'auto';
+        });
+      },
+      hideAllMenu() {
+        [].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {
+          ul.style.height = '0';
+        });
+      },
+      expandAllMenu() {
+        [].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {
+          ul.style.height = 'auto';
+        });
+      },
+      expandMenu(event) {
+        if (!this.isSmallScreen) return;
+        let target = event.currentTarget;
+        if (!target.nextElementSibling || target.nextElementSibling.tagName !== 'UL') return;
+        this.hideAllMenu();
+        event.currentTarget.nextElementSibling.style.height = 'auto';
+      }
+    },
+    mounted() {
+      this.handleResize();
+      window.addEventListener('resize', this.handleResize);
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.handleResize);
     }
   };
 </script>
diff --git a/examples/index.tpl b/examples/index.tpl
index 9d136304f..11886406e 100644
--- a/examples/index.tpl
+++ b/examples/index.tpl
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <link rel="stylesheet" href="//at.alicdn.com/t/font_1473762766_7074292.css">
     <title>Element</title>
   </head>
diff --git a/examples/pages/template/component.tpl b/examples/pages/template/component.tpl
index c13c4839f..328454b81 100644
--- a/examples/pages/template/component.tpl
+++ b/examples/pages/template/component.tpl
@@ -1,6 +1,7 @@
 <style>
   .page-component {
     padding-bottom: 95px;
+    box-sizing: border-box;
   }
   .page-component {
     .content {
@@ -41,10 +42,10 @@
 <template>
   <div class="page-container page-component">
     <el-row>
-      <el-col :span="6">
+      <el-col :xs="24" :sm="6">
         <side-nav :data="navsData[lang]" :base="`/${ lang }/component`"></side-nav>
       </el-col>
-      <el-col :span="18">
+      <el-col :xs="24" :sm="18">
         <router-view class="content"></router-view>
         <footer-nav></footer-nav>
       </el-col>
diff --git a/examples/pages/template/design.tpl b/examples/pages/template/design.tpl
index 0951fdfa6..eb7db6064 100644
--- a/examples/pages/template/design.tpl
+++ b/examples/pages/template/design.tpl
@@ -28,28 +28,28 @@
   <div>
     <h2><%= 1 ></h2>
     <el-row :gutter="14" class="cards">
-      <el-col :span="6">  
+      <el-col :xs="12" :sm="6">
         <div class="card">
           <img src="~examples/assets/images/consistency.png" alt="Consistency">
           <h4><%= 2 ></h4>
           <span><%= 3 ></span>
         </div>
       </el-col>
-      <el-col :span="6">  
+      <el-col :xs="12" :sm="6">
         <div class="card">
           <img src="~examples/assets/images/feedback.png" alt="Feedback">
           <h4><%= 4 ></h4>
           <span><%= 5 ></span>
         </div>
       </el-col>
-      <el-col :span="6">  
+      <el-col :xs="12" :sm="6">
         <div class="card">
           <img src="~examples/assets/images/efficiency.png" alt="Efficiency">
           <h4><%= 6 ></h4>
           <span><%= 7 ></span>
         </div>
       </el-col>
-      <el-col :span="6">  
+      <el-col :xs="12" :sm="6">
         <div class="card">
           <img src="~examples/assets/images/controllability.png" alt="Controllability">
           <h4><%= 8 ></h4>
diff --git a/examples/pages/template/guide.tpl b/examples/pages/template/guide.tpl
index 0126a2161..b3fe6225c 100644
--- a/examples/pages/template/guide.tpl
+++ b/examples/pages/template/guide.tpl
@@ -1,6 +1,7 @@
 <style>
   .page-guide {
-    padding: 55px 0 95px;
+    padding: 55px 30px 95px;
+    box-sizing: border-box;
 
     .content {
       padding-left: 25px;
@@ -48,14 +49,22 @@
       }
     }
   }
+
+  @media (max-width: 768px) {
+    .page-guide {
+      .content {
+        padding-left: 0;
+      }
+    }
+  }
 </style>
 <template>
   <div class="page-container page-guide">
     <el-row>
-      <el-col :span="5">
+      <el-col :xs="24" :sm="5">
         <side-nav :data="navsData" :base="`/${ lang }/guide`"></side-nav>
       </el-col>
-      <el-col :span="19">
+      <el-col :xs="24" :sm="19">
         <router-view class="content"></router-view>
       </el-col>
     </el-row>
diff --git a/examples/pages/template/index.tpl b/examples/pages/template/index.tpl
index efdb71bab..d56f599e7 100644
--- a/examples/pages/template/index.tpl
+++ b/examples/pages/template/index.tpl
@@ -136,7 +136,6 @@
       display: block;
 
       &:hover {
-        background-color: #20a0ff;
         color: #fff;
         background: #20a0ff;
       }
@@ -153,6 +152,49 @@
   @media (max-width: 1140px) {
     .cards {
       width: 100%;
+      .container {
+        width: 100%;
+      }
+    }
+    .banner .container {
+      width: 100%;
+      box-sizing: border-box;
+    }
+    .banner img {
+      right: 0;
+    }
+  }
+
+  @media (max-width: 1000px) {
+    .banner .container {
+      img {
+        display: none;
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    .cards {
+      li {
+        width: 80%;
+        margin: 0 auto 20px;
+        float: none;
+      }
+      .card {
+        height: auto;
+        padding-bottom: 54px;
+      }
+    }
+    .banner-desc {
+      #line2 {
+        display: none;
+      }
+      h2 {
+        font-size: 32px;
+      }
+      p {
+        width: auto;
+      }
     }
   }
 </style>
diff --git a/examples/pages/template/resource.tpl b/examples/pages/template/resource.tpl
index 12777d4e3..99949d7cf 100644
--- a/examples/pages/template/resource.tpl
+++ b/examples/pages/template/resource.tpl
@@ -1,6 +1,7 @@
 <style scoped>
   .page-resource {
     padding-top: 55px;
+    box-sizing: border-box;
   }
   .cards {
     margin: 35px auto 110px;
@@ -76,6 +77,23 @@
       margin-top: 20px;
     }
   }
+  @media (max-width: 850px) {
+    .cards {
+      li {
+        max-width: 500px;
+        float: none;
+        margin: 10px auto 30px;
+        width: 80%;
+        .card {
+          height: auto;
+          padding-bottom: 20px;
+        }
+      }
+      h3 {
+        height: auto;
+      }
+    }
+  }
 </style>
 <template>
   <div class="page-container page-resource">