src/app/src/App.vue

@@ -102,154 +102,143 @@ export default {
 }
 </script>
 
-<style>
+<style lang="sass">
-html, body {
+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;
+  font-size: 1rem
-} /*
+// h1, h2, h3, h4, h5 {
-h1, h2, h3, h4, h5 {
     font-weight: 500;
     margin-top: 0;
-}
+  }
-h1 {
+  h1 {
     font-size: 2.5rem;
-}
+  }
-h2 {
+  h2 {
     font-size: 2rem;
-}
+  }
-h3 {
+  h3 {
     font-size: 1.75rem;
-}
+  }
-h4 {
+  h4 {
     font-size: 1.5rem;
-}
+  }
-h5 {
+  h5 {
     font-size: 1.25rem;
-} */
+  }
-p {
+p
-  margin-bottom: 0;
+  margin-bottom: 0
-} /*
+// input, textarea, select {
-input, textarea, select {
     border-radius: .25rem;
     font-size: 1rem;
-}
+  }
-textarea {
+  textarea {
     font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
-}
+  }
-input, select {
+  input, select {
     font-family: inherit;
-}
+  }
-button,
+  button,
-a[role="button"] {
+  a[role="button"] {
     border: solid 1px #050;
     border-radius: .5rem;
     background-color: rgb(235, 235, 235);
     padding: .25rem;
     font-size: 1rem;
-}
+  }
-a[role="button"]:link,
+  a[role="button"]:link,
-a[role="button"]:visited {
+  a[role="button"]:visited {
     color: black;
-}
+  }
-button.primary,
+  button.primary,
-a[role="button"].primary {
+  a[role="button"].primary {
     background-color: white;
     border-width: 3px;
-}
+  }
-button:hover,
+  button:hover,
-a[role="button"]:hover {
+  a[role="button"]:hover {
     cursor: pointer;
     background-color: #050;
     color: white;
     text-decoration: none;
-}
+  }
-label {
+  label {
     font-variant: small-caps;
     font-size: 1.1rem;
-}
+  }
-label.normal {
+  label.normal {
     font-variant: unset;
     font-size: unset;
-}
+  }
-footer {
+  footer {
     border-top: solid 1px lightgray;
     margin-top: 1rem;
     padding: 0 1rem;
-}
+  }
-footer p {
+  footer p {
     margin: 0;
-}
+  }
-a:link, a:visited {
+  a:link, a:visited {
     color: #050;
     text-decoration: none;
-}
+  }
-a:hover {
+  a:hover {
     text-decoration: underline;
-}
+  }
-.mpj-main-content {
+.mpj-main-content
-  max-width: 60rem;
+  max-width: 60rem
-  margin: auto;
+  margin: auto
-}
+// .mpj-main-content-wide {
-.mpj-main-content-wide {
     margin: .5rem;
-}
+  }
-@media screen and (max-width: 21rem) {
+  @media screen and (max-width: 21rem) {
     .mpj-main-content-wide {
       margin: 0;
     }
-}
+  }
-.mpj-request-text {
+.mpj-request-text
-  white-space: pre-line;
+  white-space: pre-line
-}
+// .mpj-request-list p {
-.mpj-request-list p {
     border-top: solid 1px lightgray;
-}
+  }
-.mpj-request-list p:first-child {
+  .mpj-request-list p:first-child {
     border-top: none;
-}
+  }
-.mpj-request-log {
+  .mpj-request-log {
     width: 100%;
-}
+  }
-.mpj-request-log thead th {
+  .mpj-request-log thead th {
     border-top: solid 1px lightgray;
     border-bottom: solid 2px lightgray;
     text-align: left;
-}
+  }
-.mpj-request-log tbody td {
+  .mpj-request-log tbody td {
     border-bottom: dotted 1px lightgray;
     vertical-align: top;
-}
+  }
-.mpj-bg {
+  .mpj-bg {
     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);
-} */
+  }
-.mpj-text-center {
+.mpj-text-center
-  text-align: center;
+  text-align: center
-}
+.mpj-text-nowrap
-.mpj-text-nowrap {
+  white-space: nowrap
-  white-space: nowrap;
+.mpj-text-right
-}
+  text-align: right
-.mpj-text-right {
+.mpj-muted-text
-  text-align: right;
+  color: rgba(0, 0, 0, .6)
-}
+.mpj-narrow
-.mpj-muted-text {
+  max-width: 40rem
-  color: rgba(0, 0, 0, .6);
+  margin: auto
-}
+.mpj-skinny
-.mpj-narrow {
+  max-width: 20rem
-  max-width: 40rem;
+  margin: auto
-  margin: auto;
+.mpj-full-width
-}
+  width: 100%
-.mpj-skinny {
+// .mpj-modal {
-  max-width: 20rem;
-  margin: auto;
-}
-.mpj-full-width {
-  width: 100%;
-} /*
-.mpj-modal {
     position: fixed;
     z-index: 8;
     left: 0;
@@ -258,8 +247,8 @@ a:hover {
     height: 100%;
     overflow: auto;
     background-color: rgba(0, 0, 0, .4);
-}
+  }
-.mpj-modal-content {
+  .mpj-modal-content {
     background-color: whitesmoke;
     border: solid 1px #050;
     border-radius: .5rem;
@@ -267,8 +256,8 @@ a:hover {
     animation-duration: 0.4s;
     padding: 1rem;
     margin-top: 4rem;
-}
+  }
-@keyframes animatetop {
+  @keyframes animatetop {
     from {
       top: -300px;
       opacity: 0;
@@ -277,24 +266,23 @@ a:hover {
       top: 0;
       opacity: 1;
     }
-}
+  }
-.mpj-modal-content header {
+  .mpj-modal-content header {
     margin: -1rem -1rem .5rem;
     border-radius: .4rem;
-}
+  }
-.mpj-modal-content header h5 {
+  .mpj-modal-content header h5 {
     color: white;
     margin: 0;
     padding: 1rem;
-}
+  }
-.mpj-margin {
+  .mpj-margin {
     margin-left: 1rem;
     margin-right: 1rem;
-}
+  }
-.material-icons {
+  .material-icons {
     vertical-align: middle;
-} */
+  } */
-.md-progress-bar {
+.md-progress-bar
-  margin: 24px;
+  margin: 24px
-}
 </style>

