Journal is more mobile-friendly (#11)

Also:
- Updated deps
- Ensure the date is wrapped as a whole on the Answered Request page

src/app/src/App.vue

@@ -6,10 +6,12 @@
     vue-progress-bar
     toast(ref='toast')
   footer
-    p.text-right.text-muted: i.
-      myPrayerJournal v{{ version }} •
-      #[a(href='https://github.com/danieljsummers/myprayerjournal') Developed] and hosted by
-      #[a(href='https://bitbadger.solutions') Bit Badger Solutions]
+    p.text-right.text-muted
+      | myPrayerJournal v{{ version }}
+      br
+      em: small.
+        #[a(href='https://github.com/danieljsummers/myprayerjournal') Developed] and hosted by
+        #[a(href='https://bitbadger.solutions') Bit Badger Solutions]
 </template>
 
 <script>

src/app/src/components/AnsweredDetail.vue

@@ -8,7 +8,8 @@ article
       #[small: em.text-muted prayed {{ prayedCount }} times, open {{ openDays }} days]
     p.mpj-request-text {{ lastText }}
     b-table(small hover :fields='fields' :items='log')
-      template(slot='action' scope='data') {{ data.item.status }} on {{ formatDate(data.item.asOf) }}
+      template(slot='action' scope='data').
+        {{ data.item.status }} on #[span.text-nowrap {{ formatDate(data.item.asOf) }}]
 </template>
 
 <script>

src/app/src/components/Journal.vue

@@ -5,12 +5,12 @@ article
   template(v-if='!isLoadingJournal')
     new-request
     br
-    request-list-item(v-if='journal.length > 0'
-                      v-for='row in journalCardRows'
-                      :row='row'
-                      :events='eventBus'
-                      :toast='toast'
-                      :key='row[0].requestId')
+    b-row(v-if='journal.length > 0')
+      request-list-item(v-for='request in journal'
+                        :key='request.requestId'
+                        :request='request'
+                        :events='eventBus'
+                        :toast='toast')
     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')

src/app/src/components/request/RequestListItem.vue

@@ -1,24 +1,18 @@
 <template lang="pug">
-div
-  b-card-group.w-100(deck)
-    b-card(v-for='(request, idx) in row'
-           :key='request.requestId'
-           border-variant='dark'
-           no-body)
-      b-card-header.text-center.py-1.
-        #[b-btn(@click='markPrayed(idx)' variant='outline-primary' title='Pray' size='sm'): icon(name='check')]
-        #[b-btn(@click.stop='showEdit(request)' variant='outline-secondary' title='Edit' size='sm'): icon(name='pencil')]
-        #[b-btn(@click.stop='showNotes(request)' variant='outline-secondary' title='Add Notes' size='sm'): icon(name='file-text-o')]
-        #[b-btn(@click.stop='showFull(idx)' variant='outline-secondary' title='View Full Request' size='sm'): icon(name='search')]
-      b-card-body.p-0
-        p.card-text.mpj-request-text.mb-1.px-3.pt-3
-          | {{ request.text }}
-        p.card-text.p-0.pr-1.text-right: small.text-muted: em
-          = '(last activity '
-          date-from-now(:value='request.asOf')
-          | )
-    b-card(v-for='it in 3 - row.length' key='-1')
-  br
+b-col(md='6' lg='4')
+  .mpj-request-card
+    b-card-header.text-center.py-1.
+      #[b-btn(@click='markPrayed()' variant='outline-primary' title='Pray' size='sm'): icon(name='check')]
+      #[b-btn(@click.stop='showEdit()' variant='outline-secondary' title='Edit' size='sm'): icon(name='pencil')]
+      #[b-btn(@click.stop='showNotes()' variant='outline-secondary' title='Add Notes' size='sm'): icon(name='file-text-o')]
+      #[b-btn(@click.stop='showFull()' variant='outline-secondary' title='View Full Request' size='sm'): icon(name='search')]
+    b-card-body.p-0
+      p.card-text.mpj-request-text.mb-1.px-3.pt-3
+        | {{ request.text }}
+      p.card-text.p-0.pr-1.text-right: small.text-muted: em
+        = '(last activity '
+        date-from-now(:value='request.asOf')
+        | )
 </template>
 
 <script>
@@ -29,29 +23,37 @@ import actions from '@/store/action-types'
 export default {
   name: 'request-list-item',
   props: {
-    row: { required: true },
+    request: { required: true },
     toast: { required: true },
     events: { required: true }
   },
   methods: {
-    async markPrayed (idx) {
+    async markPrayed () {
       await this.$store.dispatch(actions.UPDATE_REQUEST, {
         progress: this.$Progress,
-        requestId: this.row[idx].requestId,
+        requestId: this.request.requestId,
         status: 'Prayed',
         updateText: ''
       })
       this.toast.showToast('Request marked as prayed', { theme: 'success' })
     },
-    showEdit (request) {
-      this.events.$emit('edit', request)
+    showEdit () {
+      this.events.$emit('edit', this.request)
     },
-    showFull (idx) {
-      this.events.$emit('full', this.row[idx].requestId)
+    showFull () {
+      this.events.$emit('full', this.request.requestId)
     },
-    showNotes (request) {
-      this.events.$emit('notes', request)
+    showNotes () {
+      this.events.$emit('notes', this.request)
     }
   }
 }
 </script>
+
+<style>
+.mpj-request-card {
+  border: solid 1px darkgray;
+  border-radius: 5px;
+  margin-bottom: 15px;
+}
+</style>