v2'd all request lists; converted CSS to SASS

src/app/src/App.vue

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

src/app/src/components/Journal.vue

@@ -3,17 +3,22 @@ article.mpj-main-content-wide(role='main')
   page-title(:title='title')
   p(v-if='isLoadingJournal') Loading your prayer journal...
   template(v-else)
-    .mpj-text-center
+    md-empty-state(v-if='journal.length === 0'
-      md-button(:to="{ name: 'EditRequest', params: { id: 'new' } }"
+                   md-icon='done_all'
-                role='button').
+                   md-label='No Requests to Show'
-        #[md-icon add_box] Add a New Request
+                   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')
-    br
+      md-button(:to="{ name: 'Journal' }").md-primary.md-raised Add a New Request
-    .mpj-journal(v-if='journal.length > 0')
+    template(v-else)
-      request-card(v-for='request in journal'
+      .mpj-text-center
-                   :key='request.requestId'
+        md-button(:to="{ name: 'EditRequest', params: { id: 'new' } }"
-                   :request='request')
+                  role='button').md-raised
-    p.text-center(v-else): em.
+          md-icon add_box
-      No requests found; click the “Add a New Request” button to add one
+          = ' Add a New Request'
+      br
+      .mpj-journal
+        request-card(v-for='request in journal'
+                    :key='request.requestId'
+                    :request='request')
     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
+    template(v-if='!isAnswered')
-  | &nbsp; &nbsp;
+      md-button(@click='editRequest').md-icon-button.md-raised
-  template(v-if='!isAnswered')
+        md-icon edit
-    button(@click='editRequest'
+        md-tooltip(md-direction='top'
-           title='Edit Request').
+                   md-delay=250) Edit Request
-      #[md-icon edit] Edit Request
+    template(v-if='isSnoozed')
-    | &nbsp; &nbsp;
+      md-button(@click='cancelSnooze()').md-icon-button.md-raised
-  template(v-if='isSnoozed')
+        md-icon restore
-    button(@click='cancelSnooze()').
+        md-tooltip(md-direction='top'
-      #[md-icon restore] Cancel Snooze
+                   md-delay=250) Cancel Snooze
-    | &nbsp; &nbsp;
+    template(v-if='isPending')
-  template(v-if='isPending')
+      md-button(@click='showNow()').md-icon-button.md-rasied
-    button(@click='showNow()').
+        md-icon restore
-      #[md-icon restore] Show Now
+        md-tooltip(md-direction='top'
-  br(v-if='isSnoozed || isPending || isAnswered')
+                   md-delay=250) Show Now
-  small(v-if='isSnoozed').mpj-muted-text: em.
+  md-table-cell.mpj-request-cell
-    &nbsp; Snooze expires #[date-from-now(:value='request.snoozedUntil')]
+    p.mpj-request-text
-  small(v-if='isPending').mpj-muted-text: em.
+      | {{ request.text }}
-    &nbsp; Request scheduled to reappear #[date-from-now(:value='request.showAfter')]
+    br(v-if='isSnoozed || isPending || isAnswered')
-  small(v-if='isAnswered').mpj-muted-text: em.
+    small(v-if='isSnoozed').mpj-muted-text: em.
-    &nbsp; Answered #[date-from-now(:value='request.asOf')]
+      Snooze expires #[date-from-now(:value='request.snoozedUntil')]
+    small(v-if='isPending').mpj-muted-text: em.
+      Request scheduled to reappear #[date-from-now(:value='request.showAfter')]
+    small(v-if='isAnswered').mpj-muted-text: em.
+      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 {