Kai/habitica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved challenge layout.

Browse Source
This commit is contained in:
Marvin Rabe
2018-05-01 16:10:22 +02:00
parent 5faf00d489
commit 4e4181a394
5 changed files with 294 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/client/components/challenges/challengeDetail.vue
+33 -41
View File
@@ -6,7 +6,7 @@
challenge-member-progress-modal(:memberId='progressMemberId', :challengeId='challenge._id')
.col-12.col-md-8.standard-page
.row
.col-12.col-md-8
.col-12.col-md-6
h1(v-markdown='challenge.name')
div
strong(v-once) {{$t('createdBy')}}:
@@ -19,7 +19,7 @@
// span {{challenge.endDate}}
.tags
span.tag(v-for='tag in challenge.tags') {{tag}}
.col-12.col-md-4
.col-12.col-md-6.text-right
.box(@click="showMemberModal()")
.svg-icon.member-icon(v-html="icons.memberIcon")
| {{challenge.memberCount}}
@@ -29,10 +29,10 @@
| {{challenge.prize}}
.details(v-once) {{$t('prize')}}
.row.challenge-actions
.col-12.col-md-7.offset-md-5
span.view-progress
strong {{ $t('viewProgressOf') }}
.col-12.col-md-6
strong.view-progress {{ $t('viewProgressOf') }}
member-search-dropdown(:text="$t('selectParticipant')", :members='members', :challengeId='challengeId', @member-selected='openMemberProgressModal')
.col-12.col-md-6.text-right
span(v-if='isLeader || isAdmin')
b-dropdown.create-dropdown(:text="$t('addTaskToChallenge')", :variant="'success'")
b-dropdown-item(v-for="type in columns", :key="type", @click="createTask(type)")
@@ -56,24 +56,25 @@
v-on:editTask="editTask",
v-if='tasksByType[column].length > 0')
.col-12.col-md-4.sidebar.standard-page
.acitons
div(v-if='canJoin')
button.btn.btn-success(v-once, @click='joinChallenge()') {{$t('joinChallenge')}}
div(v-if='isMember')
button.btn.btn-danger(v-once, @click='leaveChallenge()') {{$t('leaveChallenge')}}
div(v-if='isLeader || isAdmin')
button.btn.btn-secondary(v-once, @click='edit()') {{$t('editChallenge')}}
div(v-if='isLeader || isAdmin')
button.btn.btn-danger(v-once, @click='closeChallenge()') {{$t('endChallenge')}}
div(v-if='isLeader || isAdmin')
button.btn.btn-secondary(v-once, @click='exportChallengeCsv()') {{$t('exportChallengeCsv')}}
div(v-if='isLeader || isAdmin')
button.btn.btn-secondary(v-once, @click='cloneChallenge()') {{$t('clone')}}
.description-section
h2 {{$t('challengeSummary')}}
.button-container(v-if='canJoin')
button.btn.btn-success(v-once, @click='joinChallenge()') {{$t('joinChallenge')}}
.button-container(v-if='isLeader || isAdmin')
button.btn.btn-primary(v-once, @click='edit()') {{$t('editChallenge')}}
.button-container(v-if='isLeader || isAdmin')
button.btn.btn-primary(v-once, @click='cloneChallenge()') {{$t('clone')}}
.button-container(v-if='isLeader || isAdmin')
button.btn.btn-primary(v-once, @click='exportChallengeCsv()') {{$t('exportChallengeCsv')}}
.button-container(v-if='isLeader || isAdmin')
button.btn.btn-danger(v-once, @click='closeChallenge()') {{$t('endChallenge')}}
sidebar-section(:title="$t('challengeSummary')")
p(v-markdown='challenge.summary')
h2 {{$t('challengeDescription')}}
sidebar-section(
:title="$t('challengeDescription')"
:last="true"
)
p(v-markdown='challenge.description')
.text-center(v-if='isMember')
button.btn.btn-danger(v-once, @click='leaveChallenge()') {{$t('leaveChallenge')}}
</template>
<style lang='scss' scoped>
@@ -91,6 +92,14 @@
margin-left: .5em;
}
.button-container {
margin-bottom: 1em;
button {
width: 100%;
}
}
.calendar-icon {
width: 12px;
display: inline-block;
@@ -138,23 +147,12 @@
}
}
.acitons {
width: 100%;
div, button {
width: 60%;
margin: 0 auto;
margin-bottom: .5em;
text-align: center;
}
}
.description-section {
margin-top: 2em;
}
.challenge-actions {
margin-top: 1em;
margin-bottom: 1em;
.view-progress {
margin-right: .5em;
@@ -162,14 +160,6 @@
}
</style>
<style>
.create-dropdown button {
width: 100%;
font-size: 16px !important;
font-weight: bold !important;
}
</style>
<script>
const TASK_KEYS_TO_REMOVE = ['_id', 'completed', 'date', 'dateCompleted', 'history', 'id', 'streak', 'createdAt', 'challenge'];
@@ -189,6 +179,7 @@ import challengeModal from './challengeModal';
import challengeMemberProgressModal from './challengeMemberProgressModal';
import challengeMemberSearchMixin from 'client/mixins/challengeMemberSearch';
import leaveChallengeModal from './leaveChallengeModal';
import sidebarSection from '../sidebarSection';
import taskDefaults from 'common/script/libs/taskDefaults';
@@ -208,6 +199,7 @@ export default {
challengeModal,
challengeMemberProgressModal,
memberSearchDropdown,
sidebarSection,
TaskColumn: Column,
TaskModal,
},
website/client/components/challenges/groupChallenges.vue
+90 -64
View File
@@ -6,25 +6,51 @@ div
.svg-icon.challenge-icon(v-html="icons.challengeIcon")
h4(v-once) {{ $t('haveNoChallenges') }}
p(v-once) {{ $t('challengeDetails') }}
router-link.title(:to="{ name: 'challenge', params: { challengeId: challenge._id } }", v-for='challenge in challenges',:key='challenge._id')
.col-12.challenge-item
.row
.col-9
router-link.title(:to="{ name: 'challenge', params: { challengeId: challenge._id } }")
strong(v-markdown='challenge.name')
p(v-markdown='challenge.summary || challenge.name')
div
.svg-icon.member-icon(v-html="icons.memberIcon")
.member-count {{challenge.memberCount}}
.col-3
div
span.svg-icon.gem(v-html="icons.gemIcon")
span.prize {{challenge.prize}}
div.prize-title Prize
.col-12.text-center
button.btn.btn-secondary(@click='createChallenge()') {{ $t('createChallenge') }}
button.btn.btn-secondary(@click='createChallenge()') {{ $t('createChallenge') }}
template(v-else)
router-link.title(:to="{ name: 'challenge', params: { challengeId: challenge._id } }", v-for='challenge in challenges',:key='challenge._id')
.col-12.challenge-item
.row
.col-9
router-link.title(:to="{ name: 'challenge', params: { challengeId: challenge._id } }")
strong(v-markdown='challenge.name')
p(v-markdown='challenge.summary || challenge.name')
div
.svg-icon.member-icon(v-html="icons.memberIcon")
.member-count {{challenge.memberCount}}
.col-3
div
span.svg-icon.gem(v-html="icons.gemIcon")
span.prize {{challenge.prize}}
div.prize-title Prize
.col-12.text-center
button.btn.btn-secondary(@click='createChallenge()') {{ $t('createChallenge') }}
</template>
<style lang="scss" scoped>
@import '~client/assets/scss/colors.scss';
.no-quest-section {
padding: 2em;
color: $gray-300;
h4 {
color: $gray-300;
}
p {
margin-bottom: 2em;
}
.svg-icon {
height: 30px;
width: 30px;
margin: 0 auto;
margin-bottom: 2em;
}
}
</style>
<style scoped>
.title {
color: #4E4A57;
@@ -80,57 +106,57 @@ div
</style>
<script>
import challengeModal from './challengeModal';
import { mapState } from 'client/libs/store';
import markdownDirective from 'client/directives/markdown';
import challengeModal from './challengeModal';
import {mapState} from 'client/libs/store';
import markdownDirective from 'client/directives/markdown';
import challengeIcon from 'assets/svg/challenge.svg';
import gemIcon from 'assets/svg/gem.svg';
import memberIcon from 'assets/svg/member-icon.svg';
import challengeIcon from 'assets/svg/challenge.svg';
import gemIcon from 'assets/svg/gem.svg';
import memberIcon from 'assets/svg/member-icon.svg';
export default {
props: ['groupId'],
components: {
challengeModal,
},
computed: {
...mapState({user: 'user.data'}),
},
data () {
return {
challenges: [],
icons: Object.freeze({
challengeIcon,
memberIcon,
gemIcon,
}),
groupIdForChallenges: '',
};
},
directives: {
markdown: markdownDirective,
},
mounted () {
this.loadChallenges();
},
watch: {
async groupId () {
export default {
props: ['groupId'],
components: {
challengeModal,
},
computed: {
...mapState({user: 'user.data'}),
},
data() {
return {
challenges: [],
icons: Object.freeze({
challengeIcon,
memberIcon,
gemIcon,
}),
groupIdForChallenges: '',
};
},
directives: {
markdown: markdownDirective,
},
mounted() {
this.loadChallenges();
},
},
methods: {
async loadChallenges () {
this.groupIdForChallenges = this.groupId;
if (this.groupId === 'party' && this.user.party._id) this.groupIdForChallenges = this.user.party._id;
this.challenges = await this.$store.dispatch('challenges:getGroupChallenges', {groupId: this.groupIdForChallenges});
watch: {
async groupId() {
this.loadChallenges();
},
},
createChallenge () {
this.$root.$emit('bv::show::modal', 'challenge-modal');
methods: {
async loadChallenges() {
this.groupIdForChallenges = this.groupId;
if (this.groupId === 'party' && this.user.party._id) this.groupIdForChallenges = this.user.party._id;
this.challenges = await this.$store.dispatch('challenges:getGroupChallenges', {groupId: this.groupIdForChallenges});
},
createChallenge() {
this.$root.$emit('bv::show::modal', 'challenge-modal');
},
challengeCreated(challenge) {
if (challenge.group._id !== this.groupIdForChallenges) return;
this.challenges.push(challenge);
},
},
challengeCreated (challenge) {
if (challenge.group._id !== this.groupIdForChallenges) return;
this.challenges.push(challenge);
},
},
};
};
</script>