src/app/src/components/Journal.vue

@@ -2,18 +2,23 @@
 article.mpj-main-content-wide(role='main')
   page-title(:title='title')
   p(v-if='isLoadingJournal') Loading your prayer journal...
+  template(v-else)
+    md-empty-state(v-if='journal.length === 0'
+                   md-icon='done_all'
+                   md-label='No Requests to Show'
+                   md-description='You have no requests to be shown; see the “Active” link above for snoozed/deferred requests, and the “Answered” link for answered requests')
+      md-button(:to="{ name: 'Journal' }").md-primary.md-raised Add a New Request
     template(v-else)
       .mpj-text-center
         md-button(:to="{ name: 'EditRequest', params: { id: 'new' } }"
-                role='button').
+                  role='button').md-raised
-        #[md-icon add_box] Add a New Request
+          md-icon add_box
+          = ' Add a New Request'
       br
-    .mpj-journal(v-if='journal.length > 0')
+      .mpj-journal
         request-card(v-for='request in journal'
                     :key='request.requestId'
                     :request='request')
-    p.text-center(v-else): em.
-      No requests found; click the “Add a New Request” button to add one
     notes-edit
     snooze-request
 </template>

src/app/src/components/request/ActiveRequests.vue

@@ -1,12 +1,16 @@
 <template lang="pug">
-article.mpj-main-content(role='main')
+md-content(role='main').mpj-main-content
-  page-title(title='Active Requests')
+  page-title(title='Active Requests'
-  div(v-if='loaded').mpj-request-list
+             hide-on-page=true)
-    p.mpj-text-center(v-if='requests.length === 0'): em.
+  template(v-if='loaded')
-      No active requests found; return to #[router-link(:to='{ name: "Journal" } ') your journal]
+    md-empty-state(v-if='requests.length === 0'
-    request-list-item(v-for='req in requests'
+                   md-icon='sentiment_dissatisfied'
-                      :key='req.requestId'
+                   md-label='No Active Requests'
-                      :request='req')
+                   md-description='Your prayer journal has no active requests')
+      md-button(:to="{ name: 'Journal' }").md-primary.md-raised Return to your journal
+    request-list(v-if='requests.length !== 0'
+                 title='Active Requests'
+                 :requests='requests')
   p(v-else) Loading journal...
 </template>
 
