myPrayerJournal v2 #27
|
@ -102,199 +102,187 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
/* background-color: whitesmoke; */
|
||||
<style lang="sass">
|
||||
html, body
|
||||
// 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;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.25rem;
|
||||
} */
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
} /*
|
||||
input, textarea, select {
|
||||
border-radius: .25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
textarea {
|
||||
font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
input, select {
|
||||
font-family: inherit;
|
||||
}
|
||||
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"]:visited {
|
||||
color: black;
|
||||
}
|
||||
button.primary,
|
||||
a[role="button"].primary {
|
||||
background-color: white;
|
||||
border-width: 3px;
|
||||
}
|
||||
button:hover,
|
||||
a[role="button"]:hover {
|
||||
cursor: pointer;
|
||||
background-color: #050;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
label {
|
||||
font-variant: small-caps;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
label.normal {
|
||||
font-variant: unset;
|
||||
font-size: unset;
|
||||
}
|
||||
footer {
|
||||
border-top: solid 1px lightgray;
|
||||
margin-top: 1rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
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 {
|
||||
font-size: 1rem
|
||||
// h1, h2, h3, h4, h5 {
|
||||
font-weight: 500;
|
||||
margin-top: 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
p
|
||||
margin-bottom: 0
|
||||
// input, textarea, select {
|
||||
border-radius: .25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
textarea {
|
||||
font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
|
||||
}
|
||||
input, select {
|
||||
font-family: inherit;
|
||||
}
|
||||
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"]:visited {
|
||||
color: black;
|
||||
}
|
||||
button.primary,
|
||||
a[role="button"].primary {
|
||||
background-color: white;
|
||||
border-width: 3px;
|
||||
}
|
||||
button:hover,
|
||||
a[role="button"]:hover {
|
||||
cursor: pointer;
|
||||
background-color: #050;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
label {
|
||||
font-variant: small-caps;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
label.normal {
|
||||
font-variant: unset;
|
||||
font-size: unset;
|
||||
}
|
||||
footer {
|
||||
border-top: solid 1px lightgray;
|
||||
margin-top: 1rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
footer p {
|
||||
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;
|
||||
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;
|
||||
a:link, a:visited {
|
||||
color: #050;
|
||||
text-decoration: none;
|
||||
}
|
||||
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 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;
|
||||
}
|
||||
.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 {
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.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>
|
||||
|
|
|
@ -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-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')
|
||||
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
|
||||
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').md-raised
|
||||
md-icon add_box
|
||||
= ' Add a New Request'
|
||||
br
|
||||
.mpj-journal
|
||||
request-card(v-for='request in journal'
|
||||
:key='request.requestId'
|
||||
:request='request')
|
||||
notes-edit
|
||||
snooze-request
|
||||
</template>
|
||||
|
|
|
@ -1,12 +1,16 @@
|
|||
<template lang="pug">
|
||||
article.mpj-main-content(role='main')
|
||||
page-title(title='Active Requests')
|
||||
div(v-if='loaded').mpj-request-list
|
||||
p.mpj-text-center(v-if='requests.length === 0'): em.
|
||||
No active requests found; return to #[router-link(:to='{ name: "Journal" } ') your journal]
|
||||
request-list-item(v-for='req in requests'
|
||||
:key='req.requestId'
|
||||
:request='req')
|
||||
md-content(role='main').mpj-main-content
|
||||
page-title(title='Active Requests'
|
||||
hide-on-page=true)
|
||||
template(v-if='loaded')
|
||||
md-empty-state(v-if='requests.length === 0'
|
||||
md-icon='sentiment_dissatisfied'
|
||||
md-label='No Active Requests'
|
||||
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 {
|
||||
|
|
|
@ -1,12 +1,15 @@
|
|||
<template lang="pug">
|
||||
article.mpj-main-content(role='main')
|
||||
page-title(title='Answered Requests')
|
||||
div(v-if='loaded').mpj-request-list
|
||||
p.text-center(v-if='requests.length === 0'): em.
|
||||
No answered requests found; once you have marked one as “Answered”, it will appear here
|
||||
request-list-item(v-for='req in requests'
|
||||
:key='req.requestId'
|
||||
:request='req')
|
||||
page-title(title='Answered Requests'
|
||||
hide-on-page=true)
|
||||
template(v-if='loaded')
|
||||
md-empty-state(v-if='requests.length === 0'
|
||||
md-icon='sentiment_dissatisfied'
|
||||
md-label='No Answered Requests'
|
||||
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 {
|
||||
|
|
40
src/app/src/components/request/RequestList.vue
Normal file
40
src/app/src/components/request/RequestList.vue
Normal file
|
@ -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>
|
|
@ -1,31 +1,35 @@
|
|||
<template lang="pug">
|
||||
p.mpj-request-text
|
||||
| {{ request.text }}
|
||||
br
|
||||
br
|
||||
button(@click='viewFull'
|
||||
title='View Full Request').
|
||||
#[md-icon description] View Full Request
|
||||
|
|
||||
template(v-if='!isAnswered')
|
||||
button(@click='editRequest'
|
||||
title='Edit Request').
|
||||
#[md-icon edit] Edit Request
|
||||
|
|
||||
template(v-if='isSnoozed')
|
||||
button(@click='cancelSnooze()').
|
||||
#[md-icon restore] Cancel Snooze
|
||||
|
|
||||
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.
|
||||
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')]
|
||||
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(v-if='isSnoozed || isPending || isAnswered')
|
||||
small(v-if='isSnoozed').mpj-muted-text: em.
|
||||
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>
|
|
@ -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: ''
|
||||
|
|
|
@ -1,12 +1,16 @@
|
|||
<template lang="pug">
|
||||
article.mpj-main-content(role='main')
|
||||
page-title(title='Snoozed Requests')
|
||||
div(v-if='loaded').mpj-request-list
|
||||
p.mpj-text-center(v-if='requests.length === 0'): em.
|
||||
No snoozed requests found; return to #[router-link(:to='{ name: "Journal" } ') your journal]
|
||||
request-list-item(v-for='req in requests'
|
||||
:key='req.requestId'
|
||||
:request='req')
|
||||
page-title(title='Snoozed Requests'
|
||||
hide-on-page=true)
|
||||
template(v-if='loaded')
|
||||
md-empty-state(v-if='requests.length === 0'
|
||||
md-icon='sentiment_dissatisfied'
|
||||
md-label='No Snoozed Requests'
|
||||
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 {
|
||||
|
|
Loading…
Reference in New Issue
Block a user