fix: sidebar display
This commit is contained in:
@@ -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'
|
||||
|
@@ -175,7 +175,7 @@ export default {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 12px;
|
||||
font-size: 120px !important;
|
||||
font-size: 100px !important;
|
||||
opacity: .25;
|
||||
}
|
||||
|
||||
|
@@ -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
|
||||
|
@@ -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
|
||||
|
@@ -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() {
|
||||
|
@@ -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() {
|
||||
|
Reference in New Issue
Block a user