Began implementing Vue Material

This commit is contained in:
Daniel J. Summers 2019-08-19 22:12:30 -05:00
parent d4671c044d
commit a652351995
5 changed files with 560 additions and 459 deletions

View File

@ -1,12 +1,13 @@
<template lang="pug"> <template lang="pug">
#app(role='application') md-app(md-waterfall md-mode='fixed-last' role='application')
p navigation here
navigation navigation
#content p navigation there
md-app-content
router-view router-view
vue-progress-bar vue-progress-bar
toast(ref='toast') toast(ref='toast')
footer.mpj-text-right.mpj-muted-text p.mpj-muted-text
p
| myPrayerJournal v{{ version }} | myPrayerJournal v{{ version }}
br br
em: small. em: small.

View File

@ -1,7 +1,7 @@
<template lang="pug"> <template lang="pug">
article.mpj-main-content(role='main') article.mpj-main-content(role='main')
page-title(title='Welcome!' page-title(title='Welcome!'
hideOnPage='true') hideOnPage=true)
p &nbsp; p &nbsp;
p. p.
myPrayerJournal is a place where individuals can record their prayer requests, record that they prayed for them, myPrayerJournal is a place where individuals can record their prayer requests, record that they prayed for them,

View File

@ -1,34 +1,42 @@
<template lang="pug"> <template lang="pug">
nav.mpj-top-nav.mpj-bg(role='menubar') md-app-toolbar.md-large.md-dense.md-primary
router-link.title(:to="{ name: 'Home' }" .md-toolbar-row
role='menuitem') .md-toolbar-section-start
span(style='font-weight:100;') my | howdy
span(style='font-weight:600;') Prayer span.md-title
span(style='font-weight:700;') Journal span(style='font-weight:100;') my
router-link(v-if='isAuthenticated' span(style='font-weight:600;') Prayer
:to="{ name: 'Journal' }" span(style='font-weight:700;') Journal
role='menuitem') Journal .md-toolbar-section-end
router-link(v-if='isAuthenticated' | ""
:to="{ name: 'ActiveRequests' }" .md-toolbar-row
role='menuitem') Active md-tabs.md-primary
router-link(v-if='hasSnoozed' md-tab#mpj-home(md-label='Home'
:to="{ name: 'SnoozedRequests' }" :to="{ name: 'Home' }")
role='menuitem') Snoozed md-tab#mpj-journal(v-if='isAuthenticated'
router-link(v-if='isAuthenticated' md-label='Journal'
:to="{ name: 'AnsweredRequests' }" :to="{ name: 'Journal' }")
role='menuitem') Answered md-tab#mpj-active(v-if='isAuthenticated'
a(v-if='isAuthenticated' md-label='Active'
href='#' :to="{ name: 'ActiveRequests' }")
role='menuitem' md-tab#mpj-snoozed(v-if='hasSnoozed'
@click.stop='logOff()') Log Off md-label='Snoozed'
a(v-if='!isAuthenticated' :to="{ name: 'SnoozedRequests' }")
href='#' md-tab#mpj-answered(v-if='isAuthenticated'
role='menuitem' md-label='Answered'
@click.stop='logOn()') Log On :to="{ name: 'AnsweredRequests' }")
a(href='https://docs.prayerjournal.me' md-tab#mpj-log-off(v-if='isAuthenticated'
target='_blank' md-label='Log Off'
role='menuitem' href='#'
@click.stop='') Docs @click.stop='logOff()')
md-tab#mpj-log-on(v-if='!isAuthenticated'
md-label='Log On'
href='#'
@click.stop='logOn()')
md-tab#mpj-docs(md-label='Docs'
href='https://docs.prayerjournal.me'
target='_blank'
@click.stop='')
</template> </template>
<script> <script>

View File

@ -1,8 +1,12 @@
import Vue from 'vue' import Vue from 'vue'
import { MdApp, MdTabs, MdProgress } from 'vue-material/dist/components' // eslint-disable-next-line
// import { MdApp, MdContent, MdProgress, MdSnackbar, MdTabs, MdToolbar } from 'vue-material/dist/components'
import { VueMaterial } from 'vue-material/dist/components'
import VueProgressBar from 'vue-progressbar' import VueProgressBar from 'vue-progressbar'
import VueToast from 'vue-toast' import VueToast from 'vue-toast'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
import 'vue-toast/dist/vue-toast.min.css' import 'vue-toast/dist/vue-toast.min.css'
import App from './App' import App from './App'
@ -25,9 +29,13 @@ Vue.use(VueProgressBar, {
} }
}) })
Vue.use(MdApp) // Vue.use(MdApp)
Vue.use(MdProgress) // Vue.use(MdContent)
Vue.use(MdTabs) // Vue.use(MdProgress)
// Vue.use(MdSnackbar)
// Vue.use(MdTabs)
// Vue.use(MdToolbar)
Vue.use(VueMaterial)
Vue.component('date-from-now', DateFromNow) Vue.component('date-from-now', DateFromNow)
Vue.component('md-icon', MaterialDesignIcon) Vue.component('md-icon', MaterialDesignIcon)
Vue.component('page-title', PageTitle) Vue.component('page-title', PageTitle)

File diff suppressed because it is too large Load Diff