Merge pull request #87 from vuepress-reco/feature/reco

Feature/reco

components/Common.vue

@@ -5,35 +5,37 @@
     @touchstart="onTouchStart"
     @touchend="onTouchEnd">
     <transition name="fade">
-      <LoadingPage v-if="firstLoad" />
-      <Password v-else-if="!isHasKey" />
-      <div v-else>
-        <Navbar
-        v-if="shouldShowNavbar"
-        @toggle-sidebar="toggleSidebar"/>
-
-        <div
-          class="sidebar-mask"
-          @click="toggleSidebar(false)"></div>
-
-        <Sidebar
-          :items="sidebarItems"
-          @toggle-sidebar="toggleSidebar">
-          <slot
-            name="sidebar-top"
-            slot="top"/>
-          <slot
-            name="sidebar-bottom"
-            slot="bottom"/>
-        </Sidebar>
-
-        <Password v-if="!isHasPageKey" :isPage="true"></Password>
-        <div v-else>
-          <slot></slot>
-          <Comments :isShowComments="shouldShowComments"/>
-        </div>
-      </div>
+      <LoadingPage v-show="firstLoad" class="loading-wrapper" />
     </transition>
+    <transition name="fade">  
+      <Password v-show="!isHasKey" class="password-wrapper-out" key="out" />
+    </transition>  
+    <div :class="{ 'hide': firstLoad || !isHasKey }">
+      <Navbar
+      v-if="shouldShowNavbar"
+      @toggle-sidebar="toggleSidebar"/>
+
+      <div
+        class="sidebar-mask"
+        @click="toggleSidebar(false)"></div>
+
+      <Sidebar
+        :items="sidebarItems"
+        @toggle-sidebar="toggleSidebar">
+        <slot
+          name="sidebar-top"
+          slot="top"/>
+        <slot
+          name="sidebar-bottom"
+          slot="bottom"/>
+      </Sidebar>
+
+      <Password v-show="!isHasPageKey" :isPage="true" class="password-wrapper-in" key="in"></Password>
+      <div :class="{ 'hide': !isHasPageKey }">
+        <slot></slot>
+        <Comments :isShowComments="shouldShowComments"/>
+      </div>
+    </div>
     <GA></GA>
   </div>
 </template>
@@ -202,6 +204,37 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+.theme-container
+  .loading-wrapper
+    position absolute
+    z-index 22
+    top 0
+    bottom 0
+    left 0
+    right 0
+    margin auto
+    background #fff
+  .password-wrapper-out  
+    position absolute
+    z-index 21
+    top 0
+    bottom 0
+    left 0
+    right 0
+    margin auto
+    background #fff
+  .password-wrapper-in  
+    position absolute
+    z-index 8
+    top 0
+    bottom 0
+    left 0
+    right 0
+    margin auto
+    background #fff
+  .hide
+    height 100vh
+    overflow hidden
 .theme-container.no-sidebar
   .comments-wrapper
     padding-left 2rem

components/Password.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="password-shadow" :class="{'is-home': !isPage}">
-    <Background />
+    <!-- <Background /> -->
     <h3 class="title">{{isPage ? $frontmatter.title : $site.title}}</h3>
     <p class="description" v-if="!isPage">{{$site.description}}</p>
     <label class="inputBox" id="box">
@@ -73,7 +73,7 @@ export default {
         return
       }
 
-      const width = document.getElementById('box').getClientRects()[0].width
+      const width = document.getElementById('box').style.width
 
       passwordBtn.style.width = `${width - 2}px`
       passwordBtn.style.opacity = 1
@@ -245,7 +245,7 @@ export default {
       right 0
       top 43%
       margin auto
-      padding-left 20px
+      padding-left 16.4rem
       box-sizing border-box
       opacity 0.9
       input{
@@ -310,6 +310,11 @@ export default {
       }
     }
   }
+  @media (max-width: $MQNarrow) {
+    .inputBox{
+      padding-left $mobileSidebarWidth
+    }  
+  }
 }
 
 // narrow desktop / iPad

components/SidebarLink.vue

@@ -79,31 +79,34 @@ function renderChildren (h, children, path, route, maxDepth, depth = 1) {
 
 <style lang="stylus">
 .sidebar .sidebar-sub-headers
-  padding-left 1rem
+  padding-left 1.5rem
   font-size 0.95em
 
 a.sidebar-link
   font-size 1em
   font-weight 400
-  display inline-block
+  display block!important
   color $textColor
-  border-left 0.25rem solid transparent
-  padding 0.35rem 1rem 0.35rem 1.25rem
+  padding 0.35rem 1rem 0.35rem .75rem
   line-height 1.4
-  width: 100%
+  margin 0 1rem 0 1.5rem
   box-sizing: border-box
+  border-radius .25rem
   &:hover
     color $accentColor
   &.active
     font-weight 600
-    color $accentColor!important
-    border-left-color $accentColor
+    color #fff
+    background $accentColor
+    // border-left-color $accentColor
   .sidebar-group &
-    padding-left 2rem
+    // padding-left 2rem
   .sidebar-sub-headers &
     padding-top 0.25rem
     padding-bottom 0.25rem
     border-left none
     &.active
       font-weight 500
+      background transparent
+      color $accentColor
 </style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-reco",
-  "version": "1.1.1",
+  "version": "1.1.2-alpha.2",
   "description": "A simple and beautiful vuepress Blog & Doc theme.",
   "main": "index.js",
   "scripts": {