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

286
.gitattributes vendored
View File

@ -1,10 +1,15 @@
# Common settings that generally should always be used with your language specific settings
# Auto detect text files and perform LF normalization # Auto detect text files and perform LF normalization
* text eol=lf # https://www.davidlaing.com/2012/09/19/customise-your-gitattributes-to-become-a-git-ninja/
* text=auto
# Custom for Visual Studio #
*.cs diff=csharp # The above will handle all files NOT found below
#
# Standard to msysgit # Documents
*.bibtex text diff=bibtex
*.doc diff=astextplain *.doc diff=astextplain
*.DOC diff=astextplain *.DOC diff=astextplain
*.docx diff=astextplain *.docx diff=astextplain
@ -15,3 +20,276 @@
*.PDF diff=astextplain *.PDF diff=astextplain
*.rtf diff=astextplain *.rtf diff=astextplain
*.RTF diff=astextplain *.RTF diff=astextplain
*.md text
*.tex text diff=tex
*.adoc text
*.textile text
*.mustache text
*.csv text
*.tab text
*.tsv text
*.txt text
*.sql text
# Graphics
*.png binary
*.jpg binary
*.jpeg binary
*.gif binary
*.tif binary
*.tiff binary
*.ico binary
# SVG treated as an asset (binary) by default.
*.svg text
# If you want to treat it as binary,
# use the following line instead.
# *.svg binary
*.eps binary
# Scripts
*.bash text eol=lf
*.sh text eol=lf
# These are explicitly windows files and should use crlf
*.bat text eol=crlf
*.cmd text eol=crlf
*.ps1 text eol=crlf
# Serialisation
*.json text
*.toml text
*.xml text
*.yaml text
*.yml text
# Archives
*.7z binary
*.gz binary
*.tar binary
*.zip binary
#
# Exclude files from exporting
#
.gitattributes export-ignore
.gitignore export-ignore
# Auto detect text files and perform LF normalization
# https://www.davidlaing.com/2012/09/19/customise-your-gitattributes-to-become-a-git-ninja/
* text=auto
*.cs text diff=csharp
# Treat all Go files in this repo as binary, with no git magic updating
# line endings. Windows users contributing to Go will need to use a
# modern version of git and editors capable of LF line endings.
*.go -text diff=golang
## GITATTRIBUTES FOR WEB PROJECTS
#
# These settings are for any web project.
#
# Details per file setting:
# text These files should be normalized (i.e. convert CRLF to LF).
# binary These files are binary and should be left untouched.
#
# Note that binary is a macro for -text -diff.
######################################################################
# Auto detect
## Handle line endings automatically for files detected as
## text and leave all files detected as binary untouched.
## This will handle all files NOT defined below.
* text=auto
# Source code
*.bash text eol=lf
*.bat text eol=crlf
*.cmd text eol=crlf
*.coffee text
*.css text
*.htm text diff=html
*.html text diff=html
*.inc text
*.ini text
*.js text
*.json text
*.jsx text
*.less text
*.ls text
*.map text -diff
*.od text
*.onlydata text
*.php text diff=php
*.pl text
*.ps1 text eol=crlf
*.py text diff=python
*.rb text diff=ruby
*.sass text
*.scm text
*.scss text diff=css
*.sh text eol=lf
*.sql text
*.styl text
*.tag text
*.ts text
*.tsx text
*.xml text
*.xhtml text diff=html
# Docker
*.dockerignore text
Dockerfile text
# Documentation
*.ipynb text
*.markdown text
*.md text
*.mdwn text
*.mdown text
*.mkd text
*.mkdn text
*.mdtxt text
*.mdtext text
*.txt text
AUTHORS text
CHANGELOG text
CHANGES text
CONTRIBUTING text
COPYING text
copyright text
*COPYRIGHT* text
INSTALL text
license text
LICENSE text
NEWS text
readme text
*README* text
TODO text
# Templates
*.dot text
*.ejs text
*.haml text
*.handlebars text
*.hbs text
*.hbt text
*.jade text
*.latte text
*.mustache text
*.njk text
*.phtml text
*.tmpl text
*.tpl text
*.twig text
*.vue text
# Linters
.csslintrc text
.eslintrc text
.htmlhintrc text
.jscsrc text
.jshintrc text
.jshintignore text
.stylelintrc text
# Configs
*.bowerrc text
*.cnf text
*.conf text
*.config text
.babelrc text
.browserslistrc text
.editorconfig text
.env text
.gitattributes text
.gitconfig text
.htaccess text
*.lock text -diff
package-lock.json text -diff
*.npmignore text
*.yaml text
*.yml text
browserslist text
Makefile text
makefile text
# Heroku
Procfile text
.slugignore text
# Graphics
*.ai binary
*.bmp binary
*.eps binary
*.gif binary
*.gifv binary
*.ico binary
*.jng binary
*.jp2 binary
*.jpg binary
*.jpeg binary
*.jpx binary
*.jxr binary
*.pdf binary
*.png binary
*.psb binary
*.psd binary
# SVG treated as an asset (binary) by default.
*.svg text
# If you want to treat it as binary,
# use the following line instead.
# *.svg binary
*.svgz binary
*.tif binary
*.tiff binary
*.wbmp binary
*.webp binary
# Audio
*.kar binary
*.m4a binary
*.mid binary
*.midi binary
*.mp3 binary
*.ogg binary
*.ra binary
# Video
*.3gpp binary
*.3gp binary
*.as binary
*.asf binary
*.asx binary
*.fla binary
*.flv binary
*.m4v binary
*.mng binary
*.mov binary
*.mp4 binary
*.mpeg binary
*.mpg binary
*.ogv binary
*.swc binary
*.swf binary
*.webm binary
# Archives
*.7z binary
*.gz binary
*.jar binary
*.rar binary
*.tar binary
*.zip binary
# Fonts
*.ttf binary
*.eot binary
*.otf binary
*.woff binary
*.woff2 binary
# Executables
*.exe binary
*.pyc binary

