misc: migrate to vuetify 2.0 (wip)
This commit is contained in:
NGPixel
@@ -41,83 +41,93 @@
|
||||
divider='/'
|
||||
)
|
||||
template(slot='item', slot-scope='props')
|
||||
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}}
|
||||
v-icon(v-if='props.item.path === "/"', small, @click='goHome') mdi-home
|
||||
v-btn.ma-0(v-else, :href='props.item.path', small, text) {{props.item.name}}
|
||||
template(v-if='!isPublished')
|
||||
v-spacer
|
||||
.caption.red--text {{$t('common:page.unpublished')}}
|
||||
status-indicator.ml-3(negative, pulse)
|
||||
v-divider
|
||||
v-layout(row)
|
||||
v-flex(xs12, lg9, xl10)
|
||||
v-toolbar(:color='darkMode ? `grey darken-4-l3` : `grey lighten-4`', flat, :height='90')
|
||||
div
|
||||
.headline.grey--text(:class='darkMode ? `text--lighten-2` : `text--darken-3`') {{title}}
|
||||
.caption.grey--text.text--darken-1 {{description}}
|
||||
v-divider
|
||||
.contents(ref='container')
|
||||
slot(name='contents')
|
||||
v-toolbar.px-2(:color='darkMode ? `grey darken-4-l3` : `grey lighten-4`', flat, :height='90')
|
||||
div
|
||||
.headline.grey--text(:class='darkMode ? `text--lighten-2` : `text--darken-3`') {{title}}
|
||||
.caption.grey--text.text--darken-1 {{description}}
|
||||
v-spacer
|
||||
v-divider
|
||||
v-container.pl-5.pt-2(fill-height, fluid, grid-list-xl)
|
||||
v-layout(row)
|
||||
v-flex.page-col-sd(lg3, xl2, fill-height, v-if='$vuetify.breakpoint.lgAndUp')
|
||||
v-card(v-if='toc.length')
|
||||
.overline.pa-5.pb-0(:class='darkMode ? `indigo--text text--lighten-3` : `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-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')
|
||||
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-flex(lg3, xl2, fill-height, v-if='$vuetify.breakpoint.lgAndUp')
|
||||
v-toolbar(:color='darkMode ? `grey darken-4-l3` : `grey lighten-4`', flat, :height='90')
|
||||
div
|
||||
.caption.grey--text.text--lighten-1 {{$t('common:page.lastEditedBy')}}
|
||||
.body-2.grey--text(:class='darkMode ? `` : `text--darken-3`') {{ authorName }}
|
||||
.caption.grey--text.text--darken-1 {{ updatedAt | moment('calendar') }}
|
||||
template(v-if='isAuthenticated')
|
||||
v-spacer
|
||||
v-tooltip(left)
|
||||
v-btn.btn-animate-edit(icon, slot='activator', :href='"/e/" + locale + "/" + path')
|
||||
v-icon(color='grey') edit
|
||||
span {{$t('common:page.editPage')}}
|
||||
v-divider
|
||||
template(v-if='toc.length')
|
||||
v-list.grey.pb-3(dense, :class='darkMode ? `darken-3-d3` : `lighten-3`')
|
||||
v-subheader.pl-4(:class='darkMode ? `indigo--text text--lighten-3` : `primary--text`') {{$t('common:page.toc')}}
|
||||
template(v-for='(tocItem, tocIdx) in toc')
|
||||
v-list-tile(@click='$vuetify.goTo(tocItem.anchor, scrollOpts)')
|
||||
v-icon(color='grey') arrow_right
|
||||
v-list-tile-title.pl-3 {{tocItem.title}}
|
||||
v-divider.ml-4(v-if='tocIdx < toc.length - 1 || tocItem.children.length')
|
||||
template(v-for='tocSubItem in tocItem.children')
|
||||
v-list-tile(@click='$vuetify.goTo(tocSubItem.anchor, scrollOpts)')
|
||||
v-icon.pl-3(color='grey lighten-1') arrow_right
|
||||
v-list-tile-title.pl-3.caption {{tocSubItem.title}}
|
||||
v-divider(inset, v-if='tocIdx < toc.length - 1')
|
||||
v-divider
|
||||
//- v-list.grey(dense, :class='darkMode ? `darken-3` : `lighten-4`')
|
||||
//- v-subheader.pl-4.yellow--text.text--darken-4 Rating
|
||||
//- .text-xs-center
|
||||
//- v-rating(
|
||||
//- v-model='rating'
|
||||
//- color='yellow darken-3'
|
||||
//- background-color='grey lighten-1'
|
||||
//- half-increments
|
||||
//- hover
|
||||
//- )
|
||||
//- .pb-2.caption.grey--text 5 votes
|
||||
//- v-divider
|
||||
template(v-if='tags.length')
|
||||
v-list.grey(dense, :class='darkMode ? `darken-3-d3` : `lighten-3`')
|
||||
v-subheader.pl-4.teal--text Tags
|
||||
template(v-for='(tag, idx) in tags')
|
||||
v-list-tile(:href='`/t/` + tag.slug')
|
||||
v-list-tile-avatar: v-icon(color='teal') label
|
||||
v-list-tile-title {{tag.title}}
|
||||
v-divider(inset, v-if='idx < tags.length - 1')
|
||||
v-divider
|
||||
v-toolbar(:color='darkMode ? `grey darken-3` : `grey lighten-4`', flat, dense)
|
||||
v-spacer
|
||||
v-tooltip(bottom)
|
||||
v-btn(icon, slot='activator'): v-icon(color='grey') bookmark
|
||||
span {{$t('common:page.bookmark')}}
|
||||
v-tooltip(bottom)
|
||||
v-btn(icon, slot='activator'): v-icon(color='grey') share
|
||||
span {{$t('common:page.share')}}
|
||||
v-tooltip(bottom)
|
||||
v-btn(icon, slot='activator'): v-icon(color='grey') print
|
||||
span {{$t('common:page.printFormat')}}
|
||||
v-spacer
|
||||
v-card.mt-5
|
||||
.pa-5.pt-3
|
||||
.overline.indigo--text.d-flex.align-center
|
||||
span {{$t('common:page.lastEditedBy')}}
|
||||
v-spacer
|
||||
v-tooltip(left, 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
|
||||
.pa-5
|
||||
.overline.teal--text.pb-2 Tags
|
||||
v-chip.mr-1(
|
||||
label
|
||||
color='teal lighten-5'
|
||||
v-for='(tag, idx) in tags'
|
||||
:href='`/t/` + tag.slug'
|
||||
:key='tag.slug'
|
||||
)
|
||||
v-icon(color='teal', left, small) mdi-label
|
||||
span.teal--text.text--darken-2 {{tag.text}}
|
||||
v-divider
|
||||
.pa-5
|
||||
.overline.pb-2.yellow--text.text--darken-4 Rating
|
||||
.text-center
|
||||
v-rating(
|
||||
v-model='rating'
|
||||
color='yellow darken-3'
|
||||
background-color='grey lighten-1'
|
||||
half-increments
|
||||
hover
|
||||
)
|
||||
.caption.grey--text 5 votes
|
||||
v-divider
|
||||
v-toolbar(:color='darkMode ? `grey darken-3` : `grey lighten-4`', flat, dense)
|
||||
v-spacer
|
||||
v-tooltip(bottom)
|
||||
template(v-slot:activator='{ on }')
|
||||
v-btn(icon, 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
|
||||
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
|
||||
span {{$t('common:page.printFormat')}}
|
||||
v-spacer
|
||||
|
||||
v-flex.page-col-content(xs12, lg9, xl10)
|
||||
.contents(ref='container')
|
||||
slot(name='contents')
|
||||
nav-footer
|
||||
notify
|
||||
search-results
|
||||
@@ -133,7 +143,7 @@
|
||||
@click='$vuetify.goTo(0, scrollOpts)'
|
||||
color='primary'
|
||||
)
|
||||
v-icon arrow_upward
|
||||
v-icon mdi-arrow-up
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -142,6 +152,17 @@ import Prism from 'prismjs'
|
||||
import { get } from 'vuex-pathify'
|
||||
import _ from 'lodash'
|
||||
|
||||
Prism.plugins.autoloader.languages_path = '/js/prism/'
|
||||
Prism.plugins.NormalizeWhitespace.setDefaults({
|
||||
'remove-trailing': true,
|
||||
'remove-indent': true,
|
||||
'left-trim': true,
|
||||
'right-trim': true,
|
||||
'break-lines': 160,
|
||||
'remove-initial-line-feed': true,
|
||||
'tabs-to-spaces': 2
|
||||
})
|
||||
|
||||
export default {
|
||||
components: {
|
||||
StatusIndicator
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
.contents {
|
||||
color: mc('grey', '800');
|
||||
padding: 24px 0 50px;
|
||||
padding: .5rem 0 50px;
|
||||
position: relative;
|
||||
|
||||
> div > *:first-child {
|
||||
@@ -51,7 +51,7 @@
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding: 0 24px;
|
||||
padding: 0;
|
||||
color: mc('blue', '800');
|
||||
margin-top: 2rem;
|
||||
position: relative;
|
||||
@@ -68,6 +68,7 @@
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(to right, mc('theme', 'primary'), rgba(mc('theme', 'primary'), 0));
|
||||
border-radius: 3px;
|
||||
|
||||
@at-root .theme--dark & {
|
||||
background: linear-gradient(to right, mc('teal', '300') 0%, mc('teal', '500') 10%, rgba(mc('teal', '900'), 0) 100%);
|
||||
@@ -82,7 +83,7 @@
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
margin: 1rem 24px 0 24px;
|
||||
margin: 1rem 0 0 0;
|
||||
padding: 8px 0 0 0;
|
||||
color: mc('grey', '800');
|
||||
position: relative;
|
||||
@@ -113,7 +114,7 @@
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
margin: 0 24px;
|
||||
margin: 0;
|
||||
padding: 8px 0 0 0;
|
||||
color: mc('grey', '700');
|
||||
position: relative;
|
||||
@@ -134,7 +135,7 @@
|
||||
}
|
||||
h4, h5, h6 {
|
||||
font-size: 1rem;
|
||||
margin: 0 24px;
|
||||
margin: 0;
|
||||
padding: 8px 0 0 0;
|
||||
color: mc('grey', '700');
|
||||
position: relative;
|
||||
@@ -176,10 +177,14 @@
|
||||
@at-root .contents > div > p:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@at-root .v-application & {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem;
|
||||
margin: 1rem 0;
|
||||
height: 1px;
|
||||
border: none;
|
||||
background-color: mc('grey', '400');
|
||||
@@ -198,7 +203,7 @@
|
||||
padding: 0 0 1rem 0;
|
||||
border-left: 5px solid mc('blue', '500');
|
||||
border-radius: .5rem;
|
||||
margin: 1rem 2rem;
|
||||
margin: 1rem 0;
|
||||
|
||||
> p:first-child .emoji {
|
||||
margin-right: .5rem;
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
Reference in New Issue
Block a user