add toggle-catalog

didi · Nov 15, 2017 · d311cb6 · d311cb6
1 parent cc1e4de
commit d311cb6
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 24 deletions.
diff --git a/document/components/home/home.vue b/document/components/home/home.vue
@@ -1,14 +1,15 @@
 <template>
   <div class="home-view" :class="{ right: showCatalog}">
     <div class="navigator" :class="{ active: showTabs }">
+      <img v-show="isDocs" class="toggle-catalog" @click="toggleCatalog" src="../../../assets/catalog.svg"/>
       <h1 class="logo">
         <router-link to="/"><span>cube-ui</span></router-link>
       </h1>
       <div class="tabs">
         <slot name="nav"></slot>
         <site-lang></site-lang>
       </div>
-      <span class="toggle" @click="toggle">
+      <span class="toggle-nav" @click="toggleNav">
         <img src="../../../assets/nav.svg"/>
       </span>
     </div>
@@ -23,15 +24,26 @@
   export default {
     data() {
       return {
-        showTabs: false
+        showTabs: false,
+        isDocs: this.$route.path.includes('/docs'),
+        showCatalog: false
+      }
+    },
+    watch: {
+      $route(val) {
+        this.isDocs = val.path.includes('/docs')
+        console.log(val)
       }
     },
     components: {
       SiteLang: Lang
     },
     methods: {
-      toggle() {
+      toggleNav() {
         this.showTabs = !this.showTabs
+      },
+      toggleCatalog() {
+        this.showCatalog = !this.showCatalog
       }
     }
   }
@@ -57,17 +69,26 @@
     background-color: $color-regular-blue
     transition: all 0.4s ease
     overflow: hidden
-    .toggle
-      @media screen and (min-width: 960px)
-        display: none
+    .toggle-catalog
+      display: none
       @media screen and (max-width: 960px)
+        display: block
+        padding: 10px 10px
+        position: absolute
+        left: 10px
+        top: 10px
+    .toggle-nav
+      display: none
+      @media screen and (max-width: 960px)
+        display: block
         padding: 10px 10px
         position: absolute
         right: 10px
         top: 0
         color: $color-white
     &.active
       height: 255px
+
     .logo
       @media screen and (min-width: 960px)
         float: left
@@ -95,13 +116,13 @@
       @media screen and (max-width: 960px)
         border-top: solid 1px rgba(255, 255, 255, 0.5)
       .tab
-        @media screen and (min-width: 960px)
-          display: inline-block
-          margin: 0 10px
+        display: inline-block
+        margin: 0 10px
         @media screen and (max-width: 960px)
           display: block
           line-height: 45px
-          padding: 0 20px
+          margin: 0 20px
+          text-align: center
         color: $color-white
         transition: color .2s
         &:hover

diff --git a/document/components/lang/lang.vue b/document/components/lang/lang.vue
@@ -37,12 +37,12 @@
   @import "~@/common/stylus/variable.styl"
   .langs
     display: inline-block
-    @media screen and (min-width: 960px)
-      margin: 0 20px
+    margin: 0 20px
     @media screen and (max-width: 960px)
       display: block
       line-height: 45px
       padding: 0 20px
+      text-align: center
     a
       color: $color-white
       &::after

diff --git a/document/components/viewport/viewport.vue b/document/components/viewport/viewport.vue
@@ -1,10 +1,9 @@
 <template>
   <div class="docs-view">
-    <img class="toggle" @click="toggle" src="../../../assets/catalog.svg"/>
-    <div class="nav-list-wrapper" :class="{ active: showCatalog }">
+    <div class="nav-list-wrapper">
       <side-list :nav-list="navList"></side-list>
     </div>
-    <router-view class="page-doc md-body" v-highlight @catalog-toggle="catalogToggle"></router-view>
+    <router-view class="page-doc md-body" v-highlight></router-view>
     <display></display>
   </div>
 </template>
@@ -27,12 +26,6 @@
         showCatalog: false
       }
     },
-    methods: {
-      toggle() {
-        this.showCatalog = !this.showCatalog
-        this.$emit('catalog-toggle', this.showCatalog)
-      }
-    },
     components: {
       SideList,
       Display
@@ -48,7 +41,7 @@
     width: 100%
     height: 100%
     flex-wrap: wrap
-    .toggle
+    .catalog-toggle
       display: none
       @media screen and (max-width: 960px)
         display: block
@@ -61,8 +54,6 @@
         height: 100%
         overflow: hidden
         transition: all 250ms ease
-        &.active
-          left: 0
   .page-sidelist
     flex: none
     width: 190px