v2'd all request lists; converted CSS to SASS

src/app/src/App.vue

@@ -102,13 +102,12 @@ 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;
   }
@@ -126,11 +125,10 @@ h4 {
   }
   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;
   }
@@ -187,11 +185,10 @@ a:link, a:visited {
   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) {
@@ -199,10 +196,9 @@ a:hover {
       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 {
@@ -225,31 +221,24 @@ 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;
   }
-.mpj-text-nowrap {
+.mpj-text-center
-  white-space: nowrap;
+  text-align: center
-}
+.mpj-text-nowrap
-.mpj-text-right {
+  white-space: nowrap
-  text-align: right;
+.mpj-text-right
-}
+  text-align: right
-.mpj-muted-text {
+.mpj-muted-text
-  color: rgba(0, 0, 0, .6);
+  color: rgba(0, 0, 0, .6)
-}
+.mpj-narrow
-.mpj-narrow {
+  max-width: 40rem
-  max-width: 40rem;
+  margin: auto
-  margin: auto;
+.mpj-skinny
-}
+  max-width: 20rem
-.mpj-skinny {
+  margin: auto
-  max-width: 20rem;
+.mpj-full-width
-  margin: auto;
+  width: 100%
-}
+// .mpj-modal {
-.mpj-full-width {
-  width: 100%;
-} /*
-.mpj-modal {
     position: fixed;
     z-index: 8;
     left: 0;
@@ -294,7 +283,6 @@ a:hover {
   .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">
+md-table-row
+  md-table-cell.mpj-action-cell
+    md-button(@click='viewFull').md-icon-button.md-raised
+      md-icon description
+      md-tooltip(md-direction='top'
+                 md-delay=250) View Full Request
+    template(v-if='!isAnswered')
+      md-button(@click='editRequest').md-icon-button.md-raised
+        md-icon edit
+        md-tooltip(md-direction='top'
+                   md-delay=250) Edit Request
+    template(v-if='isSnoozed')
+      md-button(@click='cancelSnooze()').md-icon-button.md-raised
+        md-icon restore
+        md-tooltip(md-direction='top'
+                   md-delay=250) Cancel Snooze
+    template(v-if='isPending')
+      md-button(@click='showNow()').md-icon-button.md-rasied
+        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
-  br
-  button(@click='viewFull'
-         title='View Full Request').
-    #[md-icon description] View Full Request
-  | &nbsp; &nbsp;
-  template(v-if='!isAnswered')
-    button(@click='editRequest'
-           title='Edit Request').
-      #[md-icon edit] Edit Request
-    | &nbsp; &nbsp;
-  template(v-if='isSnoozed')
-    button(@click='cancelSnooze()').
-      #[md-icon restore] Cancel Snooze
-    | &nbsp; &nbsp;
-  template(v-if='isPending')
-    button(@click='showNow()').
-      #[md-icon restore] Show Now
     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 {