fix: basic breadcrumbs + source view on mobile

This commit is contained in:
Nick 2019-05-24 16:06:34 -04:00
parent eb1be8a92d
commit 5426b009a8
2 changed files with 22 additions and 14 deletions

View File

@ -4,9 +4,10 @@
v-content
v-toolbar(color='primary', dark)
.subheading Viewing source of page #[strong /{{path}}]
v-spacer
.caption.blue--text.text--lighten-3 ID {{pageId}}
v-btn.ml-4(depressed, color='blue darken-1', @click='goLive') Return to Normal View
template(v-if='$vuetify.breakpoint.mdAndUp')
v-spacer
.caption.blue--text.text--lighten-3 ID {{pageId}}
v-btn.ml-4(depressed, color='blue darken-1', @click='goLive') Return to Normal View
v-card(tile)
v-card-text
v-card.grey.radius-7(flat, :class='darkMode ? `darken-4` : `lighten-4`')

View File

@ -30,17 +30,16 @@
v-content(ref='content')
template(v-if='path !== `home`')
v-toolbar(:color='darkMode ? `grey darken-4-d3` : `grey lighten-3`', flat, dense)
v-btn.pl-0(v-if='$vuetify.breakpoint.xsOnly', flat, @click='toggleNavigation')
v-icon(color='grey darken-2', left) menu
span Navigation
v-toolbar(:color='darkMode ? `grey darken-4-d3` : `grey lighten-3`', flat, dense, v-if='$vuetify.breakpoint.smAndUp')
//- v-btn.pl-0(v-if='$vuetify.breakpoint.xsOnly', flat, @click='toggleNavigation')
//- v-icon(color='grey darken-2', left) menu
//- span Navigation
v-breadcrumbs.breadcrumbs-nav.pl-0(
v-else
:items='breadcrumbs'
divider='/'
)
template(slot='item', slot-scope='props')
v-icon(v-if='props.item.path === "/"', small) home
v-icon(v-if='props.item.path === "/"', small, @click='goHome') home
v-btn.ma-0(v-else, :href='props.item.path', small, flat) {{props.item.name}}
template(v-if='!isPublished')
v-spacer
@ -128,6 +127,7 @@
import { StatusIndicator } from 'vue-status-indicator'
import Prism from '@/libs/prism/prism.js'
import { get } from 'vuex-pathify'
import _ from 'lodash'
export default {
components: {
@ -193,11 +193,6 @@ export default {
offset: -75,
easing: 'easeInOutCubic'
},
breadcrumbs: [
{ path: '/', name: 'Home' },
{ path: '/' + this.path, name: 'Breadcrumb' },
{ path: '/' + this.path, name: 'Coming soon' }
],
scrollStyle: {
vuescroll: {},
scrollPanel: {
@ -227,6 +222,15 @@ export default {
set (val) {
}
},
breadcrumbs() {
return [{ path: '/', name: 'Home' }].concat(_.reduce(this.path.split('/'), (result, value, key) => {
result.push({
path: _.map(result, 'path').join('/') + `/${value}`,
name: value
})
return result
}, []))
}
},
created() {
@ -249,6 +253,9 @@ export default {
this.navShown = this.$vuetify.breakpoint.smAndUp
},
methods: {
goHome () {
window.location.assign('/')
},
toggleNavigation () {
this.navOpen = !this.navOpen
},