add home-view showCatalog

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

Hide file tree

Showing 2 changed files with 36 additions and 43 deletions.
diff --git a/document/components/home/home.vue b/document/components/home/home.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="home-view">
+  <div class="home-view" :class="{ right: showCatalog}">
     <div class="navigator" :class="{ active: showTabs }">
       <h1 class="logo">
         <router-link to="/"><span>cube-ui</span></router-link>
@@ -45,6 +45,9 @@
     height: 100%
     padding-top: 70px
     box-sizing: border-box
+    transition: all 250ms ease
+    &.right
+      transform: translate(190px, 0)
     .router-view
       height: 100%
   .navigator

diff --git a/document/components/viewport/viewport.vue b/document/components/viewport/viewport.vue
@@ -1,12 +1,10 @@
 <template>
   <div class="docs-view">
-    <div class="nav-list-wrapper" :class="{ active: showNavList }">
-      <div class="toggle" @click="toggle">
-        <embed src="https://raw.githubusercontent.com/didi/cube-ui/dev/assets/catalog.svg" type="image/svg+xml" />
-      </div>
+    <img class="toggle" @click="toggle" src="../../../assets/catalog.svg"/>
+    <div class="nav-list-wrapper" :class="{ active: showCatalog }">
       <side-list :nav-list="navList"></side-list>
     </div>
-    <router-view class="page-doc md-body" v-highlight></router-view>
+    <router-view class="page-doc md-body" v-highlight @catalog-toggle="catalogToggle"></router-view>
     <display></display>
   </div>
 </template>
@@ -26,12 +24,13 @@
     data() {
       return {
         navList: menuConfig[this.lang],
-        showNavList: false
+        showCatalog: false
       }
     },
     methods: {
       toggle() {
-        this.showNavList = !this.showNavList
+        this.showCatalog = !this.showCatalog
+        this.$emit('catalog-toggle', this.showCatalog)
       }
     },
     components: {
@@ -49,55 +48,46 @@
     width: 100%
     height: 100%
     flex-wrap: wrap
+    .toggle
+      display: none
+      @media screen and (max-width: 960px)
+        display: block
+        margin: -68px 0 0 20px
     .nav-list-wrapper
       @media screen and (max-width: 960px)
-        width: 100%
-        height: 46px
+        position: fixed
+        left: -190px
+        top: 0
+        height: 100%
         overflow: hidden
+        transition: all 250ms ease
         &.active
-          height: auto
-          border-bottom: solid 1px $color-grey-opacity
-      .toggle
-        @media screen and (min-width: 960px)
-          display: none
-        @media screen and (max-width: 960px)
-          display: block
-          line-height: 45px
-          margin: 0 20px
-          border-bottom: solid 1px $color-grey-opacity
+          left: 0
   .page-sidelist
-    @media screen and (min-width: 960px)
-      flex: none
-      width: 190px
-      height: 100%
-      padding: 40px 20px
-    @media screen and (max-width: 960px)
-      flex: 1 1 100%
-      height: 150px
-      margin: 20px
+    flex: none
+    width: 190px
+    height: 100%
+    padding: 40px 20px
     box-sizing: border-box
     overflow-y: auto
   .page-doc
-    @media screen and (min-width: 960px)
-      flex: 1
-      height: 100%
-      padding: 44px 20px 20px 20px
-    @media screen and (max-width: 960px)
-      flex: 1 1 100%
-      height: 600px
-      padding: 20px
+    flex: 1
+    height: 100%
+    padding: 44px 20px 20px 20px
     box-sizing: border-box
     overflow-y: auto
+    @media screen and (max-width: 960px)
+      flex: 1 1 100%
+      height: auto
+      padding: 20px 20px 0 20px
     h2:first-child
       margin-top: 0
   .page-display
-    @media screen and (min-width: 960px)
-      flex: 1
-      height: 100%
-    @media screen and (max-width: 960px)
-      flex: 1 1 100%
-      height: 800px
     flex: none
+    height: 100%
     width: 420px
     overflow-y: auto
+    @media screen and (max-width: 960px)
+      flex: 1 1 100%
+      height: 800px
 </style>