Convert journal cards

src/app/src/App.vue

@@ -104,10 +104,10 @@ export default {
 
 <style>
 html, body {
-  background-color: whitesmoke;
+/*  background-color: whitesmoke; */
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
   font-size: 1rem;
-}
+} /*
 h1, h2, h3, h4, h5 {
   font-weight: 500;
   margin-top: 0;
@@ -126,10 +126,10 @@ h4 {
 }
 h5 {
   font-size: 1.25rem;
-}
+} */
 p {
   margin-bottom: 0;
-}
+} /*
 input, textarea, select {
   border-radius: .25rem;
   font-size: 1rem;
@@ -225,7 +225,7 @@ a:hover {
   background-image: -webkit-linear-gradient(top, #050, whitesmoke);
   background-image: -moz-linear-gradient(top, #050, whitesmoke);
   background-image: linear-gradient(to bottom, #050, whitesmoke);
-}
+} */
 .mpj-text-center {
   text-align: center;
 }
@@ -248,7 +248,7 @@ a:hover {
 }
 .mpj-full-width {
   width: 100%;
-}
+} /*
 .mpj-modal {
   position: fixed;
   z-index: 8;
@@ -293,7 +293,7 @@ a:hover {
 }
 .material-icons {
   vertical-align: middle;
-}
+} */
 .md-progress-bar {
   margin: 24px;
 }

src/app/src/components/Journal.vue

@@ -4,8 +4,8 @@ article.mpj-main-content-wide(role='main')
   p(v-if='isLoadingJournal') Loading your prayer journal...
   template(v-else)
     .mpj-text-center
-      router-link(:to="{ name: 'EditRequest', params: { id: 'new' } }"
-                  role='button').
+      md-button(:to="{ name: 'EditRequest', params: { id: 'new' } }"
+                role='button').
         #[md-icon add_box] Add a New Request
     br
     .mpj-journal(v-if='journal.length > 0')

src/app/src/components/common/Navigation.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .md-toolbar-row
-  md-tabs.md-primary
+  md-tabs.md-primary(md-sync-route)
     md-tab#mpj-home(md-label='Home'
                     :to="{ name: 'Home' }")
     md-tab#mpj-journal(v-if='isAuthenticated'

src/app/src/components/common/PageTitle.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-h2.mpj-page-title(v-if='!hideOnPage'
-                  v-html='title')
+h1.md-title(v-if='!hideOnPage'
+            v-html='title')
 </template>
 
 <script>
@@ -26,10 +26,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.mpj-page-title {
-  border-bottom: solid 1px lightgray;
-  margin-bottom: 20px;
-}
-</style>

src/app/src/components/request/NotesEdit.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.mpj-modal(v-show='notesVisible')
+md-dialog(:md-active.sync='notesVisible')
   .mpj-modal-content.mpj-narrow
     header.mpj-bg
       h5 Add Notes to Prayer Request

src/app/src/components/request/RequestCard.vue

@@ -1,11 +1,25 @@
 <template lang="pug">
-.mpj-request-card(v-if='shouldDisplay')
-  header.mpj-card-header(role='toolbar').
-    #[button(@click='markPrayed()' title='Pray').primary: md-icon done]
-    #[button(@click.stop='showEdit()' title='Edit'): md-icon edit]
-    #[button(@click.stop='showNotes()' title='Add Notes'): md-icon comment]
-    #[button(@click.stop='snooze()' title='Snooze Request'): md-icon schedule]
-  div
+md-card.mpj-request-card(v-if='shouldDisplay'
+                         md-with-hover)
+  md-card-actions(md-alignment='space-between')
+    md-button.md-icon-button.md-raised.md-primary(@click='markPrayed()')
+      md-icon done
+      md-tooltip(md-direction='top'
+                 md-delay=1000) Mark as Prayed
+    span
+      md-button.md-icon-button.md-raised(@click.stop='showEdit()')
+        md-icon edit
+        md-tooltip(md-direction='top'
+                   md-delay=1000) Edit Request
+      md-button.md-icon-button.md-raised(@click.stop='showNotes()')
+        md-icon comment
+        md-tooltip(md-direction='top'
+                   md-delay=1000) Add Notes
+      md-button.md-icon-button.md-raised(@click.stop='snooze()')
+        md-icon schedule
+        md-tooltip(md-direction='top'
+                   md-delay=1000) Snooze Request
+  md-card-content
     p.card-text.mpj-request-text
       | {{ request.text }}
     p.as-of.mpj-text-right: small.mpj-muted-text: em
@@ -22,8 +36,9 @@ import actions from '@/store/action-types'
 export default {
   name: 'request-card',
   inject: [
+    'journalEvents',
     'messages',
-    'journalEvents'
+    'progress'
   ],
   props: {
     request: { required: true }
@@ -37,7 +52,7 @@ export default {
   methods: {
     async markPrayed () {
       await this.$store.dispatch(actions.UPDATE_REQUEST, {
-        progress: this.$Progress,
+        progress: this.progress,
         requestId: this.request.requestId,
         status: 'Prayed',
         updateText: ''
@@ -59,16 +74,18 @@ export default {
 
 <style>
 .mpj-request-card {
-  border: solid 1px darkgray;
-  border-radius: 5px;
+/*  border: solid 1px darkgray;
+  border-radius: 5px; */
   width: 20rem;
-  margin: .5rem;
+  margin-bottom: 1rem;
+/*  margin: .5rem; */
 }
 @media screen and (max-width: 20rem) {
   .mpj-request-card {
     width: 100%;
   }
 }
+/*
 .mpj-card-header {
   display: flex;
   flex-flow: row;
@@ -91,5 +108,5 @@ export default {
 }
 .mpj-request-card .as-of {
   margin-right: .25rem;
-}
+} */
 </style>