Misc tweaks

- Updated SFCs per Vue Style Guide guidelines
- Added green gradient to header and off-white background color to body
- Changed DJS Consulting to Bit Badger Solutions in the docs
This commit is contained in:
Daniel J. Summers 2017-10-08 19:19:24 -05:00
parent 8055c34f7c
commit 3acec3dc25
11 changed files with 108 additions and 69 deletions

View File

@ -1,6 +1,8 @@
# Documentation
## Caveats ## Caveats
_myPrayerJournal is currently alpha software. There likely will be errors, the way things work may change, and parts of the application are unfinished or need polish. I **will** do my best to not lose any data, though; it is backed up the way other DJS Consulting sites have their data backed up. Throughout this document, current gotchas will be called out with italic text, like this notice._ _myPrayerJournal is currently alpha software. There likely will be errors, the way things work may change, and parts of the application are unfinished or need polish. I **will** do my best to not lose any data, though; it is backed up the way other Bit Badger Solutions sites have their data backed up. Throughout this document, current gotchas will be called out with italic text, like this notice._
## Finding the Site ## Finding the Site

View File

@ -31,6 +31,9 @@ export default {
</script> </script>
<style> <style>
html, body {
background-color: whitesmoke;
}
body { body {
padding-top: 60px; padding-top: 60px;
} }
@ -42,11 +45,13 @@ footer {
footer p { footer p {
margin: 0; margin: 0;
} }
.mpj-page-title {
border-bottom: solid 1px lightgray;
margin-bottom: 20px;
}
.mpj-request-text { .mpj-request-text {
white-space: pre-line; white-space: pre-line;
} }
.bg-mpj {
background-image: -webkit-gradient(linear, left top, left bottom, from(#050), to(whitesmoke));
background-image: -webkit-linear-gradient(top, #050, whitesmoke);
background-image: -moz-linear-gradient(top, #050, whitesmoke);
background-image: linear-gradient(to bottom, #050, whitesmoke);
}
</style> </style>

View File

@ -3,8 +3,10 @@ article
page-title(title='Answered Requests') page-title(title='Answered Requests')
p(v-if='!loaded') Loading answered requests... p(v-if='!loaded') Loading answered requests...
div(v-if='loaded') div(v-if='loaded')
p.mpj-request-text(v-for='req in requests') p.mpj-request-text(v-for='req in requests' :key='req.requestId')
b-btn(@click='showFull(req.requestId)' size='sm' variant='outline-secondary') b-btn(@click='showFull(req.requestId)'
size='sm'
variant='outline-secondary')
icon(name='search') icon(name='search')
| &nbsp;View Full Request | &nbsp;View Full Request
| &nbsp; &nbsp; {{ req.text }} &nbsp; | &nbsp; &nbsp; {{ req.text }} &nbsp;
@ -24,6 +26,9 @@ import api from '@/api'
export default { export default {
name: 'answered', name: 'answered',
components: {
FullRequest
},
data () { data () {
return { return {
eventBus: new Vue(), eventBus: new Vue(),
@ -31,6 +36,11 @@ export default {
loaded: false loaded: false
} }
}, },
computed: {
toast () {
return this.$parent.$refs.toast
}
},
async mounted () { async mounted () {
this.$Progress.start() this.$Progress.start()
try { try {
@ -45,14 +55,6 @@ export default {
this.loaded = true this.loaded = true
} }
}, },
components: {
FullRequest
},
computed: {
toast () {
return this.$parent.$refs.toast
}
},
methods: { methods: {
showFull (requestId) { showFull (requestId) {
this.eventBus.$emit('full', requestId) this.eventBus.$emit('full', requestId)

View File

@ -1,6 +1,7 @@
<template lang="pug"> <template lang="pug">
article article
page-title(title='Welcome!' hideOnPage='true') page-title(title='Welcome!'
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

@ -12,7 +12,8 @@ article
:toast='toast' :toast='toast'
:key='row[0].requestId') :key='row[0].requestId')
p.text-center(v-if='journal.length === 0'): em No requests found; click the "Add a New Request" button to add one p.text-center(v-if='journal.length === 0'): em No requests found; click the "Add a New Request" button to add one
edit-request(:events='eventBus' :toast='toast' ) edit-request(:events='eventBus'
:toast='toast')
full-request(:events='eventBus') full-request(:events='eventBus')
</template> </template>
@ -32,17 +33,17 @@ import actions from '@/store/action-types'
export default { export default {
name: 'journal', name: 'journal',
data () {
return {
eventBus: new Vue()
}
},
components: { components: {
EditRequest, EditRequest,
FullRequest, FullRequest,
NewRequest, NewRequest,
RequestListItem RequestListItem
}, },
data () {
return {
eventBus: new Vue()
}
},
computed: { computed: {
title () { title () {
return `${this.user.given_name}'s Prayer Journal` return `${this.user.given_name}'s Prayer Journal`

View File

@ -1,5 +1,8 @@
<template lang="pug"> <template lang="pug">
b-navbar(toggleable='sm' type='dark' variant='mpj' fixed='top') b-navbar(toggleable='sm'
type='dark'
variant='mpj'
fixed='top')
b-nav-toggle(target='nav_collapse') b-nav-toggle(target='nav_collapse')
b-navbar-brand(to='/') b-navbar-brand(to='/')
span(style='font-weight:100;') my span(style='font-weight:100;') my
@ -7,11 +10,15 @@ b-navbar(toggleable='sm' type='dark' variant='mpj' fixed='top')
span(style='font-weight:700;') Journal span(style='font-weight:700;') Journal
b-collapse#nav_collapse(is-nav) b-collapse#nav_collapse(is-nav)
b-nav(is-nav-bar) b-nav(is-nav-bar)
b-nav-item(v-if='isAuthenticated' to='/journal') Journal b-nav-item(v-if='isAuthenticated'
b-nav-item(v-if='isAuthenticated' to='/answered') Answered to='/journal') Journal
b-nav-item(v-if='isAuthenticated'
to='/answered') Answered
b-nav-item(v-if='isAuthenticated'): a(@click.stop='logOff()') Log Off b-nav-item(v-if='isAuthenticated'): a(@click.stop='logOff()') Log Off
b-nav-item(v-if='!isAuthenticated'): a(@click.stop='logOn()') Log On b-nav-item(v-if='!isAuthenticated'): a(@click.stop='logOn()') Log On
b-nav-item(href='https://danieljsummers.github.io/myPrayerJournal/' target='_blank' @click.stop='') Docs b-nav-item(href='https://danieljsummers.github.io/myPrayerJournal/'
target='_blank'
@click.stop='') Docs
</template> </template>
<script> <script>
@ -27,6 +34,9 @@ export default {
auth0: new AuthService() auth0: new AuthService()
} }
}, },
computed: {
...mapState([ 'isAuthenticated' ])
},
methods: { methods: {
logOn () { logOn () {
this.auth0.login() this.auth0.login()
@ -34,15 +44,6 @@ export default {
logOff () { logOff () {
this.auth0.logout(this.$store, this.$router) this.auth0.logout(this.$store, this.$router)
} }
},
computed: {
...mapState([ 'isAuthenticated' ])
} }
} }
</script> </script>
<style>
.bg-mpj {
background-color: #1e7e34 !important;
}
</style>

View File

@ -1,5 +1,6 @@
<template lang="pug"> <template lang="pug">
h2.mpj-page-title(v-if='!hideOnPage' v-html='title') h2.mpj-page-title(v-if='!hideOnPage'
v-html='title')
</template> </template>
<script> <script>
@ -15,13 +16,20 @@ export default {
default: false default: false
} }
}, },
created () {
document.title = `${this.title} « myPrayerJournal`
},
watch: { watch: {
title () { title () {
document.title = `${this.title} « myPrayerJournal` document.title = `${this.title} « myPrayerJournal`
} }
},
created () {
document.title = `${this.title} « myPrayerJournal`
} }
} }
</script> </script>
<style scoped>
.mpj-page-title {
border-bottom: solid 1px lightgray;
margin-bottom: 20px;
}
</style>

View File

@ -1,25 +1,31 @@
<template lang="pug"> <template lang="pug">
span span
//- b-btn(@click='openDialog()' title='Edit' size='sm' variant='outline-secondary'): icon(name='pencil') b-modal(v-model='editVisible'
b-modal(title='Edit Prayer Request' header-bg-variant='mpj'
v-model='editVisible'
size='lg'
header-bg-variant='dark'
header-text-variant='light' header-text-variant='light'
size='lg'
title='Edit Prayer Request'
@edit='openDialog()' @edit='openDialog()'
@shows='focusRequestText') @shows='focusRequestText')
b-form b-form
b-form-group(label='Prayer Request' label-for='request_text') b-form-group(label='Prayer Request'
b-textarea#request_text(v-model='form.requestText' :rows='10' @blur='trimText()' ref='toFocus') label-for='request_text')
b-textarea#request_text(ref='toFocus'
v-model='form.requestText'
:rows='10'
@blur='trimText()')
b-form-group(label='Also Mark As') b-form-group(label='Also Mark As')
b-radio-group(v-model='form.status' buttons) b-radio-group(v-model='form.status'
buttons)
b-radio(value='Updated') Updated b-radio(value='Updated') Updated
b-radio(value='Prayed') Prayed b-radio(value='Prayed') Prayed
b-radio(value='Answered') Answered b-radio(value='Answered') Answered
div.w-100.text-right(slot='modal-footer') div.w-100.text-right(slot='modal-footer')
b-btn(variant='primary' @click='saveRequest()') Save b-btn(variant='primary'
@click='saveRequest()') Save
| &nbsp; &nbsp; | &nbsp; &nbsp;
b-btn(variant='outline-secondary' @click='closeDialog()') Cancel b-btn(variant='outline-secondary'
@click='closeDialog()') Cancel
</template> </template>
<script> <script>

View File

@ -1,15 +1,19 @@
<template lang="pug"> <template lang="pug">
span span
b-modal(title='Prayer Request History' b-modal(v-model='historyVisible'
v-model='historyVisible' header-bg-variant='mpj'
size='lg'
header-bg-variant='dark'
header-text-variant='light' header-text-variant='light'
size='lg'
title='Prayer Request History'
@shows='focusRequestText') @shows='focusRequestText')
b-list-group(v-if='null !== full' flush) b-list-group(v-if='null !== full'
full-request-history(v-for='item in full.history' :history='item' :key='item.asOf') flush)
full-request-history(v-for='item in full.history'
:key='item.asOf'
:history='item')
div.w-100.text-right(slot='modal-footer') div.w-100.text-right(slot='modal-footer')
b-btn(variant='primary' @click='closeDialog()') Close b-btn(variant='primary'
@click='closeDialog()') Close
</template> </template>
<script> <script>
@ -21,6 +25,9 @@ import api from '@/api'
export default { export default {
name: 'full-request', name: 'full-request',
components: {
FullRequestHistory
},
props: { props: {
events: { required: true } events: { required: true }
}, },
@ -33,9 +40,6 @@ export default {
created () { created () {
this.events.$on('full', this.openDialog) this.events.$on('full', this.openDialog)
}, },
components: {
FullRequestHistory
},
methods: { methods: {
closeDialog () { closeDialog () {
this.full = null this.full = null
@ -50,4 +54,4 @@ export default {
} }
} }
} }
</script> </script>

View File

@ -3,19 +3,25 @@ div
b-btn(@click='openDialog()' size='sm' variant='primary') b-btn(@click='openDialog()' size='sm' variant='primary')
icon(name='plus') icon(name='plus')
| &nbsp; Add a New Request | &nbsp; Add a New Request
b-modal(title='Add a New Prayer Request' b-modal(v-model='showNewVisible'
v-model='showNewVisible' header-bg-variant='mpj'
size='lg'
header-bg-variant='dark'
header-text-variant='light' header-text-variant='light'
size='lg'
title='Add a New Prayer Request'
@shown='focusRequestText') @shown='focusRequestText')
b-form b-form
b-form-group(label='Prayer Request' label-for='request_text') b-form-group(label='Prayer Request'
b-textarea#request_text(v-model='form.requestText' :rows='10' @blur='trimText()' ref='toFocus') label-for='request_text')
b-textarea#request_text(ref='toFocus'
v-model='form.requestText'
:rows='10'
@blur='trimText()')
div.w-100.text-right(slot='modal-footer') div.w-100.text-right(slot='modal-footer')
b-btn(variant='primary' @click='saveRequest()') Save b-btn(variant='primary'
@click='saveRequest()') Save
| &nbsp; &nbsp; | &nbsp; &nbsp;
b-btn(variant='outline-secondary' @click='closeDialog()') Cancel b-btn(variant='outline-secondary'
@click='closeDialog()') Cancel
toast(ref='toast') toast(ref='toast')
</template> </template>

View File

@ -1,7 +1,10 @@
<template lang="pug"> <template lang="pug">
div div
b-card-group.w-100(deck) b-card-group.w-100(deck)
b-card(v-for='(request, idx) in row' border-variant='dark' no-body) b-card(v-for='(request, idx) in row'
:key='request.requestId'
border-variant='dark'
no-body)
b-card-body.p-0 b-card-body.p-0
p.card-text.mpj-request-text.mb-1.px-3.pt-3 p.card-text.mpj-request-text.mb-1.px-3.pt-3
| {{ request.text }} | {{ request.text }}