fix: sidebar display

This commit is contained in:
Nick
2019-08-04 13:54:23 -04:00
parent 065c1bb12e
commit e1f8bf59f5
9 changed files with 338 additions and 52 deletions

View File

@@ -181,7 +181,8 @@ export default {
initialScrollX: 0,
scrollingX: false,
easing: 'easeOutQuad',
speed: 1000
speed: 1000,
verticalNativeBarPos: this.$vuetify.rtl ? `left` : `right`
},
rail: {
gutterOfEnds: '2px'

View File

@@ -175,7 +175,7 @@ export default {
position: absolute;
right: 0;
top: 12px;
font-size: 120px !important;
font-size: 100px !important;
opacity: .25;
}

View File

@@ -117,9 +117,9 @@
.caption.ml-2(:class='item.availability <= 33 ? `red--text` : (item.availability <= 66) ? `orange--text` : `green--text`') {{item.availability}}%
template(v-slot:item.isInstalled='{ item }')
v-progress-circular(v-if='item.isDownloading', indeterminate, color='blue', size='20', :width='2')
v-btn(v-else-if='item.isInstalled && item.installDate < item.updatedAt', icon, @click='download(item)')
v-btn(v-else-if='item.isInstalled && item.installDate < item.updatedAt', icon, small, @click='download(item)')
v-icon.blue--text mdi-cached
v-btn(v-else-if='item.isInstalled', icon, @click='download(item)')
v-btn(v-else-if='item.isInstalled', icon, small, @click='download(item)')
v-icon.green--text mdi-check
v-btn(v-else, icon, small, @click='download(item)')
v-icon.grey--text mdi-cloud-download

View File

@@ -56,7 +56,7 @@
v-list-item.pl-4(@click='assets')
v-list-item-avatar(size='24'): v-icon(color='grey lighten-2') mdi-folder-multiple-image
v-list-item-title.body-2.grey--text.text--ligten-2 {{$t('common:header.imagesFiles')}}
v-toolbar-title(:class='{ "ml-2": $vuetify.breakpoint.mdAndUp, "ml-0": $vuetify.breakpoint.smAndDown }')
v-toolbar-title(:class='{ "mx-2": $vuetify.breakpoint.mdAndUp, "mx-0": $vuetify.breakpoint.smAndDown }')
span.subheading {{title}}
v-flex(md4, v-if='$vuetify.breakpoint.mdAndUp')
v-toolbar.nav-header-inner(color='black', dark, flat)
@@ -159,7 +159,7 @@
template(v-slot:activator='{ on: menu }')
v-tooltip(bottom)
template(v-slot:activator='{ on: tooltip }')
v-btn(icon, v-on='{ ...menu, ...tooltip }', outlined, color='blue')
v-btn(icon, v-on='{ ...menu, ...tooltip }')
v-icon(v-if='picture.kind === `initials`', color='grey') mdi-account-circle
v-avatar(v-else-if='picture.kind === `image`', :size='29')
v-img(:src='picture.url')
@@ -173,7 +173,7 @@
v-img(:src='picture.url')
v-list-item-content
v-list-item-title {{name}}
v-list-item-sub-title {{email}}
v-list-item-subtitle {{email}}
v-divider.my-0
v-list-item(href='/w', disabled)
v-list-item-action: v-icon(color='blue') mdi-view-compact-outline

View File

@@ -1,6 +1,15 @@
<template lang="pug">
v-list.py-2(dense, :class='color', :dark='dark')
slot
template(v-for='item of items')
v-list-item(
v-if='item.kind === `link`'
:href='item.target'
)
v-list-item-avatar(size='24')
v-icon {{ item.icon }}
v-list-item-title {{ item.label }}
v-divider.my-2(v-else-if='item.kind === `divider`')
v-subheader.pl-4(v-else-if='item.kind === `header`') {{ item.label }}
</template>
<script>
@@ -13,6 +22,10 @@ export default {
dark: {
type: Boolean,
default: true
},
items: {
type: Array,
default: () => []
}
},
data() {

View File

@@ -12,8 +12,7 @@
:right='$vuetify.rtl'
)
vue-scroll(:ops='scrollStyle')
nav-sidebar(:color='darkMode ? `grey darken-5` : `primary`')
slot(name='sidebar')
nav-sidebar(:color='darkMode ? `grey darken-5` : `primary`', :items='sidebar')
v-fab-transition
v-btn(
@@ -28,7 +27,7 @@
v-if='$vuetify.breakpoint.mdAndDown'
v-show='!navShown'
)
v-icon menu
v-icon mdi-menu
v-content(ref='content')
template(v-if='path !== `home`')
@@ -64,12 +63,12 @@
v-list-item(@click='$vuetify.goTo(tocItem.anchor, scrollOpts)')
v-icon(color='grey', small) mdi-chevron-right
v-list-item-title.pl-3 {{tocItem.title}}
// v-divider(v-if='tocIdx < toc.length - 1 || tocItem.children.length')
//- v-divider(v-if='tocIdx < toc.length - 1 || tocItem.children.length')
template(v-for='tocSubItem in tocItem.children')
v-list-item(@click='$vuetify.goTo(tocSubItem.anchor, scrollOpts)')
v-icon.pl-3(color='grey lighten-1', small) mdi-chevron-right
v-list-item-title.pl-3.caption.grey--text.text--darken-1 {{tocSubItem.title}}
// v-divider(inset, v-if='tocIdx < toc.length - 1')
//- v-divider(inset, v-if='tocIdx < toc.length - 1')
v-card.mt-5
.pa-5.pt-3
@@ -81,15 +80,10 @@
v-btn.btn-animate-edit(icon, :href='"/h/" + locale + "/" + path', v-on='on', x-small)
v-icon(color='grey', dense) mdi-history
span History
v-tooltip(top, v-if='isAuthenticated')
template(v-slot:activator='{ on }')
v-btn.btn-animate-edit(icon, :href='"/e/" + locale + "/" + path', v-on='on', x-small)
v-icon(color='grey', dense) mdi-pencil
span {{$t('common:page.editPage')}}
.body-2.grey--text(:class='darkMode ? `` : `text--darken-3`') {{ authorName }}
.caption.grey--text.text--darken-1 {{ updatedAt | moment('calendar') }}
v-card.mt-5(v-if='tags.length > 0')
v-card.mt-5(v-if='tags.length > 0 || true')
.pa-5
.overline.teal--text.pb-2 Tags
v-chip.mr-1(
@@ -119,19 +113,24 @@
v-spacer
v-tooltip(bottom)
template(v-slot:activator='{ on }')
v-btn(icon, small, v-on='on'): v-icon(color='grey') mdi-bookmark
v-btn(icon, tile, small, v-on='on'): v-icon(color='grey') mdi-bookmark
span {{$t('common:page.bookmark')}}
v-tooltip(bottom)
template(v-slot:activator='{ on }')
v-btn(icon, small, v-on='on'): v-icon(color='grey') mdi-share-variant
v-btn(icon, tile, small, v-on='on'): v-icon(color='grey') mdi-share-variant
span {{$t('common:page.share')}}
v-tooltip(bottom)
template(v-slot:activator='{ on }')
v-btn(icon, small, v-on='on'): v-icon(color='grey') mdi-printer
v-btn(icon, tile, small, v-on='on'): v-icon(color='grey') mdi-printer
span {{$t('common:page.printFormat')}}
v-spacer
v-flex.page-col-content(xs12, lg9, xl10)
v-tooltip(left, v-if='isAuthenticated')
template(v-slot:activator='{ on }')
v-btn.btn-animate-edit(fab, bottom, right, color='primary', fixed, dark, :href='"/e/" + locale + "/" + path', v-on='on')
v-icon mdi-pencil
span {{$t('common:page.editPage')}}
.contents(ref='container')
slot(name='contents')
nav-footer
@@ -143,11 +142,14 @@
fab
fixed
bottom
:right='!$vuetify.rtl'
:left='$vuetify.rtl'
:right='$vuetify.rtl'
:left='!$vuetify.rtl'
small
depressed
@click='$vuetify.goTo(0, scrollOpts)'
color='primary'
dark
:style='$vuetify.rtl ? `right: 235px;` : `left: 235px;`'
)
v-icon mdi-arrow-up
</template>
@@ -221,6 +223,10 @@ export default {
toc: {
type: Array,
default: () => []
},
sidebar: {
type: Array,
default: () => []
}
},
data() {