Improved challenge layout.

website/client/components/challenges/groupChallenges.vue

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