Convert journal cards

This commit is contained in:
Daniel J. Summers 2019-08-20 22:35:01 -05:00
parent 34c2148743
commit 3e272a5aac
6 changed files with 43 additions and 33 deletions

View File

@ -104,10 +104,10 @@ export default {
<style> <style>
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-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;
@ -126,10 +126,10 @@ h4 {
} }
h5 { h5 {
font-size: 1.25rem; font-size: 1.25rem;
} } */
p { p {
margin-bottom: 0; margin-bottom: 0;
} } /*
input, textarea, select { input, textarea, select {
border-radius: .25rem; border-radius: .25rem;
font-size: 1rem; font-size: 1rem;
@ -225,7 +225,7 @@ a:hover {
background-image: -webkit-linear-gradient(top, #050, whitesmoke); background-image: -webkit-linear-gradient(top, #050, whitesmoke);
background-image: -moz-linear-gradient(top, #050, whitesmoke); background-image: -moz-linear-gradient(top, #050, whitesmoke);
background-image: linear-gradient(to bottom, #050, whitesmoke); background-image: linear-gradient(to bottom, #050, whitesmoke);
} } */
.mpj-text-center { .mpj-text-center {
text-align: center; text-align: center;
} }
@ -248,7 +248,7 @@ a:hover {
} }
.mpj-full-width { .mpj-full-width {
width: 100%; width: 100%;
} } /*
.mpj-modal { .mpj-modal {
position: fixed; position: fixed;
z-index: 8; z-index: 8;
@ -293,7 +293,7 @@ a:hover {
} }
.material-icons { .material-icons {
vertical-align: middle; vertical-align: middle;
} } */
.md-progress-bar { .md-progress-bar {
margin: 24px; margin: 24px;
} }

View File

@ -4,7 +4,7 @@ article.mpj-main-content-wide(role='main')
p(v-if='isLoadingJournal') Loading your prayer journal... p(v-if='isLoadingJournal') Loading your prayer journal...
template(v-else) template(v-else)
.mpj-text-center .mpj-text-center
router-link(:to="{ name: 'EditRequest', params: { id: 'new' } }" md-button(:to="{ name: 'EditRequest', params: { id: 'new' } }"
role='button'). role='button').
#[md-icon add_box] Add a New Request #[md-icon add_box] Add a New Request
br br

View File

@ -1,6 +1,6 @@
<template lang="pug"> <template lang="pug">
.md-toolbar-row .md-toolbar-row
md-tabs.md-primary md-tabs.md-primary(md-sync-route)
md-tab#mpj-home(md-label='Home' md-tab#mpj-home(md-label='Home'
:to="{ name: 'Home' }") :to="{ name: 'Home' }")
md-tab#mpj-journal(v-if='isAuthenticated' md-tab#mpj-journal(v-if='isAuthenticated'

View File

@ -1,5 +1,5 @@
<template lang="pug"> <template lang="pug">
h2.mpj-page-title(v-if='!hideOnPage' h1.md-title(v-if='!hideOnPage'
v-html='title') v-html='title')
</template> </template>
@ -26,10 +26,3 @@ export default {
} }
} }
</script> </script>
<style scoped>
.mpj-page-title {
border-bottom: solid 1px lightgray;
margin-bottom: 20px;
}
</style>

View File

@ -1,5 +1,5 @@
<template lang="pug"> <template lang="pug">
.mpj-modal(v-show='notesVisible') md-dialog(:md-active.sync='notesVisible')
.mpj-modal-content.mpj-narrow .mpj-modal-content.mpj-narrow
header.mpj-bg header.mpj-bg
h5 Add Notes to Prayer Request h5 Add Notes to Prayer Request

View File

@ -1,11 +1,25 @@
<template lang="pug"> <template lang="pug">
.mpj-request-card(v-if='shouldDisplay') md-card.mpj-request-card(v-if='shouldDisplay'
header.mpj-card-header(role='toolbar'). md-with-hover)
#[button(@click='markPrayed()' title='Pray').primary: md-icon done] md-card-actions(md-alignment='space-between')
#[button(@click.stop='showEdit()' title='Edit'): md-icon edit] md-button.md-icon-button.md-raised.md-primary(@click='markPrayed()')
#[button(@click.stop='showNotes()' title='Add Notes'): md-icon comment] md-icon done
#[button(@click.stop='snooze()' title='Snooze Request'): md-icon schedule] md-tooltip(md-direction='top'
div md-delay=1000) Mark as Prayed
span
md-button.md-icon-button.md-raised(@click.stop='showEdit()')
md-icon edit
md-tooltip(md-direction='top'
md-delay=1000) Edit Request
md-button.md-icon-button.md-raised(@click.stop='showNotes()')
md-icon comment
md-tooltip(md-direction='top'
md-delay=1000) Add Notes
md-button.md-icon-button.md-raised(@click.stop='snooze()')
md-icon schedule
md-tooltip(md-direction='top'
md-delay=1000) Snooze Request
md-card-content
p.card-text.mpj-request-text p.card-text.mpj-request-text
| {{ request.text }} | {{ request.text }}
p.as-of.mpj-text-right: small.mpj-muted-text: em p.as-of.mpj-text-right: small.mpj-muted-text: em
@ -22,8 +36,9 @@ import actions from '@/store/action-types'
export default { export default {
name: 'request-card', name: 'request-card',
inject: [ inject: [
'journalEvents',
'messages', 'messages',
'journalEvents' 'progress'
], ],
props: { props: {
request: { required: true } request: { required: true }
@ -37,7 +52,7 @@ export default {
methods: { methods: {
async markPrayed () { async markPrayed () {
await this.$store.dispatch(actions.UPDATE_REQUEST, { await this.$store.dispatch(actions.UPDATE_REQUEST, {
progress: this.$Progress, progress: this.progress,
requestId: this.request.requestId, requestId: this.request.requestId,
status: 'Prayed', status: 'Prayed',
updateText: '' updateText: ''
@ -59,16 +74,18 @@ export default {
<style> <style>
.mpj-request-card { .mpj-request-card {
border: solid 1px darkgray; /* border: solid 1px darkgray;
border-radius: 5px; border-radius: 5px; */
width: 20rem; width: 20rem;
margin: .5rem; margin-bottom: 1rem;
/* margin: .5rem; */
} }
@media screen and (max-width: 20rem) { @media screen and (max-width: 20rem) {
.mpj-request-card { .mpj-request-card {
width: 100%; width: 100%;
} }
} }
/*
.mpj-card-header { .mpj-card-header {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
@ -91,5 +108,5 @@ export default {
} }
.mpj-request-card .as-of { .mpj-request-card .as-of {
margin-right: .25rem; margin-right: .25rem;
} } */
</style> </style>