@@ -15,7 +19,7 @@ article.mpj-main-content(role='main')
 
 import { mapState } from 'vuex'
 
-import RequestListItem from '@/components/request/RequestListItem'
+import RequestList from '@/components/request/RequestList'
 
 import actions from '@/store/action-types'
 
@@ -23,7 +27,7 @@ export default {
   name: 'active-requests',
   inject: ['progress'],
   components: {
-    RequestListItem
+    RequestList
   },
   data () {
     return {

src/app/src/components/request/AnsweredRequests.vue

@@ -1,12 +1,15 @@
 <template lang="pug">
 article.mpj-main-content(role='main')
-  page-title(title='Answered Requests')
+  page-title(title='Answered Requests'
-  div(v-if='loaded').mpj-request-list
+             hide-on-page=true)
-    p.text-center(v-if='requests.length === 0'): em.
+  template(v-if='loaded')
-      No answered requests found; once you have marked one as &ldquo;Answered&rdquo;, it will appear here
+    md-empty-state(v-if='requests.length === 0'
-    request-list-item(v-for='req in requests'
+                   md-icon='sentiment_dissatisfied'
-                      :key='req.requestId'
+                   md-label='No Answered Requests'
-                      :request='req')
+                   md-description='Your prayer journal has no answered requests; once you have marked one as “Answered”, it will appear here')
+    request-list(v-if='requests.length !== 0'
+                 title='Answered Requests'
+                 :requests='requests')
   p(v-else) Loading answered requests...
 </template>
 
@@ -15,7 +18,7 @@ article.mpj-main-content(role='main')
 
 import api from '@/api'
 
-import RequestListItem from '@/components/request/RequestListItem'
+import RequestList from '@/components/request/RequestList'
 
 export default {
   name: 'answered-requests',
@@ -24,7 +27,7 @@ export default {
     'progress'
   ],
   components: {
-    RequestListItem
+    RequestList
   },
   data () {
     return {

src/app/src/components/request/RequestList.vue

@@ -0,0 +1,40 @@
+<template lang="pug">
+md-table(md-card)
+  md-table-toolbar
+    h1.md-title {{ title }}
+  md-table-row
+    md-table-head Actions
+    md-table-head Request
+  request-list-item(v-for='req in requests'
+                    :key='req.requestId'
+                    :request='req')
+
+</template>
+
+<script>
+'use strict'
+
+import RequestListItem from '@/components/request/RequestListItem'
+
+export default {
+  name: 'request-list',
+  components: { RequestListItem },
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    requests: {
+      type: Array,
+      required: true
+    }
+  },
+  data () {
+    return { }
+  },
+  created () {
+    this.$on('requestUnsnoozed', this.$parent.$emit('requestUnsnoozed'))
+    this.$on('requestNowShown', this.$parent.$emit('requestNowShown'))
+  }
+}
+</script>

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

@@ -1,31 +1,35 @@
 <template lang="pug">
-p.mpj-request-text
+md-table-row
-  | {{ request.text }}
+  md-table-cell.mpj-action-cell
-  br
+    md-button(@click='viewFull').md-icon-button.md-raised
-  br
+      md-icon description
-  button(@click='viewFull'
+      md-tooltip(md-direction='top'
-         title='View Full Request').
+                 md-delay=250) View Full Request
-    #[md-icon description] View Full Request
-  | &nbsp; &nbsp;
     template(v-if='!isAnswered')
-    button(@click='editRequest'
+      md-button(@click='editRequest').md-icon-button.md-raised
-           title='Edit Request').
+        md-icon edit
-      #[md-icon edit] Edit Request
+        md-tooltip(md-direction='top'
-    | &nbsp; &nbsp;
+                   md-delay=250) Edit Request
     template(v-if='isSnoozed')
-    button(@click='cancelSnooze()').
+      md-button(@click='cancelSnooze()').md-icon-button.md-raised
-      #[md-icon restore] Cancel Snooze
+        md-icon restore
-    | &nbsp; &nbsp;
+        md-tooltip(md-direction='top'
+                   md-delay=250) Cancel Snooze
     template(v-if='isPending')
-    button(@click='showNow()').
+      md-button(@click='showNow()').md-icon-button.md-rasied
-      #[md-icon restore] Show Now
+        md-icon restore
+        md-tooltip(md-direction='top'
+                   md-delay=250) Show Now
+  md-table-cell.mpj-request-cell
+    p.mpj-request-text
+      | {{ request.text }}
     br(v-if='isSnoozed || isPending || isAnswered')
     small(v-if='isSnoozed').mpj-muted-text: em.
-    &nbsp; Snooze expires #[date-from-now(:value='request.snoozedUntil')]
+      Snooze expires #[date-from-now(:value='request.snoozedUntil')]
     small(v-if='isPending').mpj-muted-text: em.
-    &nbsp; Request scheduled to reappear #[date-from-now(:value='request.showAfter')]
+      Request scheduled to reappear #[date-from-now(:value='request.showAfter')]
     small(v-if='isAnswered').mpj-muted-text: em.
-    &nbsp; Answered #[date-from-now(:value='request.asOf')]
+      Answered #[date-from-now(:value='request.asOf')]
 </template>
 
 <script>
@@ -87,3 +91,14 @@ export default {
   }
 }
 </script>
+
+<style lang="sass">
+.mpj-action-cell
+  width: 1%
+  white-space: nowrap
+  vertical-align: top
+.mpj-request-cell
+  vertical-align: top
+  p
+    margin-top: 0
+</style>

src/app/src/components/request/SnoozeRequest.vue

@@ -4,6 +4,7 @@ md-dialog(:md-active.sync='snoozeVisible').mpj-skinny
   md-content.mpj-dialog-content
     span.mpj-text-muted Until
     md-datepicker(v-model='form.snoozedUntil'
+                  :md-disabled-dates='datesInPast'
                   md-immediately)
   md-dialog-actions
     md-button(:disabled='!isValid'
@@ -33,6 +34,7 @@ export default {
   data () {
     return {
       snoozeVisible: false,
+      datesInPast: date => date < new Date(),
       form: {
         requestId: '',
         snoozedUntil: ''

src/app/src/components/request/SnoozedRequests.vue

@@ -1,12 +1,16 @@
 <template lang="pug">
 article.mpj-main-content(role='main')
-  page-title(title='Snoozed Requests')
+  page-title(title='Snoozed Requests'
-  div(v-if='loaded').mpj-request-list
+             hide-on-page=true)
-    p.mpj-text-center(v-if='requests.length === 0'): em.
+  template(v-if='loaded')
-      No snoozed requests found; return to #[router-link(:to='{ name: "Journal" } ') your journal]
+    md-empty-state(v-if='requests.length === 0'
-    request-list-item(v-for='req in requests'
+                   md-icon='sentiment_dissatisfied'
-                      :key='req.requestId'
+                   md-label='No Snoozed Requests'
-                      :request='req')
+                   md-description='Your prayer journal has no snoozed requests')
+      md-button(:to="{ name: 'Journal' }").md-primary.md-raised Return to your journal
+    request-list(v-if='requests.length !== 0'
+                 title='Snoozed Requests'
+                 :requests='requests')
   p(v-else) Loading journal...
 </template>
 
@@ -17,13 +21,13 @@ import { mapState } from 'vuex'
 
 import actions from '@/store/action-types'
 
-import RequestListItem from '@/components/request/RequestListItem'
+import RequestList from '@/components/request/RequestList'
 
 export default {
   name: 'snoozed-requests',
   inject: ['progress'],
   components: {
-    RequestListItem
+    RequestList
   },
   data () {
     return {