feat: TOC, scroll to header, page UI improvements

2018-11-17 23:03:58 -05:00
parent e067fe3abd
commit 3abc254685
15 changed files with 1054 additions and 785 deletions
--- a/client/client-app.js
+++ b/client/client-app.js
@@ -21,7 +21,6 @@ import Hammer from 'hammerjs'
 import moment from 'moment'
 import VueMoment from 'vue-moment'
 import VueTour from 'vue-tour'
-import VueTreeNavigation from 'vue-tree-navigation'
 import store from './store'
 import Cookies from 'js-cookie'

@@ -149,7 +148,6 @@ Vue.use(VeeValidate, { events: '' })
 Vue.use(Vuetify)
 Vue.use(VueMoment, { moment })
 Vue.use(VueTour)
-Vue.use(VueTreeNavigation)

 Vue.prototype.Velocity = Velocity

--- a/client/components/common/page-selector.vue
+++ b/client/components/common/page-selector.vue
@@ -1,7 +1,8 @@
 <template lang="pug">
  v-dialog(v-model='isShown', lazy, max-width='850px')
    v-card.page-selector
-      .dialog-header
+      .dialog-header.is-dark
+        v-icon.mr-2(color='white') find_in_page
        span Select Page Location
        v-spacer
        v-progress-circular(
@@ -59,7 +60,7 @@
            v-list-tile
              v-list-tile-avatar: v-icon insert_drive_file
              v-list-tile-title File D
-      v-card-text.grey.lighten-2.pa-2
+      v-card-text.grey.lighten-1.pa-2
        v-text-field(
          solo
          hide-details
--- a/client/components/editor.vue
+++ b/client/components/editor.vue
@@ -224,8 +224,8 @@ export default {
              isPrivate: false,
              isPublished: this.$store.get('page/isPublished'),
              path: this.$store.get('page/path'),
-              publishEndDate: this.$store.get('page/publishEndDate'),
-              publishStartDate: this.$store.get('page/publishStartDate'),
+              publishEndDate: this.$store.get('page/publishEndDate') || '',
+              publishStartDate: this.$store.get('page/publishStartDate') || '',
              tags: this.$store.get('page/tags'),
              title: this.$store.get('page/title')
            }
@@ -258,8 +258,8 @@ export default {
              isPrivate: false,
              isPublished: this.$store.get('page/isPublished'),
              path: this.$store.get('page/path'),
-              publishEndDate: this.$store.get('page/publishEndDate'),
-              publishStartDate: this.$store.get('page/publishStartDate'),
+              publishEndDate: this.$store.get('page/publishEndDate') || '',
+              publishStartDate: this.$store.get('page/publishStartDate') || '',
              tags: this.$store.get('page/tags'),
              title: this.$store.get('page/title')
            }
--- a/client/scss/components/markdown-content.scss
+++ b/client/scss/components/markdown-content.scss
@@ -12,7 +12,7 @@
  }

  > * + h1, > * + h2, > * + h3, > * + h4 {
-    margin-top: 1rem;
+    margin-top: 3rem;
  }
  h1 {
    font-size: 1.5rem;
--- a/client/scss/components/v-dialog.scss
+++ b/client/scss/components/v-dialog.scss
@@ -14,4 +14,10 @@
    background: radial-gradient(ellipse at top, mc('red', '500'), mc('red', '700')),
              radial-gradient(ellipse at bottom, mc('red', '800'), mc('red', '700'));
  }
+
+  &.is-dark {
+    background-color: mc('grey', '900');
+    background: radial-gradient(ellipse at top, mc('grey', '800'), mc('grey', '900')),
+              radial-gradient(ellipse at bottom, mc('grey', '800'), mc('grey', '900'));
+  }
 }
