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
2017-10-08 19:19:24 -05:00 · 2017-10-08 19:19:24 -05:00 · 3acec3dc25
commit 3acec3dc25
parent 8055c34f7c
11 changed files with 108 additions and 69 deletions
--- a/docs/index.md
+++ b/docs/index.md
@ -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

--- a/src/app/src/App.vue
+++ b/src/app/src/App.vue
@ -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>
--- a/src/app/src/components/Answered.vue
+++ b/src/app/src/components/Answered.vue
@ -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)
--- a/src/app/src/components/Home.vue
+++ b/src/app/src/components/Home.vue
@ -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,
--- a/src/app/src/components/Journal.vue
+++ b/src/app/src/components/Journal.vue
@ -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`
--- a/src/app/src/components/Navigation.vue
+++ b/src/app/src/components/Navigation.vue
@ -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>
--- a/src/app/src/components/common/PageTitle.vue
+++ b/src/app/src/components/common/PageTitle.vue
@ -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>
--- a/src/app/src/components/request/EditRequest.vue
+++ b/src/app/src/components/request/EditRequest.vue
@ -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>
--- a/src/app/src/components/request/FullRequest.vue
+++ b/src/app/src/components/request/FullRequest.vue
@ -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
@ -50,4 +54,4 @@ export default {
    }
  }
 }
-</script>
+</script>
--- a/src/app/src/components/request/NewRequest.vue
+++ b/src/app/src/components/request/NewRequest.vue
@ -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>

--- a/src/app/src/components/request/RequestListItem.vue
+++ b/src/app/src/components/request/RequestListItem.vue
@ -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 }}