From 39b0d0f09471dd106d3af54685eb5d065f187458 Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Thu, 20 Apr 2017 15:39:40 +0800
Subject: [PATCH] fix mobile style

---
 docs/examples-dist/button.vue |  1 +
 docs/examples-dist/switch.vue | 40 +++++++++++++++++++--------
 docs/examples-docs/button.md  |  1 +
 docs/src/ExamplesApp.vue      | 52 ++++++++++++++++++++++++++++++-----
 docs/src/examples.js          | 13 +--------
 5 files changed, 77 insertions(+), 30 deletions(-)

diff --git a/docs/examples-dist/button.vue b/docs/examples-dist/button.vue
index 489b1a2f5..d568e475f 100644
--- a/docs/examples-dist/button.vue
+++ b/docs/examples-dist/button.vue
@@ -78,6 +78,7 @@
   @b button {
     .van-button {
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      user-select: none;
     }
     .van-row {
       padding: 0 15px;
diff --git a/docs/examples-dist/switch.vue b/docs/examples-dist/switch.vue
index 3facc3045..4aeed0725 100644
--- a/docs/examples-dist/switch.vue
+++ b/docs/examples-dist/switch.vue
@@ -15,20 +15,30 @@
 
 
               </example-block><example-block title="禁用状态">
-                <van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
-<div class="demo-switch__text">ON, DISABLED</div>
-
-<van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch>
-<div class="demo-switch__text">OFF, DISABLED</div>
+                <van-row>
+  <van-col span="12">
+    <van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
+    <div class="demo-switch__text">打开</div>
+  </van-col>
+  <van-col span="12">
+    <van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch>
+    <div class="demo-switch__text">关闭</div>
+  </van-col>
+</van-row>
 
 
 
               </example-block><example-block title="loading状态">
-                <van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch>
-<div class="demo-switch__text">ON, LOADING</div>
-
-<van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
-<div class="demo-switch__text">OFF, LOADING</div>
+                <van-row>
+  <van-col span="12">
+    <van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch>
+    <div class="demo-switch__text">打开</div>
+  </van-col>
+  <van-col span="12">
+    <van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
+    <div class="demo-switch__text">关闭</div>
+  </van-col>
+</van-row>
 
 
 
@@ -36,9 +46,17 @@
 <style>
   @component-namespace demo {
     @b switch {
+      .van-switch {
+        float: left;
+        margin: 0 15px;
+      }
+
       @e text {
         display: inline-block;
         line-height: 32px;
+        float: left;
+        font-size: 14px;
+        color: #333;
       }
     }
   }
@@ -51,7 +69,7 @@ export default {
   data() {
     return {
       switchState1: true,
-      switchState2: true,
+      switchState2: false,
       switchStateTrue: true,
       switchStateFalse: false
     };
diff --git a/docs/examples-docs/button.md b/docs/examples-docs/button.md
index 965c5f23b..dfdf44e9a 100644
--- a/docs/examples-docs/button.md
+++ b/docs/examples-docs/button.md
@@ -3,6 +3,7 @@
   @b button {
     .van-button {
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      user-select: none;
     }
     .van-row {
       padding: 0 15px;
diff --git a/docs/src/ExamplesApp.vue b/docs/src/ExamplesApp.vue
index 975e7458b..4dfd68554 100644
--- a/docs/src/ExamplesApp.vue
+++ b/docs/src/ExamplesApp.vue
@@ -1,18 +1,54 @@
 <template>
-  <div class="examples-container">
-    <router-view></router-view>
-    <div class="footer">
+  <div class="examples-container" ref="container">
+    <div class="demo-content" ref="demo">
+      <router-view></router-view>
+    </div>
+    <div class="footer" :class="{ 'footer-fixed': isFooterFixed }">
       <img src="https://img.yzcdn.cn/upload_files/2017/04/18/FjupTe9o1apJhJr5qR-4ucXqPs7e.png" alt="logo" class="zanui-logo">
     </div>
   </div>
 </template>
 
 <script>
+import Vue from 'vue';
+
 export default {
   computed: {
     visible() {
       return ['/'].indexOf(this.$route.path) < 0;
     }
+  },
+
+  data() {
+    return {
+      isFooterFixed: false
+    };
+  },
+
+  mounted() {
+    this.computeFooterFixed();
+  },
+
+  watch: {
+    '$route.path': function(val) {
+      Vue.nextTick(() => {
+        this.computeFooterFixed();
+      });
+    }
+  },
+
+  methods: {
+    computeFooterFixed() {
+      if (this.$refs.container) {
+        const demoSize = this.$refs.demo.getBoundingClientRect();
+        const containerSize = this.$refs.container.getBoundingClientRect();
+        if (demoSize.height < containerSize.height - 54) {
+          this.isFooterFixed = true;
+          return;
+        }
+      }
+      this.isFooterFixed = false;
+    }
   }
 };
 </script>
@@ -48,7 +84,6 @@ export default {
   }
 
   .examples-container {
-    padding-bottom: 54px;
     height: 100%;
     overflow: auto;
     background: #f8f8f8;
@@ -89,10 +124,13 @@ export default {
     margin-top: 30px;
     width: 100%;
     padding: 10px 0 20px;
-    position: fixed;
-    bottom: 0;
-    left: 0;
     background: #f8f8f8;
+    
+    &.footer-fixed {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
   }
 
   .zanui-logo {
diff --git a/docs/src/examples.js b/docs/src/examples.js
index 843c23a9b..48e109433 100644
--- a/docs/src/examples.js
+++ b/docs/src/examples.js
@@ -27,25 +27,14 @@ const router = new VueRouter({
   routes: routesConfig
 });
 
-let indexScrollTop = 0;
 router.beforeEach((route, redirect, next) => {
   if (route.path !== '/') {
-    indexScrollTop = document.body.scrollTop;
+    window.scrollTo(0, 0);
   }
   document.title = route.meta.title || document.title;
   next();
 });
 
-router.afterEach(route => {
-  if (route.path !== '/') {
-    document.body.scrollTop = 0;
-  } else {
-    Vue.nextTick(() => {
-      document.body.scrollTop = indexScrollTop;
-    });
-  }
-});
-
 new Vue({ // eslint-disable-line
   render: h => h(App),
   router