View File

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

View File

@ -175,7 +175,7 @@ export default {
position: absolute; position: absolute;
right: 0; right: 0;
top: 12px; top: 12px;
font-size: 120px !important; font-size: 100px !important;
opacity: .25; 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}}% .caption.ml-2(:class='item.availability <= 33 ? `red--text` : (item.availability <= 66) ? `orange--text` : `green--text`') {{item.availability}}%
template(v-slot:item.isInstalled='{ item }') template(v-slot:item.isInstalled='{ item }')
v-progress-circular(v-if='item.isDownloading', indeterminate, color='blue', size='20', :width='2') 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-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-icon.green--text mdi-check
v-btn(v-else, icon, small, @click='download(item)') v-btn(v-else, icon, small, @click='download(item)')
v-icon.grey--text mdi-cloud-download v-icon.grey--text mdi-cloud-download

View File

@ -56,7 +56,7 @@
v-list-item.pl-4(@click='assets') 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-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-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}} span.subheading {{title}}
v-flex(md4, v-if='$vuetify.breakpoint.mdAndUp') v-flex(md4, v-if='$vuetify.breakpoint.mdAndUp')
v-toolbar.nav-header-inner(color='black', dark, flat) v-toolbar.nav-header-inner(color='black', dark, flat)
@ -159,7 +159,7 @@
template(v-slot:activator='{ on: menu }') template(v-slot:activator='{ on: menu }')
v-tooltip(bottom) v-tooltip(bottom)
template(v-slot:activator='{ on: tooltip }') 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-icon(v-if='picture.kind === `initials`', color='grey') mdi-account-circle
v-avatar(v-else-if='picture.kind === `image`', :size='29') v-avatar(v-else-if='picture.kind === `image`', :size='29')
v-img(:src='picture.url') v-img(:src='picture.url')
@ -173,7 +173,7 @@
v-img(:src='picture.url') v-img(:src='picture.url')
v-list-item-content v-list-item-content
v-list-item-title {{name}} v-list-item-title {{name}}
v-list-item-sub-title {{email}} v-list-item-subtitle {{email}}
v-divider.my-0 v-divider.my-0
v-list-item(href='/w', disabled) v-list-item(href='/w', disabled)
v-list-item-action: v-icon(color='blue') mdi-view-compact-outline v-list-item-action: v-icon(color='blue') mdi-view-compact-outline

View File

@ -1,6 +1,15 @@
<template lang="pug"> <template lang="pug">
v-list.py-2(dense, :class='color', :dark='dark') 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> </template>
<script> <script>
@ -13,6 +22,10 @@ export default {
dark: { dark: {
type: Boolean, type: Boolean,
default: true default: true
},
items: {
type: Array,
default: () => []
} }
}, },
data() { data() {

View File

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

View File

@ -293,7 +293,7 @@ module.exports = () => {
config: [ config: [
{ {
id: uuid(), id: uuid(),
icon: 'home', icon: 'mdi-home',
kind: 'link', kind: 'link',
label: 'Home', label: 'Home',
target: '/', target: '/',

View File

@ -21,20 +21,8 @@ block body
:is-published=page.isPublished.toString() :is-published=page.isPublished.toString()
:toc=page.toc :toc=page.toc
:page-id=page.id :page-id=page.id
:sidebar=sidebar
) )
template(slot='sidebar')
each navItem in sidebar
if navItem.kind === 'link'
v-list-item(
href=navItem.target
)
v-list-item-avatar
v-icon= navItem.icon
v-list-item-title= navItem.label
else if navItem.kind === 'divider'
v-divider.my-2
else if navItem.kind === 'header'
v-subheader.pl-4= navItem.label
template(slot='contents') template(slot='contents')
div(v-pre)!= page.render div(v-pre)!= page.render
if injectCode.body if injectCode.body