Began implementing Vue Material
This commit is contained in:
parent
d4671c044d
commit
a652351995
src/app
@ -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.
|
||||||
|
@ -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
|
p
|
||||||
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,
|
||||||
|
@ -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>
|
||||||
|
@ -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
Loading…
Reference in New Issue
Block a user