Improvements to Challenge Layout (#9619)

website/client/components/challenges/challengeDetail.vue

@@ -9,8 +9,12 @@
       .col-12.col-md-6
         h1(v-markdown='challenge.name')
         div
-          strong.float-left(v-once) {{ $t('createdBy') }}:
+          span.mr-1.ml-0
-          user-link.mx-1.float-left(:user="challenge.leader")
+            strong(v-once) {{ $t('createdBy') }}:
+            user-link.mx-1(:user="challenge.leader")
+          span.mr-1.ml-0(v-if="challenge.group")
+            strong(v-once) {{ $t(challenge.group.type) }}:
+            group-link.mx-1(:group="challenge.group")
           // @TODO: make challenge.author a variable inside the createdBy string (helps with RTL languages)
           // @TODO: Implement in V2 strong.margin-left(v-once)
             .svg-icon.calendar-icon(v-html="icons.calendarIcon")
@@ -152,7 +156,8 @@
   }
 
   .challenge-actions {
-    margin-bottom: 1em;
+    margin-top: 1em;
+    margin-bottom: 2em;
 
     .view-progress {
       margin-right: .5em;
@@ -181,6 +186,7 @@ import challengeMemberSearchMixin from 'client/mixins/challengeMemberSearch';
 import leaveChallengeModal from './leaveChallengeModal';
 import sidebarSection from '../sidebarSection';
 import userLink from '../userLink';
+import groupLink from '../groupLink';
 import taskDefaults from 'common/script/libs/taskDefaults';
 
 import gemIcon from 'assets/svg/gem.svg';
@@ -203,6 +209,7 @@ export default {
     TaskColumn: Column,
     TaskModal,
     userLink,
+    groupLink,
   },
   data () {
     return {

website/client/components/challenges/challengeItem.vue

@@ -1,130 +1,152 @@
 <template lang="pug">
-.card
+.challenge
-  .row
+  .challenge-prize
-    router-link.col-12(:to="{ name: 'challenge', params: { challengeId: challenge._id } }")
+    .number
-      h3(v-markdown='challenge.name')
+      span.svg-icon(v-html="icons.gemIcon")
-  .row
+      span.value {{challenge.prize}}
-    .col-6
+    .label {{ $t('challengePrize') }}
-      div.details
+  .challenge-header
-        span
+    router-link(
-          .svg-icon.member-icon(v-html="icons.memberIcon")
+      :to="{ name: 'challenge', params: { challengeId: challenge._id } }"
-        span {{challenge.memberCount}}
+    )
-        // @TODO: Add in V2
+      h3.challenge-title(v-markdown='challenge.name')
-          span
+    .owner(v-if="fullLayout")
-            .svg-icon.calendar-icon(v-html="icons.calendarIcon")
+      .owner-item
-          span
+        strong {{ $t('createdBy') }}:
-            strong End Date:
+        user-link.mx-1(:user="challenge.leader")
+      .owner-item(v-if="challenge.group")
+        strong {{ $t(challenge.group.type) }}:
+        group-link.mx-1(:group="challenge.group")
+    .meta
+      .meta-item
+        .svg-icon.user-icon(v-html="icons.memberIcon")
+        span.mx-1 {{challenge.memberCount}}
+      // @TODO: add end date
+        .meta-item
+          .svg-icon(v-html="icons.calendarIcon")
+          strong.mx-1 {{ $t('endDate')}}:
           span {{challenge.endDate}}
-      div.tags
+  .tags
-        span.tag(v-for='tag in challenge.tags') {{tag}}
+    span.tag.tag-blue(v-if='isLeader(challenge)') {{ $t('owned') }}
-    .col-6.prize-section
+    span.tag(v-for='category in challenge.categories', :class="{'tag-purple':isOfficial(category)}") {{ $t(category.name) }}
-      div
+  .challenge-description {{challenge.summary}}
-        span.svg-icon.gem(v-html="icons.gemIcon")
+  .well-wrapper(v-if="fullLayout")
-        span.prize {{challenge.prize}}
+    .well
-      div Challenge Prize
+      div(:class="{'muted': challenge.tasksOrder.habits.length === 0}")
-  .row.description
+        .number
-    .col-12
-      | {{challenge.summary}}
-  .well.row
-    .col-3
-      .count-details
           .svg-icon.habit-icon(v-html="icons.habitIcon")
-        span.count {{challenge.tasksOrder.habits.length}}
+          span.value {{challenge.tasksOrder.habits.length}}
-      div {{$t('habit')}}
+        .label {{$t('habit')}}
-    .col-3
+      div(:class="{'muted': challenge.tasksOrder.dailys.length === 0}")
-      .count-details
+        .number
           .svg-icon.daily-icon(v-html="icons.dailyIcon")
-        span.count {{challenge.tasksOrder.dailys.length}}
+          span.value {{challenge.tasksOrder.dailys.length}}
-      div {{$t('daily')}}
+        .label {{$t('daily')}}
-    .col-3
+      div(:class="{'muted': challenge.tasksOrder.todos.length === 0}")
-      .count-details
+        .number
           .svg-icon.todo-icon(v-html="icons.todoIcon")
-        span.count {{challenge.tasksOrder.todos.length}}
+          span.value {{challenge.tasksOrder.todos.length}}
         div {{$t('todo')}}
-    .col-3
+      div(:class="{'muted': challenge.tasksOrder.rewards.length === 0}")
-      .count-details
+        .number
           .svg-icon.reward-icon(v-html="icons.rewardIcon")
-        span.count {{challenge.tasksOrder.rewards.length}}
+          span.value {{challenge.tasksOrder.rewards.length}}
-      div {{$t('reward')}}
+        .label {{$t('reward')}}
+
 </template>
 
+<style lang="scss">
+  // Have to use this, because v-markdown creates p element in h3. Scoping doesn't work with it.
+  .challenge-title > p {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    max-height: 3em;
+    line-height: 1.5em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+  }
+</style>
+
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
 
-  .card {
+  .challenge {
     background-color: $white;
-    box-shadow: 0 2px 2px 0 $gray-600, 0 1px 4px 0 $gray-600;
+    box-shadow: 0 2px 2px 0 $gray-400, 0 1px 4px 0 $gray-500;
-    padding: 2em;
-    height: 350px;
     margin-bottom: 1em;
+    border-radius: .3em;
+    padding-bottom: .5em;
 
-    .gem {
+    .number {
-      width: 32px;
+      display: flex;
-    }
+      align-items: center;
-
+      justify-content: center;
-    .member-icon {
-      width: 20px;
-    }
-
-    .calendar-icon {
-      width: 14px;
-    }
-
-    span {
-      display: inline-block;
-      font-size: 14px;
-      color: $gray-200;
-      margin-right: 1em;
-      vertical-align: bottom;
-    }
-
-    .details {
-      margin: 1em 0;
-    }
-
-    .tags {
-      margin-bottom: 1em;
-    }
-
-    .tag {
-      border-radius: 30px;
-      background-color: $gray-600;
-      padding: .5em;
-    }
-
-    .prize {
-      color: $gray-100;
-      font-size: 24px;
-    }
-
-    .prize-section {
-      text-align: right;
-      padding-right: 2em;
-    }
-
-    .description {
-      color: $gray-200;
-      margin-top: 1em;
-      margin-bottom: 1em;
-      overflow: hidden;
-      height: 80px;
-    }
-
-    .well-wrapper {
-      padding: .8em;
-    }
-
-    .well {
-      background-color: $gray-700;
-      text-align: center;
-      padding: 2em;
-      border-radius: 4px;
-      margin-left: .2em;
-      margin-right: .2em;
 
       .svg-icon {
-        display: inline-block;
+        margin-top: -.2em;
+      }
+
+      .value {
         margin-left: .5em;
+        font-size: 24px;
+      }
+    }
+
+    .label {
+      font-size: .9em;
+    }
+
+    .challenge-prize {
+      text-align: center;
+      color: $gems-color;
+      display: inline-block;
+      float: right;
+      padding: 1em 1.5em;
+      margin-left: 1.5em;
+      background: #eefaf6;
+      border-bottom-left-radius: .3em;
+
+      .svg-icon {
+        width: 32px;
+      }
+    }
+
+    .challenge-header,
+    .well-wrapper {
+      padding: 1em 1.5em;
+    }
+
+    .challenge-header {
+      padding-bottom: .5em;
+    }
+
+    .owner {
+      margin: 1em 0 .5em;
+    }
+
+    .meta, .owner {
+      display: flex;
+      align-items: center;
+      overflow: visible;
+    }
+
+    .meta-item, .owner-item {
+      display: inline-flex;
+      color: $gray-200;
+      align-items: center;
+      margin-right: 1em;
+      white-space: nowrap;
+
+      .svg-icon {
+        color: $gray-300;
+        width: 14px;
+      }
+    }
+
+    .user-icon {
+      width: 20px !important;
     }
 
     .habit-icon {
@@ -143,30 +165,97 @@
       width: 26px;
     }
 
-      .count-details span {
+    .tags {
-        margin-right: .5em;
+      display: flex;
+      padding: 0 1em 1em;
     }
 
-      .count {
+    .tag {
-        font-size: 20px;
+      box-shadow: none !important;
-        margin-left: .5em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      border-radius: 1em;
+      color: $gray-200;
+      background: $gray-500;
+      padding: .2em .8em;
+      margin-left: .3em;
+      font-weight: 600;
+      font-size: .9em
+    }
+
+    .tag-purple {
+      color: white;
+      background: $purple-300;
+    }
+
+    .tag-blue {
+      color: white;
+      background: $blue-50;
+    }
+
+    .challenge-description {
+      color: $gray-200;
+      margin: 0 1.5em;
+      word-break: break-all;
+    }
+
+    .well {
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
+      background-color: $gray-700;
+      text-align: center;
+      padding: 1em;
+      border-radius: .25em;
+
+      > div {
+        color: $gray-200;
+
+        .svg-icon {
+          color: $gray-300;
         }
       }
+
+      > div.muted {
+        color: $gray-400;
+
+        .svg-icon {
+          color: $gray-500;
+        }
+      }
+    }
+
   }
 </style>
 
 <script>
-import gemIcon from 'assets/svg/gem.svg';
+  import {mapState} from 'client/libs/store';
-import memberIcon from 'assets/svg/member-icon.svg';
+  import userLink from '../userLink';
-import calendarIcon from 'assets/svg/calendar.svg';
+  import groupLink from '../groupLink';
-import habitIcon from 'assets/svg/habit.svg';
+  import markdownDirective from 'client/directives/markdown';
-import todoIcon from 'assets/svg/todo.svg';
-import dailyIcon from 'assets/svg/daily.svg';
-import rewardIcon from 'assets/svg/reward.svg';
-import markdownDirective from 'client/directives/markdown';
 
-export default {
+  import gemIcon from 'assets/svg/gem.svg';
-  props: ['challenge'],
+  import memberIcon from 'assets/svg/member-icon.svg';
+  import calendarIcon from 'assets/svg/calendar.svg';
+  import habitIcon from 'assets/svg/habit.svg';
+  import todoIcon from 'assets/svg/todo.svg';
+  import dailyIcon from 'assets/svg/daily.svg';
+  import rewardIcon from 'assets/svg/reward.svg';
+
+  export default {
+    props: {
+      challenge: {
+        required: true,
+      },
+      fullLayout: {
+        default: true,
+      },
+    },
+    components: {
+      userLink,
+      groupLink,
+    },
     data () {
       return {
         icons: Object.freeze({
@@ -180,8 +269,20 @@ export default {
         }),
       };
     },
+    computed: {
+      ...mapState({user: 'user.data'}),
+    },
     directives: {
       markdown: markdownDirective,
     },
-};
+    methods: {
+      isLeader (challenge) {
+        if (!challenge.leader) return false;
+        return this.user._id === challenge.leader._id;
+      },
+      isOfficial (category) {
+        return category.name === 'habitica_official';
+      },
+    },
+  };
 </script>

website/client/components/challenges/groupChallenges.vue

@@ -8,21 +8,7 @@ div
       p(v-once) {{ $t('challengeDetails') }}
       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')
+    challenge-item(v-for='challenge in challenges',:challenge='challenge',:key='challenge._id',:fullLayout='false')
-      .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>
@@ -51,73 +37,19 @@ div
   }
 </style>
 
-<style scoped>
-  .title {
-    color: #4E4A57;
-  }
-
-  .member-icon {
-    display: inline-block;
-    width: 20px !important;
-    vertical-align: bottom;
-    height: 16px !important;
-  }
-
-  .member-count {
-    width: 21px;
-    height: 16px;
-    font-size: 14px;
-    line-height: 2;
-    color: #878190;
-    display: inline-block;
-    text-align: center;
-  }
-
-  .challenge-icon {
-    height: 30px;
-    width: 30px;
-    margin-bottom: 2em;
-    margin: 0 auto;
-  }
-
-  .gem {
-    width: 26px;
-    vertical-align: bottom;
-    display: inline-block;
-  }
-
-  .prize {
-    color: #686274;
-    font-size: 18px;
-    margin-left: .5em;
-  }
-
-  .prize-title {
-    padding-left: .7em;
-  }
-
-  .challenge-item {
-    border-radius: 2px;
-    background-color: #ffffff;
-    box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-    margin-bottom: 1em;
-    padding: 2em;
-  }
-</style>
-
 <script>
   import challengeModal from './challengeModal';
   import {mapState} from 'client/libs/store';
   import markdownDirective from 'client/directives/markdown';
 
+  import challengeItem from './challengeItem';
   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,
+      challengeItem,
     },
     computed: {
       ...mapState({user: 'user.data'}),
@@ -127,8 +59,6 @@ div
         challenges: [],
         icons: Object.freeze({
           challengeIcon,
-          memberIcon,
-          gemIcon,
         }),
         groupIdForChallenges: '',
       };

website/client/components/groupLink.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+  b-link(
+    v-if='group',
+    @click.prevent='goToGroup'
+    ) {{group.name}}
+
+</template>
+
+<script>
+  export default {
+    props: ['group'],
+    methods: {
+      goToGroup () {
+        if (this.group.type === 'party') {
+          this.$router.push({name: 'party'});
+        } else {
+          this.$router.push({name: 'guild', params: {groupId: this.group._id}});
+        }
+      },
+    },
+  };
+</script>

website/client/components/groups/group.vue

@@ -9,8 +9,10 @@
     .row
       .col-12.col-md-6.title-details
         h1 {{group.name}}
-        strong.float-left(v-once) {{$t('groupLeader')}}:
+        div
-        user-link.mx-1.float-left(:user="group.leader")
+          span.mr-1.ml-0
+            strong(v-once) {{$t('groupLeader')}}:
+            user-link.mx-1(:user="group.leader")
       .col-12.col-md-6
         .row.icon-row
           .col-4.offset-4(v-bind:class="{ 'offset-8': isParty }")

website/common/locales/en/challenge.json

@@ -13,7 +13,8 @@
   "challengeWinner": "Was the winner in the following challenges",
   "challenges": "Challenges",
   "challengesLink": "<a href='http://habitica.wikia.com/wiki/Challenges' target='_blank'>Challenges</a>",
-
+  "challengePrize": "Challenge Prize",
+  "endDate": "Ends",
   "noChallenges": "No challenges yet, visit",
   "toCreate": "to create one.",