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>
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;
}
} /*
h1, h2, h3, h4, h5 {
font-weight: 500;
margin-top: 0;
@ -126,10 +126,10 @@ h4 {
}
h5 {
font-size: 1.25rem;
}
} */
p {
margin-bottom: 0;
}
} /*
input, textarea, select {
border-radius: .25rem;
font-size: 1rem;
@ -225,7 +225,7 @@ 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;
}
@ -248,7 +248,7 @@ a:hover {
}
.mpj-full-width {
width: 100%;
}
} /*
.mpj-modal {
position: fixed;
z-index: 8;
@ -293,7 +293,7 @@ a:hover {
}
.material-icons {
vertical-align: middle;
}
} */
.md-progress-bar {
margin: 24px;
}

View File

@ -4,8 +4,8 @@ article.mpj-main-content-wide(role='main')
p(v-if='isLoadingJournal') Loading your prayer journal...
template(v-else)
.mpj-text-center
router-link(:to="{ name: 'EditRequest', params: { id: 'new' } }"
role='button').
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')

View File

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

View File

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

View File

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

View File

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