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
_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

View File

@ -31,6 +31,9 @@ export default {
</script>
<style>
html, body {
background-color: whitesmoke;
}
body {
padding-top: 60px;
}
@ -42,11 +45,13 @@ footer {
footer p {
margin: 0;
}
.mpj-page-title {
border-bottom: solid 1px lightgray;
margin-bottom: 20px;
}
.mpj-request-text {
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>

View File

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

View File

@ -1,6 +1,7 @@
<template lang="pug">
article
page-title(title='Welcome!' hideOnPage='true')
page-title(title='Welcome!'
hideOnPage='true')
p &nbsp;
p.
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'
: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
edit-request(:events='eventBus' :toast='toast' )
edit-request(:events='eventBus'
:toast='toast')
full-request(:events='eventBus')
</template>
@ -32,17 +33,17 @@ import actions from '@/store/action-types'
export default {
name: 'journal',
data () {
return {
eventBus: new Vue()
}
},
components: {
EditRequest,
FullRequest,
NewRequest,
RequestListItem
},
data () {
return {
eventBus: new Vue()
}
},
computed: {
title () {
return `${this.user.given_name}'s Prayer Journal`

View File

@ -1,5 +1,8 @@
<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-navbar-brand(to='/')
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
b-collapse#nav_collapse(is-nav)
b-nav(is-nav-bar)
b-nav-item(v-if='isAuthenticated' to='/journal') Journal
b-nav-item(v-if='isAuthenticated' to='/answered') Answered
b-nav-item(v-if='isAuthenticated'
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='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>
<script>
@ -27,6 +34,9 @@ export default {
auth0: new AuthService()
}
},
computed: {
...mapState([ 'isAuthenticated' ])
},
methods: {
logOn () {
this.auth0.login()
@ -34,15 +44,6 @@ export default {
logOff () {
this.auth0.logout(this.$store, this.$router)
}
},
computed: {
...mapState([ 'isAuthenticated' ])
}
}
</script>
<style>
.bg-mpj {
background-color: #1e7e34 !important;
}
</style>

View File

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

View File

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

View File

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

View File

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

View File

@ -1,7 +1,10 @@
<template lang="pug">
div
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
p.card-text.mpj-request-text.mb-1.px-3.pt-3
| {{ request.text }}