bit-badger/myPrayerJournal
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases 36 Activity

v2'd all request lists; converted CSS to SASS

Browse Source
This commit is contained in:
Daniel J. Summers 2019-08-24 20:04:10 -05:00
parent b05e43a653
commit 26a0da610d
8 changed files with 316 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

366
src/app/src/App.vue
View File

@ -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>

27
src/app/src/components/Journal.vue
View File

@ -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 &ldquo;Add a New Request&rdquo; 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>

24
src/app/src/components/request/ActiveRequests.vue
View File

@ -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 {

21
src/app/src/components/request/AnsweredRequests.vue
View File

@ -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 &ldquo;Answered&rdquo;, 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
View 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>

69
src/app/src/components/request/RequestListItem.vue
View File

@ -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
| &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')]
small(v-if='isPending').mpj-muted-text: em.
&nbsp; 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')]
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>

2
src/app/src/components/request/SnoozeRequest.vue
View File

@ -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: ''

22
src/app/src/components/request/SnoozedRequests.vue
View File

@ -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 {