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">
#app(role='application')
md-app(md-waterfall md-mode='fixed-last' role='application')
p navigation here
navigation
#content
p navigation there
md-app-content
router-view
vue-progress-bar
toast(ref='toast')
footer.mpj-text-right.mpj-muted-text
p
p.mpj-muted-text
| myPrayerJournal v{{ version }}
br
em: small.

View File

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

View File

@ -1,8 +1,12 @@
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 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 App from './App'
@ -25,9 +29,13 @@ Vue.use(VueProgressBar, {
}
})
Vue.use(MdApp)
Vue.use(MdProgress)
Vue.use(MdTabs)
// Vue.use(MdApp)
// Vue.use(MdContent)
// Vue.use(MdProgress)
// Vue.use(MdSnackbar)
// Vue.use(MdTabs)
// Vue.use(MdToolbar)
Vue.use(VueMaterial)
Vue.component('date-from-now', DateFromNow)
Vue.component('md-icon', MaterialDesignIcon)
Vue.component('page-title', PageTitle)

File diff suppressed because it is too large Load Diff