|
|
|
@ -1,9 +1,9 @@ |
|
|
|
<template lang="pug"> |
|
|
|
v-app(v-scroll='upBtnScroll', :dark='darkMode', :class='$vuetify.rtl ? `is-rtl` : `is-ltr`') |
|
|
|
v-app(v-scroll='upBtnScroll', :dark='$vuetify.theme.dark', :class='$vuetify.rtl ? `is-rtl` : `is-ltr`') |
|
|
|
nav-header |
|
|
|
v-navigation-drawer( |
|
|
|
v-if='navMode !== `NONE`' |
|
|
|
:class='darkMode ? `grey darken-4-d4` : `primary`' |
|
|
|
:class='$vuetify.theme.dark ? `grey darken-4-d4` : `primary`' |
|
|
|
dark |
|
|
|
app |
|
|
|
clipped |
|
|
|
@ -13,7 +13,7 @@ |
|
|
|
:right='$vuetify.rtl' |
|
|
|
) |
|
|
|
vue-scroll(:ops='scrollStyle') |
|
|
|
nav-sidebar(:color='darkMode ? `grey darken-4-d4` : `primary`', :items='sidebar', :nav-mode='navMode') |
|
|
|
nav-sidebar(:color='$vuetify.theme.dark ? `grey darken-4-d4` : `primary`', :items='sidebarDecoded', :nav-mode='navMode') |
|
|
|
|
|
|
|
v-fab-transition(v-if='navMode !== `NONE`') |
|
|
|
v-btn( |
|
|
|
@ -32,7 +32,7 @@ |
|
|
|
|
|
|
|
v-content(ref='content') |
|
|
|
template(v-if='path !== `home`') |
|
|
|
v-toolbar(:color='darkMode ? `grey darken-4-d3` : `grey lighten-3`', flat, dense, v-if='$vuetify.breakpoint.smAndUp') |
|
|
|
v-toolbar(:color='$vuetify.theme.dark ? `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 |
|
|
|
@ -48,19 +48,19 @@ |
|
|
|
.caption.red--text {{$t('common:page.unpublished')}} |
|
|
|
status-indicator.ml-3(negative, pulse) |
|
|
|
v-divider |
|
|
|
v-container.grey.pa-0(fluid, :class='darkMode ? `darken-4-l3` : `lighten-4`') |
|
|
|
v-container.grey.pa-0(fluid, :class='$vuetify.theme.dark ? `darken-4-l3` : `lighten-4`') |
|
|
|
v-row(no-gutters, align-content='center', style='height: 90px;') |
|
|
|
v-col.page-col-content.is-page-header(offset-xl='2', offset-lg='3', style='margin-top: auto; margin-bottom: auto;', :class='$vuetify.rtl ? `pr-4` : `pl-4`') |
|
|
|
.headline.grey--text(:class='darkMode ? `text--lighten-2` : `text--darken-3`') {{title}} |
|
|
|
.headline.grey--text(:class='$vuetify.theme.dark ? `text--lighten-2` : `text--darken-3`') {{title}} |
|
|
|
.caption.grey--text.text--darken-1 {{description}} |
|
|
|
v-divider |
|
|
|
v-container.pl-5.pt-4(fluid, grid-list-xl) |
|
|
|
v-layout(row) |
|
|
|
v-flex.page-col-sd(lg3, xl2, v-if='$vuetify.breakpoint.lgAndUp', align-self-start, style='margin-top: -90px; position: sticky; top: 70px;') |
|
|
|
v-card.mb-5(v-if='toc.length') |
|
|
|
.overline.pa-5.pb-0(:class='darkMode ? `blue--text text--lighten-2` : `primary--text`') {{$t('common:page.toc')}} |
|
|
|
v-list.pb-3(dense, nav, :class='darkMode ? `darken-3-d3` : ``') |
|
|
|
template(v-for='(tocItem, tocIdx) in toc') |
|
|
|
v-card.mb-5(v-if='tocDecoded.length') |
|
|
|
.overline.pa-5.pb-0(:class='$vuetify.theme.dark ? `blue--text text--lighten-2` : `primary--text`') {{$t('common:page.toc')}} |
|
|
|
v-list.pb-3(dense, nav, :class='$vuetify.theme.dark ? `darken-3-d3` : ``') |
|
|
|
template(v-for='(tocItem, tocIdx) in tocDecoded') |
|
|
|
v-list-item(@click='$vuetify.goTo(tocItem.anchor, scrollOpts)') |
|
|
|
v-icon(color='grey', small) {{ $vuetify.rtl ? `mdi-chevron-left` : `mdi-chevron-right` }} |
|
|
|
v-list-item-title.px-3 {{tocItem.title}} |
|
|
|
@ -68,7 +68,7 @@ |
|
|
|
template(v-for='tocSubItem in tocItem.children') |
|
|
|
v-list-item(@click='$vuetify.goTo(tocSubItem.anchor, scrollOpts)') |
|
|
|
v-icon.px-3(color='grey lighten-1', small) {{ $vuetify.rtl ? `mdi-chevron-left` : `mdi-chevron-right` }} |
|
|
|
v-list-item-title.px-3.caption.grey--text(:class='darkMode ? `text--lighten-1` : `text--darken-1`') {{tocSubItem.title}} |
|
|
|
v-list-item-title.px-3.caption.grey--text(:class='$vuetify.theme.dark ? `text--lighten-1` : `text--darken-1`') {{tocSubItem.title}} |
|
|
|
//- v-divider(inset, v-if='tocIdx < toc.length - 1') |
|
|
|
|
|
|
|
v-card.mb-5(v-if='tags.length > 0') |
|
|
|
@ -100,7 +100,7 @@ |
|
|
|
//- v-btn.btn-animate-edit(icon, :href='"/h/" + locale + "/" + path', v-on='on', x-small) |
|
|
|
//- v-icon(color='grey', dense) mdi-history |
|
|
|
//- span History |
|
|
|
.body-2.grey--text(:class='darkMode ? `` : `text--darken-3`') {{ authorName }} |
|
|
|
.body-2.grey--text(:class='$vuetify.theme.dark ? `` : `text--darken-3`') {{ authorName }} |
|
|
|
.caption.grey--text.text--darken-1 {{ updatedAt | moment('calendar') }} |
|
|
|
|
|
|
|
//- v-card.mb-5 |
|
|
|
@ -117,7 +117,7 @@ |
|
|
|
//- .caption.grey--text 5 votes |
|
|
|
|
|
|
|
v-card(flat) |
|
|
|
v-toolbar(:color='darkMode ? `grey darken-4-d3` : `grey lighten-3`', flat, dense) |
|
|
|
v-toolbar(:color='$vuetify.theme.dark ? `grey darken-4-d3` : `grey lighten-3`', flat, dense) |
|
|
|
v-spacer |
|
|
|
v-tooltip(bottom) |
|
|
|
template(v-slot:activator='{ on }') |
|
|
|
@ -346,12 +346,12 @@ export default { |
|
|
|
default: false |
|
|
|
}, |
|
|
|
toc: { |
|
|
|
type: Array, |
|
|
|
default: () => [] |
|
|
|
type: String, |
|
|
|
default: '' |
|
|
|
}, |
|
|
|
sidebar: { |
|
|
|
type: Array, |
|
|
|
default: () => [] |
|
|
|
type: String, |
|
|
|
default: '' |
|
|
|
}, |
|
|
|
navMode: { |
|
|
|
type: String, |
|
|
|
@ -391,7 +391,6 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
darkMode: get('site/dark'), |
|
|
|
isAuthenticated: get('user/authenticated'), |
|
|
|
rating: { |
|
|
|
get () { |
|
|
|
@ -417,6 +416,12 @@ export default { |
|
|
|
} else { |
|
|
|
return this.$vuetify.rtl ? `right: 65px;` : `left: 65px;` |
|
|
|
} |
|
|
|
}, |
|
|
|
sidebarDecoded () { |
|
|
|
return JSON.parse(atob(this.sidebar)) |
|
|
|
}, |
|
|
|
tocDecoded () { |
|
|
|
return JSON.parse(atob(this.toc)) |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
|
NGPixel
4 years ago