--- a/client/store/page.js
+++ b/client/store/page.js
@@ -9,6 +9,8 @@ const state = {
  isPublished: true,
  locale: 'en',
  path: '',
+  publishEndDate: '',
+  publishStartDate: '',
  tags: [],
  title: '',
  updatedAt: ''
--- a/client/themes/default/components/page.vue
+++ b/client/themes/default/components/page.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  v-app
+  v-app(v-scroll='upBtnScroll')
    nav-header
    v-navigation-drawer.primary(
      dark
@@ -15,23 +15,24 @@
        slot(name='sidebar')

    v-content
-      v-toolbar(color='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-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-btn.ma-0(v-else, :href='props.item.path', small, flat) {{props.item.name}}
-        template(v-if='!isPublished')
-          v-spacer
-          .caption.red--text Unpublished
-          status-indicator.ml-3(negative, pulse)
-      v-divider
+      template(v-if='path !== `home`')
+        v-toolbar(color='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-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-btn.ma-0(v-else, :href='props.item.path', small, flat) {{props.item.name}}
+          template(v-if='!isPublished')
+            v-spacer
+            .caption.red--text Unpublished
+            status-indicator.ml-3(negative, pulse)
+        v-divider
      v-layout(row)
        v-flex(xs12, lg9, xl10)
          v-toolbar(color='grey lighten-4', flat, :height='90')
@@ -54,10 +55,20 @@
                v-icon(color='grey') edit
              span Edit Page
          v-divider
-          v-list.grey.lighten-3.pb-3(dense)
-            v-subheader.pl-4.primary--text Table of contents
-            vue-tree-navigation.treenav(:items='toc', :defaultOpenLevel='1')
-          v-divider
+          template(v-if='toc.length')
+            v-list.grey.lighten-3.pb-3(dense)
+              v-subheader.pl-4.primary--text Table of contents
+              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.lighten-4(dense)
            v-subheader.pl-4.yellow--text.text--darken-4 Rating
            .text-xs-center
@@ -97,6 +108,9 @@
              span Print Format
            v-spacer
    nav-footer
+    v-fab-transition
+      v-btn(v-if='upBtnShown', fab, fixed, bottom, right, small, @click='$vuetify.goTo(0, scrollOpts)', color='primary')
+        v-icon arrow_upward
 </template>

 <script>
@@ -147,46 +161,27 @@ export default {
    isPublished: {
      type: Boolean,
      default: false
+    },
+    toc: {
+      type: Array,
+      default: () => []
    }
  },
  data() {
    return {
      navOpen: false,
+      upBtnShown: false,
+      scrollOpts: {
+        duration: 1500,
+        offset: -75,
+        easing: 'easeInOutCubic'
+      },
      breadcrumbs: [
        { path: '/', name: 'Home' },
        { path: '/universe', name: 'Universe' },
        { path: '/universe/galaxy', name: 'Galaxy' },
        { path: '/universe/galaxy/solar-system', name: 'Solar System' },
        { path: '/universe/galaxy/solar-system/planet-earth', name: 'Planet Earth' }
-      ],
-      toc: [
-        {
-          name: 'Introduction',
-          element: 'introduction'
-        },
-        {
-          name: 'Cities',
-          element: 'cities',
-          children: [
-            {
-              name: 'New York',
-              element: 'contact',
-              children: [
-                { name: 'E-mail', element: 'email' },
-                { name: 'Phone', element: 'phone' }
-              ]
-            },
-            {
-              name: 'Chicago',
-              element: 'contact',
-              children: [
-                { name: 'E-mail', element: 'email' },
-                { name: 'Phone', element: 'phone' }
-              ]
-            }
-          ]
-        },
-        { name: 'Population', external: 'https://github.com' }
      ]
    }
  },
@@ -222,6 +217,10 @@ export default {
  methods: {
    toggleNavigation () {
      this.navOpen = !this.navOpen
+    },
+    upBtnScroll () {
+      const scrollOffset = window.pageYOffset || document.documentElement.scrollTop
+      this.upBtnShown = scrollOffset > window.innerHeight * 0.33
    }
  }
 }
--- a/client/themes/default/scss/app.scss
+++ b/client/themes/default/scss/app.scss
@@ -2,6 +2,7 @@

 .contents {
  color: mc('grey', '800');
+  padding-bottom: 50px;

  h1, h2, h3, h4, h5, h6 {
    position: relative;
@@ -26,7 +27,7 @@
  h1 {
    padding-left: 24px;
    color: mc('blue', '800');
-    margin-top: 1rem;
+    margin-top: 2rem;
    position: relative;

    &::after {