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

Feature/reco
This commit is contained in:
reco_luan 2019-11-09 02:09:46 +08:00 committed by GitHub
commit 0f66ab9961
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 81 additions and 40 deletions

View File

@ -5,35 +5,37 @@
@touchstart="onTouchStart" @touchstart="onTouchStart"
@touchend="onTouchEnd"> @touchend="onTouchEnd">
<transition name="fade"> <transition name="fade">
<LoadingPage v-if="firstLoad" /> <LoadingPage v-show="firstLoad" class="loading-wrapper" />
<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>
</transition> </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> <GA></GA>
</div> </div>
</template> </template>
@ -202,6 +204,37 @@ export default {
</script> </script>
<style lang="stylus" scoped> <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 .theme-container.no-sidebar
.comments-wrapper .comments-wrapper
padding-left 2rem padding-left 2rem

View File

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

View File

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

View File

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