fix conflicts and remove extra dependency

test/client/unit/specs/components/categories/categoryTags.js

@@ -0,0 +1,65 @@
+import {shallow} from '@vue/test-utils';
+
+import CategoryTags from 'client/components/categories/categoryTags.vue';
+
+describe('Category Tags', () => {
+  let wrapper;
+
+  beforeEach(function () {
+    wrapper = shallow(CategoryTags, {
+      propsData: {
+        categories: [],
+      },
+      slots: {
+        default: '<p>This is a slot.</p>',
+      },
+      mocks: {
+        $t: (string) => string,
+      },
+    });
+  });
+
+  it('displays a category', () => {
+    wrapper.setProps({
+      categories: [
+        {
+          name: 'test',
+        },
+      ],
+    });
+    expect(wrapper.contains('.category-label')).to.eq(true);
+    expect(wrapper.find('.category-label').text()).to.eq('test');
+  });
+
+  it('displays a habitica official in purple', () => {
+    wrapper.setProps({
+      categories: [
+        {
+          name: 'habitica_official',
+        },
+      ],
+    });
+    expect(wrapper.contains('.category-label-purple')).to.eq(true);
+    expect(wrapper.find('.category-label').text()).to.eq('habitica_official');
+  });
+
+  it('displays owner label', () => {
+    wrapper.setProps({
+      owner: true,
+    });
+    expect(wrapper.contains('.category-label-blue')).to.eq(true);
+    expect(wrapper.find('.category-label').text()).to.eq('owned');
+  });
+
+  it('displays member label', () => {
+    wrapper.setProps({
+      member: true,
+    });
+    expect(wrapper.contains('.category-label-green')).to.eq(true);
+    expect(wrapper.find('.category-label').text()).to.eq('joined');
+  });
+
+  it('displays additional content at the end', () => {
+    expect(wrapper.find('p').text()).to.eq('This is a slot.');
+  });
+});

test/client/unit/specs/components/sidebarSection.js

@@ -0,0 +1,54 @@
+import {shallow} from '@vue/test-utils';
+
+import SidebarSection from 'client/components/sidebarSection.vue';
+
+describe('Sidebar Section', () => {
+  let wrapper;
+
+  beforeEach(function () {
+    wrapper = shallow(SidebarSection, {
+      propsData: {
+        title: 'Hello World',
+      },
+      slots: {
+        default: '<p>This is a test.</p>',
+      },
+    });
+  });
+
+  it('displays title', () => {
+    expect(wrapper.find('h3').text()).to.eq('Hello World');
+  });
+
+  it('displays contents', () => {
+    expect(wrapper.find('.section-body').find('p').text()).to.eq('This is a test.');
+  });
+
+  it('displays tooltip icon', () => {
+    expect(wrapper.contains('.section-info')).to.eq(false);
+    wrapper.setProps({tooltip: 'This is a test'});
+    expect(wrapper.contains('.section-info')).to.eq(true);
+  });
+
+  it('hides contents', () => {
+    expect(wrapper.find('.section-body').element.style.display).to.not.eq('none');
+    wrapper.find('.section-toggle').trigger('click');
+    expect(wrapper.find('.section-body').element.style.display).to.eq('none');
+    wrapper.find('.section-toggle').trigger('click');
+    expect(wrapper.find('.section-body').element.style.display).to.not.eq('none');
+  });
+
+  it('can hide contents by default', () => {
+    wrapper = shallow(SidebarSection, {
+      propsData: {
+        title: 'Hello World',
+        show: false,
+      },
+      slots: {
+        default: '<p>This is a test.</p>',
+      },
+    });
+
+    expect(wrapper.find('.section-body').element.style.display).to.eq('none');
+  });
+});

website/client/assets/scss/categories.scss

@@ -15,7 +15,7 @@
   background-color: $gray-600;
   padding: .5em;
   display: inline-block;
-  margin-right: .5em;
+  margin: .25em;
   font-size: 12px;
   font-weight: 500;
   line-height: 1.33;
@@ -23,6 +23,21 @@
   color: $gray-300;
 }
 
+.category-label-purple {
+  color: white;
+  background: $purple-300;
+}
+
+.category-label-blue {
+  color: white;
+  background: $blue-50;
+}
+
+.category-label-green {
+  color: white;
+  background: $green-50;
+}
+
 .category-select {
   border-radius: 2px;
   background-color: $white;

website/client/components/categories/categoryTags.vue

@@ -0,0 +1,34 @@
+<template lang="pug">
+  .categories
+    span.category-label.category-label-blue(v-if='owner')
+      | {{ $t('owned') }}
+    span.category-label.category-label-green(v-if='member')
+      | {{ $t('joined') }}
+    span.category-label(
+      v-for='category in categories',
+      :class="{'category-label-purple':isOfficial(category)}"
+    )
+     | {{ $t(category.name) }}
+    slot
+</template>
+
+<script>
+  export default {
+    props: {
+      categories: {
+        required: true,
+      },
+      owner: {
+        default: false,
+      },
+      member: {
+        default: false,
+      },
+    },
+    methods: {
+      isOfficial (category) {
+        return category.name === 'habitica_official';
+      },
+    },
+  };
+</script>

website/client/components/challenges/challengeDetail.vue

@@ -6,11 +6,15 @@
   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')}}:
+          span.mr-1.ml-0
-          span(v-if='challenge.leader && challenge.leader.profile') {{challenge.leader.profile.name}}
+            strong(v-once) {{ $t('createdBy') }}:
+            user-link.mx-1(:user="challenge.leader")
+          span.mr-1.ml-0(v-if="challenge.group && challenge.group.name !== 'Tavern'")
+            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")
@@ -19,7 +23,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 +33,10 @@
           | {{challenge.prize}}
           .details(v-once) {{$t('prize')}}
     .row.challenge-actions
-      .col-12.col-md-7.offset-md-5
+      .col-12.col-md-6
-        span.view-progress
+        strong.view-progress {{ $t('viewProgressOf') }}
-          strong {{ $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 +60,23 @@
         v-on:editTask="editTask",
         v-if='tasksByType[column].length > 0')
   .col-12.col-md-4.sidebar.standard-page
-    .acitons
+    .button-container(v-if='canJoin')
-      div(v-if='canJoin')
+      button.btn.btn-success(v-once, @click='joinChallenge()') {{$t('joinChallenge')}}
-        button.btn.btn-success(v-once, @click='joinChallenge()') {{$t('joinChallenge')}}
+    .button-container(v-if='isLeader || isAdmin')
-      div(v-if='isMember')
+      button.btn.btn-primary(v-once, @click='edit()') {{$t('editChallenge')}}
-        button.btn.btn-danger(v-once, @click='leaveChallenge()') {{$t('leaveChallenge')}}
+    .button-container(v-if='isLeader || isAdmin')
-      div(v-if='isLeader || isAdmin')
+      button.btn.btn-primary(v-once, @click='cloneChallenge()') {{$t('clone')}}
-        button.btn.btn-secondary(v-once, @click='edit()') {{$t('editChallenge')}}
+    .button-container(v-if='isLeader || isAdmin')
-      div(v-if='isLeader || isAdmin')
+      button.btn.btn-primary(v-once, @click='exportChallengeCsv()') {{$t('exportChallengeCsv')}}
-        button.btn.btn-danger(v-once, @click='closeChallenge()') {{$t('endChallenge')}}
+    .button-container(v-if='isLeader || isAdmin')
-      div(v-if='isLeader || isAdmin')
+      button.btn.btn-danger(v-once, @click='closeChallenge()') {{$t('endChallenge')}}
-        button.btn.btn-secondary(v-once, @click='exportChallengeCsv()') {{$t('exportChallengeCsv')}}
+    div
-      div(v-if='isLeader || isAdmin')
+      sidebar-section(:title="$t('challengeSummary')")
-        button.btn.btn-secondary(v-once, @click='cloneChallenge()') {{$t('clone')}}
+        p(v-markdown='challenge.summary')
-    .description-section
+      sidebar-section(:title="$t('challengeDescription')")
-      h2 {{$t('challengeSummary')}}
+        p(v-markdown='challenge.description')
-      p(v-markdown='challenge.summary')
+    .text-center(v-if='isMember')
-      h2 {{$t('challengeDescription')}}
+      button.btn.btn-danger(v-once, @click='leaveChallenge()') {{$t('leaveChallenge')}}
-      p(v-markdown='challenge.description')
 </template>
 
 <style lang='scss' scoped>
@@ -91,6 +94,14 @@
     margin-left: .5em;
   }
 
+  .button-container {
+    margin-bottom: 1em;
+
+    button {
+      width: 100%;
+    }
+  }
+
   .calendar-icon {
     width: 12px;
     display: inline-block;
@@ -138,23 +149,13 @@
     }
   }
 
-  .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: 2em;
 
     .view-progress {
       margin-right: .5em;
@@ -162,14 +163,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,7 +182,9 @@ import challengeModal from './challengeModal';
 import challengeMemberProgressModal from './challengeMemberProgressModal';
 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';
@@ -208,8 +203,11 @@ export default {
     challengeModal,
     challengeMemberProgressModal,
     memberSearchDropdown,
+    sidebarSection,
     TaskColumn: Column,
     TaskModal,
+    userLink,
+    groupLink,
   },
   data () {
     return {

website/client/components/challenges/challengeItem.vue

@@ -1,187 +1,278 @@
 <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 && !isTavern(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
+  category-tags.challenge-categories(
-        span.tag(v-for='tag in challenge.tags') {{tag}}
+    :categories="challenge.categories",
-    .col-6.prize-section
+    :owner="isOwner",
-      div
+    :member="isMember",
-        span.svg-icon.gem(v-html="icons.gemIcon")
+    v-once
-        span.prize {{challenge.prize}}
+  )
-      div Challenge Prize
+  .challenge-description {{challenge.summary}}
-  .row.description
+  .well-wrapper(v-if="fullLayout")
-    .col-12
+    .well
-      | {{challenge.summary}}
+      div(v-for="task in tasksData", :class="{'muted': task.value === 0}", v-once)
-  .well.row
+        .number
-    .col-3
+          .svg-icon(v-html="task.icon", :class="task.label + '-icon'")
-      .count-details
+          span.value {{ task.value }}
-        .svg-icon.habit-icon(v-html="icons.habitIcon")
+        .label {{$t(task.label)}}
-        span.count {{challenge.tasksOrder.habits.length}}
-      div {{$t('habit')}}
-    .col-3
-      .count-details
-        .svg-icon.daily-icon(v-html="icons.dailyIcon")
-        span.count {{challenge.tasksOrder.dailys.length}}
-      div {{$t('daily')}}
-    .col-3
-      .count-details
-        .svg-icon.todo-icon(v-html="icons.todoIcon")
-        span.count {{challenge.tasksOrder.todos.length}}
-      div {{$t('todo')}}
-    .col-3
-      .count-details
-        .svg-icon.reward-icon(v-html="icons.rewardIcon")
-        span.count {{challenge.tasksOrder.rewards.length}}
-      div {{$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 rgba($black, 0.15), 0 1px 4px 0 rgba($black, 0.1);
-    padding: 2em;
-    height: 350px;
     margin-bottom: 1em;
+    border-radius: 4px;
+    padding-bottom: .5em;
 
-    .gem {
+    .number {
-      width: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .svg-icon {
+        margin-top: -.2em;
+      }
+
+      .value {
+        margin-left: .5em;
+        font-size: 24px;
+      }
     }
 
-    .member-icon {
+    .label {
+      font-size: .9em;
+    }
+
+    .challenge-prize {
+      text-align: center;
+      color: $gems-color;
+      display: inline-block;
+      float: right;
+      padding: 1em 1.5em;
+      margin-left: 1em;
+      background: #eefaf6;
+      border-bottom-left-radius: 4px;
+
+      .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;
+      flex-wrap: wrap;
+    }
+
+    .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;
+      }
+    }
+
+    .challenge-categories {
+      clear: right;
+      display: flex;
+      padding: 0 1.5em 1em;
+      flex-wrap: wrap;
+    }
+
+    .user-icon {
+      width: 20px !important;
+    }
+
+    .habit-icon {
+      width: 30px;
+    }
+
+    .todo-icon {
       width: 20px;
     }
 
-    .calendar-icon {
+    .daily-icon {
-      width: 14px;
+      width: 24px;
     }
 
-    span {
+    .reward-icon {
-      display: inline-block;
+      width: 26px;
-      font-size: 14px;
+    }
+
+    .challenge-description {
       color: $gray-200;
-      margin-right: 1em;
+      margin: 0 1.5em;
-      vertical-align: bottom;
+      word-break: break-all;
-    }
-
-    .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 {
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
       background-color: $gray-700;
       text-align: center;
-      padding: 2em;
+      padding: 1em;
-      border-radius: 4px;
+      border-radius: .25em;
-      margin-left: .2em;
-      margin-right: .2em;
 
-      .svg-icon {
+      > div {
-        display: inline-block;
+        color: $gray-200;
-        margin-left: .5em;
+
+        .svg-icon {
+          color: $gray-300;
+        }
       }
 
-      .habit-icon {
+      > div.muted {
-        width: 30px;
+        color: $gray-400;
-      }
 
-      .todo-icon {
+        .svg-icon {
-        width: 20px;
+          color: $gray-500;
-      }
+        }
-
-      .daily-icon {
-        width: 24px;
-      }
-
-      .reward-icon {
-        width: 26px;
-      }
-
-      .count-details span {
-        margin-right: .5em;
-      }
-
-      .count {
-        font-size: 20px;
-        margin-left: .5em;
       }
     }
+
   }
 </style>
 
 <script>
-import gemIcon from 'assets/svg/gem.svg';
+  import { TAVERN_ID } from '../../../common/script/constants';
-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 categoryTags from '../categories/categoryTags';
-import todoIcon from 'assets/svg/todo.svg';
+  import markdownDirective from 'client/directives/markdown';
-import dailyIcon from 'assets/svg/daily.svg';
+  import {mapState} from 'client/libs/store';
-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';
-  data () {
+  import calendarIcon from 'assets/svg/calendar.svg';
-    return {
+  import habitIcon from 'assets/svg/habit.svg';
-      icons: Object.freeze({
+  import todoIcon from 'assets/svg/todo.svg';
-        gemIcon,
+  import dailyIcon from 'assets/svg/daily.svg';
-        memberIcon,
+  import rewardIcon from 'assets/svg/reward.svg';
-        calendarIcon,
+
-        habitIcon,
+  export default {
-        todoIcon,
+    props: {
-        dailyIcon,
+      challenge: {
-        rewardIcon,
+        required: true,
-      }),
+      },
-    };
+      fullLayout: {
-  },
+        default: true,
-  directives: {
+      },
-    markdown: markdownDirective,
+    },
-  },
+    components: {
-};
+      userLink,
+      groupLink,
+      categoryTags,
+    },
+    directives: {
+      markdown: markdownDirective,
+    },
+    data () {
+      return {
+        icons: Object.freeze({
+          gemIcon,
+          memberIcon,
+          calendarIcon,
+        }),
+      };
+    },
+    computed: {
+      ...mapState({user: 'user.data'}),
+      isOwner () {
+        return this.challenge.leader && this.challenge.leader._id === this.user._id;
+      },
+      isMember () {
+        return this.user.challenges.indexOf(this.challenge._id) !== -1;
+      },
+      tasksData () {
+        return [
+          {
+            icon: habitIcon,
+            label: 'habit',
+            value: this.challenge.tasksOrder.habits.length,
+          },
+          {
+            icon: dailyIcon,
+            label: 'daily',
+            value: this.challenge.tasksOrder.dailys.length,
+          },
+          {
+            icon: todoIcon,
+            label: 'todo',
+            value: this.challenge.tasksOrder.todos.length,
+          },
+          {
+            icon: rewardIcon,
+            label: 'reward',
+            value: this.challenge.tasksOrder.rewards.length,
+          },
+        ];
+      },
+    },
+    methods: {
+      isTavern (group) {
+        return group._id === TAVERN_ID;
+      },
+    },
+  };
 </script>

website/client/components/challenges/findChallenges.vue

@@ -15,7 +15,7 @@
           .svg-icon.positive-icon(v-html="icons.positiveIcon")
           span(v-once) {{$t('createChallenge')}}
     .row
-      .col-12.col-md-6(v-for='challenge in filteredChallenges', v-if='!memberOf(challenge)')
+      .col-12.col-md-6(v-for='challenge in filteredChallenges')
         challenge-item(:challenge='challenge')
     .row
       .col-12.text-center
@@ -105,9 +105,6 @@ export default {
     },
   },
   methods: {
-    memberOf (challenge) {
-      return this.user.challenges.indexOf(challenge._id) !== -1;
-    },
     updateSearch (eventData) {
       this.search = eventData.searchTerm;
       this.page = 0;

website/client/components/challenges/groupChallenges.vue

@@ -6,131 +6,87 @@ 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')
+      button.btn.btn-secondary(@click='createChallenge()') {{ $t('createChallenge') }}
-    .col-12.challenge-item
+  template(v-else)
-      .row
+    challenge-item(v-for='challenge in challenges',:challenge='challenge',:key='challenge._id',:fullLayout='false')
-        .col-9
+    .col-12.text-center
-          router-link.title(:to="{ name: 'challenge', params: { challengeId: challenge._id } }")
+      button.btn.btn-secondary(@click='createChallenge()') {{ $t('createChallenge') }}
-            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 scoped>
+<style lang="scss" scoped>
-  .title {
+  @import '~client/assets/scss/colors.scss';
-    color: #4E4A57;
-  }
 
-  .member-icon {
+  .no-quest-section {
-    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;
+    color: $gray-300;
+
+    h4 {
+      color: $gray-300;
+    }
+
+    p {
+      margin-bottom: 2em;
+    }
+
+    .svg-icon {
+      height: 30px;
+      width: 30px;
+      margin: 0 auto;
+      margin-bottom: 2em;
+    }
   }
 </style>
 
 <script>
-import challengeModal from './challengeModal';
+  import challengeModal from './challengeModal';
-import { mapState } from 'client/libs/store';
+  import {mapState} from 'client/libs/store';
-import markdownDirective from 'client/directives/markdown';
+  import markdownDirective from 'client/directives/markdown';
 
-import challengeIcon from 'assets/svg/challenge.svg';
+  import challengeItem from './challengeItem';
-import gemIcon from 'assets/svg/gem.svg';
+  import challengeIcon from 'assets/svg/challenge.svg';
-import memberIcon from 'assets/svg/member-icon.svg';
 
-export default {
+  export default {
-  props: ['groupId'],
+    props: ['groupId'],
-  components: {
+    components: {
-    challengeModal,
+      challengeModal,
-  },
+      challengeItem,
-  computed: {
+    },
-    ...mapState({user: 'user.data'}),
+    computed: {
-  },
+      ...mapState({user: 'user.data'}),
-  data () {
+    },
-    return {
+    data () {
-      challenges: [],
+      return {
-      icons: Object.freeze({
+        challenges: [],
-        challengeIcon,
+        icons: Object.freeze({
-        memberIcon,
+          challengeIcon,
-        gemIcon,
+        }),
-      }),
+        groupIdForChallenges: '',
-      groupIdForChallenges: '',
+      };
-    };
+    },
-  },
+    directives: {
-  directives: {
+      markdown: markdownDirective,
-    markdown: markdownDirective,
+    },
-  },
+    mounted () {
-  mounted () {
-    this.loadChallenges();
-  },
-  watch: {
-    async groupId () {
       this.loadChallenges();
     },
-  },
+    watch: {
-  methods: {
+      async groupId () {
-    async loadChallenges () {
+        this.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 () {
+    methods: {
-      this.$root.$emit('bv::show::modal', 'challenge-modal');
+      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>

website/client/components/challenges/myChallenges.vue

@@ -63,8 +63,6 @@
 </style>
 
 <script>
-import { mapState } from 'client/libs/store';
-
 import Sidebar from './sidebar';
 import ChallengeItem from './challengeItem';
 import challengeModal from './challengeModal';
@@ -111,24 +109,18 @@ export default {
         },
       ],
       search: '',
-      filters: {
+      filters: {},
-        roles: ['participating'], // This is required for my challenges
-      },
     };
   },
   mounted () {
     this.loadchallanges();
   },
   computed: {
-    ...mapState({user: 'user.data'}),
     filteredChallenges () {
       let search = this.search;
       let filters = this.filters;
       let user = this.$store.state.user.data;
 
-      // Always filter by member on this page:
-      filters.roles = ['participating'];
-
       // @TODO: Move this to the server
       return this.challenges.filter((challenge) => {
         return this.filterChallenge(challenge, filters, search, user);
@@ -136,9 +128,6 @@ export default {
     },
   },
   methods: {
-    memberOf (challenge) {
-      return this.user.challenges.indexOf(challenge._id) !== -1;
-    },
     updateSearch (eventData) {
       this.search = eventData.searchTerm;
     },

website/client/components/challenges/sidebar.vue

@@ -5,7 +5,7 @@
   form
     h2(v-once) {{ $t('filter') }}
     .form-group
-      h3 Category
+      h3 {{ $t('category') }}
       .form-check(
         v-for="group in categoryOptions",
         :key="group.key",
@@ -14,7 +14,7 @@
           input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters", :id="group.key")
           label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
     .form-group(v-if='$route.name !== "findChallenges"')
-      h3 Membership
+      h3 {{ $t('membership') }}
       .form-check(
         v-for="group in roleOptions",
         :key="group.key",
@@ -23,7 +23,7 @@
           input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters", :id="group.key")
           label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
     .form-group
-      h3 Ownership
+      h3 {{ $t('ownership') }}
       .form-check(
         v-for="group in ownershipOptions",
         :key="group.key",

website/client/components/groupLink.vue

@@ -0,0 +1,25 @@
+<template lang="pug">
+  b-link(
+    v-if='group',
+    @click.prevent='goToGroup'
+    ) {{group.name}}
+</template>
+
+<script>
+  import { TAVERN_ID } from '../../common/script/constants';
+
+  export default {
+    props: ['group'],
+    methods: {
+      goToGroup () {
+        if (this.group.type === 'party') {
+          this.$router.push({name: 'party'});
+        } else if (this.group._id === TAVERN_ID) {
+          this.$router.push({name: 'tavern'});
+        } 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
-        span.leader.float-left(v-if='group.leader.profile', @click='showMemberProfile(group.leader)') : {{group.leader.profile.name}}
+          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 }")
@@ -61,47 +63,16 @@
           // @TODO: V2 button.btn.btn-primary(v-once, v-if='!isLeader') {{$t('messageGuildLeader')}} // Suggest making the button visible to the leader too - useful for them to test how the feature works or to send a note to themself. -- Alys
         .button-container
           // @TODO: V2 button.btn.btn-primary(v-once, v-if='isMember && !isParty') {{$t('donateGems')}} // Suggest removing the isMember restriction - it's okay if non-members donate to a public guild. Also probably allow it for parties if parties can buy imagery. -- Alys
-    .section-header(v-if='isParty')
+    div
-      quest-sidebar-section(@toggle='toggleQuestSection', :show='sections.quest', :group='group')
+      quest-sidebar-section(:group='group', v-if='isParty')
-    .section-header(v-if='!isParty')
+      sidebar-section(:title="$t('guildSummary')", v-if='!isParty')
-      .row
-        .col-10
-          h3(v-once) {{ $t('guildSummary') }}
-        .col-2
-          .toggle-up(@click="sections.summary = !sections.summary", v-if="sections.summary")
-            .svg-icon(v-html="icons.upIcon")
-          .toggle-down(@click="sections.summary = !sections.summary", v-if="!sections.summary")
-            .svg-icon(v-html="icons.downIcon")
-      .section(v-if="sections.summary")
         p(v-markdown='group.summary')
-    .section-header
+      sidebar-section(:title="$t('groupDescription')")
-      .row
-        .col-10
-          h3 {{ $t('groupDescription') }}
-        .col-2
-          .toggle-up(@click="sections.description = !sections.description", v-if="sections.description")
-            .svg-icon(v-html="icons.upIcon")
-          .toggle-down(@click="sections.description = !sections.description", v-if="!sections.description")
-            .svg-icon(v-html="icons.downIcon")
-      .section(v-if="sections.description")
         p(v-markdown='group.description')
-    .section-header.challenge
+      sidebar-section(
-      .row
+        :title="$t('challenges')",
-        .col-10.information-header
+        :tooltip="isParty ? $t('challengeDetails') : $t('privateDescription')"
-          h3(v-once)
+      )
-            | {{ $t('challenges') }}
-          #groupPrivateDescOrChallengeInfo.icon.tooltip-wrapper(:title="isParty ? $t('challengeDetails') : $t('privateDescription')")
-            .svg-icon(v-html='icons.information')
-          b-tooltip(
-            :title="isParty ? $t('challengeDetails') : $t('privateDescription')",
-            target="groupPrivateDescOrChallengeInfo",
-          )
-        .col-2
-          .toggle-up(@click="sections.challenges = !sections.challenges", v-if="sections.challenges")
-            .svg-icon(v-html="icons.upIcon")
-          .toggle-down(@click="sections.challenges = !sections.challenges", v-if="!sections.challenges")
-            .svg-icon(v-html="icons.downIcon")
-      .section(v-if="sections.challenges")
         group-challenges(:groupId='searchId')
     div.text-center
       button.btn.btn-danger(v-if='isMember', @click='clickLeave()') {{ isParty ? $t('leaveParty') : $t('leaveGroup') }}
@@ -124,10 +95,6 @@
     color: $purple-200;
   }
 
-  .leader:hover {
-    cursor: pointer;
-  }
-
   .button-container {
     margin-bottom: 1em;
 
@@ -270,29 +237,6 @@
     margin-right: .3em;
   }
 
-  .information-header {
-    h3, .tooltip-wrapper {
-      display: inline-block;
-    }
-
-    .tooltip-wrapper {
-      width: 15px;
-      margin-left: 1.2em;
-    }
-  }
-
-  .section-header {
-    border-top: 1px solid #e1e0e3;
-    margin-top: 1em;
-    padding-top: 1em;
-  }
-
-  .section-header.challenge {
-    border-bottom: 1px solid #e1e0e3;
-    margin-bottom: 1em;
-    padding-bottom: 1em;
-  }
-
   .hr {
     width: 100%;
     height: 20px;
@@ -334,6 +278,8 @@ import groupGemsModal from 'client/components/groups/groupGemsModal';
 import questSidebarSection from 'client/components/groups/questSidebarSection';
 import markdownDirective from 'client/directives/markdown';
 import communityGuidelines from './communityGuidelines';
+import sidebarSection from '../sidebarSection';
+import userLink from '../userLink';
 
 import deleteIcon from 'assets/svg/delete.svg';
 import copyIcon from 'assets/svg/copy.svg';
@@ -342,10 +288,7 @@ import likedIcon from 'assets/svg/liked.svg';
 import reportIcon from 'assets/svg/report.svg';
 import gemIcon from 'assets/svg/gem.svg';
 import questIcon from 'assets/svg/quest.svg';
-import informationIcon from 'assets/svg/information.svg';
 import questBackground from 'assets/svg/quest-background-border.svg';
-import upIcon from 'assets/svg/up.svg';
-import downIcon from 'assets/svg/down.svg';
 import goldGuildBadgeIcon from 'assets/svg/gold-guild-badge-small.svg';
 import silverGuildBadgeIcon from 'assets/svg/silver-guild-badge-small.svg';
 import bronzeGuildBadgeIcon from 'assets/svg/bronze-guild-badge-small.svg';
@@ -365,6 +308,8 @@ export default {
     groupGemsModal,
     questSidebarSection,
     communityGuidelines,
+    sidebarSection,
+    userLink,
   },
   directives: {
     markdown: markdownDirective,
@@ -381,22 +326,13 @@ export default {
         gem: gemIcon,
         liked: likedIcon,
         questIcon,
-        information: informationIcon,
         questBackground,
-        upIcon,
-        downIcon,
         goldGuildBadgeIcon,
         silverGuildBadgeIcon,
         bronzeGuildBadgeIcon,
       }),
       members: [],
       selectedQuest: {},
-      sections: {
-        quest: true,
-        summary: true,
-        description: true,
-        challenges: true,
-      },
       chat: {
         submitDisable: false,
         submitTimeout: null,
@@ -714,19 +650,9 @@ export default {
       }
       // $rootScope.$state.go('options.inventory.quests');
     },
-    async showMemberProfile (leader) {
-      let heroDetails = await this.$store.dispatch('members:fetchMember', { memberId: leader._id });
-      this.$root.$emit('habitica:show-profile', {
-        user: heroDetails.data.data,
-        startingPage: 'profile',
-      });
-    },
     showGroupGems () {
       this.$root.$emit('bv::show::modal', 'group-gems-modal');
     },
-    toggleQuestSection () {
-      this.sections.quest = !this.sections.quest;
-    },
   },
 };
 </script>

website/client/components/groups/publicGuildItem.vue

@@ -24,9 +24,7 @@ router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
                 span.count {{ guild.balance * 4 }}
               div.guild-bank(v-if='displayGemBank', v-once) {{$t('guildBank')}}
           .row
-            .col-md-12
+            category-tags.col-md-12(:categories="guild.categories", :owner="isOwner", v-once)
-              .category-label(v-for="category in guild.categorySlugs")
-                | {{$t(category)}}
               span.recommend-text(v-if='showSuggested(guild._id)') Suggested because you’re new to Habitica.
 </template>
 
@@ -128,6 +126,7 @@ router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
 <script>
 import moment from 'moment';
 import { mapState } from 'client/libs/store';
+import categoryTags from '../categories/categoryTags';
 import groupUtilities from 'client/mixins/groupsUtilities';
 import markdown from 'client/directives/markdown';
 import gemIcon from 'assets/svg/gem.svg';
@@ -142,8 +141,14 @@ export default {
     markdown,
   },
   props: ['guild', 'displayLeave', 'displayGemBank'],
+  components: {
+    categoryTags,
+  },
   computed: {
     ...mapState({user: 'user.data'}),
+    isOwner () {
+      return this.guild.leader && this.guild.leader === this.user._id;
+    },
     isMember () {
       return this.isMemberOfGroup(this.user, this.guild);
     },

website/client/components/groups/questSidebarSection.vue

@@ -1,74 +1,65 @@
 <template lang="pug">
-div
+sidebar-section(:title="$t('questDetailsTitle')")
-  .row
+  .row.no-quest-section(v-if='!onPendingQuest && !onActiveQuest')
-    .col-10
+    .col-12.text-center
-      h3(v-once) {{ $t('questDetailsTitle') }}
+      .svg-icon(v-html="icons.questIcon")
+      h4(v-once) {{ $t('youAreNotOnQuest') }}
+      p(v-once) {{ $t('questDescription') }}
+      button.btn.btn-secondary(v-once, @click="openStartQuestModal()") {{ $t('startAQuest') }}
+  .row.quest-active-section(v-if='onPendingQuest && !onActiveQuest')
     .col-2
-      .toggle-up(@click="toggle()", v-if="show")
+      .quest(:class='`inventory_quest_scroll_${questData.key}`')
-        .svg-icon(v-html="icons.upIcon")
+    .col-6.titles
-      .toggle-down(@click="toggle()", v-if="!show")
+      strong {{ questData.text() }}
-        .svg-icon(v-html="icons.downIcon")
+      p {{acceptedCount}} / {{group.memberCount}}
-  .section(v-if="show")
+    .col-4
-    .row.no-quest-section(v-if='!onPendingQuest && !onActiveQuest')
+      button.btn.btn-secondary(@click="openQuestDetails()") {{ $t('details') }}
-      .col-12.text-center
+  .row.quest-active-section.quest-invite(v-if='user.party.quest && user.party.quest.RSVPNeeded')
-        .svg-icon(v-html="icons.questIcon")
+    span {{ $t('wouldYouParticipate') }}
-        h4(v-once) {{ $t('youAreNotOnQuest') }}
+    button.btn.btn-primary.accept(@click='questAccept(group._id)') {{$t('accept')}}
-        p(v-once) {{ $t('questDescription') }}
+    button.btn.btn-primary.reject(@click='questReject(group._id)') {{$t('reject')}}
-        button.btn.btn-secondary(v-once, @click="openStartQuestModal()") {{ $t('startAQuest') }}
+  .row.quest-active-section(v-if='!onPendingQuest && onActiveQuest')
-    .row.quest-active-section(v-if='onPendingQuest && !onActiveQuest')
+    .col-12.text-center
-      .col-2
+      .quest-boss(:class="'quest_' + questData.key")
-        .quest(:class='`inventory_quest_scroll_${questData.key}`')
+      h3(v-once) {{ questData.text() }}
-      .col-6.titles
+      .quest-box
-        strong {{ questData.text() }}
+        .collect-info(v-if='questData.collect')
-        p {{acceptedCount}} / {{group.memberCount}}
+          .row(v-for='(value, key) in questData.collect')
-      .col-4
+            .col-2
-        button.btn.btn-secondary(@click="openQuestDetails()") {{ $t('details') }}
+              div(:class="'quest_' + questData.key + '_' + key")
-    .row.quest-active-section.quest-invite(v-if='user.party.quest && user.party.quest.RSVPNeeded')
+            .col-10
-      span {{ $t('wouldYouParticipate') }}
+              strong {{value.text()}}
-      button.btn.btn-primary.accept(@click='questAccept(group._id)') {{$t('accept')}}
+              .grey-progress-bar
-      button.btn.btn-primary.reject(@click='questReject(group._id)') {{$t('reject')}}
+                .collect-progress-bar(:style="{width: (group.quest.progress.collect[key] / value.count) * 100 + '%'}")
-    .row.quest-active-section(v-if='!onPendingQuest && onActiveQuest')
+              strong {{group.quest.progress.collect[key]}} / {{value.count}}
-      .col-12.text-center
+          div.text-right {{parseFloat(user.party.quest.progress.collectedItems) || 0}} items found
-        .quest-boss(:class="'quest_' + questData.key")
+        .boss-info(v-if='questData.boss')
-        h3(v-once) {{ questData.text() }}
+          .row
-        .quest-box
+            .col-6
-          .collect-info(v-if='questData.collect')
+              h4.float-left(v-once) {{ questData.boss.name() }}
-            .row(v-for='(value, key) in questData.collect')
+            .col-6
-              .col-2
+              span.float-right(v-once) {{ $t('participantsTitle') }}
-                div(:class="'quest_' + questData.key + '_' + key")
+          .row
-              .col-10
+            .col-12
-                strong {{value.text()}}
+              .grey-progress-bar
-                .grey-progress-bar
+                .boss-health-bar(:style="{width: bossHpPercent + '%'}")
-                  .collect-progress-bar(:style="{width: (group.quest.progress.collect[key] / value.count) * 100 + '%'}")
+          .row.boss-details
-                strong {{group.quest.progress.collect[key]}} / {{value.count}}
+            .col-6
-            div.text-right {{parseFloat(user.party.quest.progress.collectedItems) || 0}} items found
+              span.float-left
-          .boss-info(v-if='questData.boss')
+                | {{ Math.ceil(parseFloat(group.quest.progress.hp) * 100) / 100 }} / {{ parseFloat(questData.boss.hp).toFixed(2) }}
-            .row
+                // current boss hp uses ceil so you don't underestimate damage needed to end quest
+            .col-6(v-if='userIsOnQuest')
+              // @TODO: Why do we not sync quest progress on the group doc? Each user could have different progress.
+              span.float-right {{ user.party.quest.progress.up | floor(10) }} {{ $t('pendingDamageLabel') }}
+              // player's pending damage uses floor so you don't overestimate damage you've already done
+          .row.rage-bar-row(v-if='questData.boss.rage')
+            .col-12
+              .grey-progress-bar
+                .boss-health-bar.rage-bar(:style="{width: (group.quest.progress.rage / questData.boss.rage.value) * 100 + '%'}")
+          .row.boss-details.rage-details(v-if='questData.boss.rage')
               .col-6
-                h4.float-left(v-once) {{ questData.boss.name() }}
+                span.float-left {{ $t('rage') }} {{ parseFloat(group.quest.progress.rage).toFixed(2) }} / {{ questData.boss.rage.value }}
-              .col-6
+      button.btn.btn-secondary(v-once, @click="questAbort()", v-if='canEditQuest') {{ $t('abort') }}
-                span.float-right(v-once) {{ $t('participantsTitle') }}
-            .row
-              .col-12
-                .grey-progress-bar
-                  .boss-health-bar(:style="{width: (group.quest.progress.hp / questData.boss.hp) * 100 + '%'}")
-            .row.boss-details
-              .col-6
-                span.float-left
-                  | {{ Math.ceil(parseFloat(group.quest.progress.hp) * 100) / 100 }} / {{ parseFloat(questData.boss.hp).toFixed(2) }}
-                  // current boss hp uses ceil so you don't underestimate damage needed to end quest
-              .col-6(v-if='userIsOnQuest')
-                // @TODO: Why do we not sync quest progress on the group doc? Each user could have different progress.
-                span.float-right {{ user.party.quest.progress.up | floor(10) }} {{ $t('pendingDamageLabel') }}
-                // player's pending damage uses floor so you don't overestimate damage you've already done
-            .row.rage-bar-row(v-if='questData.boss.rage')
-              .col-12
-                .grey-progress-bar
-                  .boss-health-bar.rage-bar(:style="{width: (group.quest.progress.rage / questData.boss.rage.value) * 100 + '%'}")
-            .row.boss-details.rage-details(v-if='questData.boss.rage')
-                .col-6
-                  span.float-left {{ $t('rage') }} {{ parseFloat(group.quest.progress.rage).toFixed(2) }} / {{ questData.boss.rage.value }}
-        button.btn.btn-secondary(v-once, @click="questAbort()", v-if='canEditQuest') {{ $t('abort') }}
 </template>
 
 <style lang="scss" scoped>
@@ -193,18 +184,18 @@ import { mapState } from 'client/libs/store';
 
 import quests from 'common/script/content/quests';
 import percent from 'common/script/libs/percent';
+import sidebarSection from '../sidebarSection';
 
-import upIcon from 'assets/svg/up.svg';
-import downIcon from 'assets/svg/down.svg';
 import questIcon from 'assets/svg/quest.svg';
 
 export default {
-  props: ['show', 'group'],
+  props: ['group'],
+  components: {
+    sidebarSection,
+  },
   data () {
     return {
       icons: Object.freeze({
-        upIcon,
-        downIcon,
         questIcon,
       }),
     };
@@ -261,9 +252,6 @@ export default {
     },
   },
   methods: {
-    toggle () {
-      this.$emit('toggle');
-    },
     openStartQuestModal () {
       this.$root.$emit('bv::show::modal', 'start-quest-modal');
     },

website/client/components/groups/sidebar.vue

@@ -6,7 +6,7 @@
   form
     h2(v-once) {{ $t('filter') }}
     .form-group
-      h3 Category
+      h3 {{ $t('category') }}
       .form-check(
         v-for="group in categoryOptions",
         :key="group.key",
@@ -15,7 +15,7 @@
           input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters", :id="group.key")
           label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
     .form-group
-      h3 Role
+      h3 {{ $t('role') }}
       .form-check(
         v-for="group in roleOptions",
         :key="group.key",
@@ -24,7 +24,7 @@
           input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters", :id="group.key")
           label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
     .form-group
-      h3 Guild Size
+      h3 {{ $t('guildSize') }}
       .form-check(
         v-for="group in guildSizeOptions",
         :key="group.key",

website/client/components/groups/tavern.vue

@@ -102,18 +102,9 @@
           li(v-once) {{ $t('sleepBullet4') }}
         button.btn.btn-secondary.pause-button(v-if='!user.preferences.sleep', @click='toggleSleep()', v-once) {{ $t('pauseDailies') }}
         button.btn.btn-secondary.pause-button(v-if='user.preferences.sleep', @click='toggleSleep()', v-once) {{ $t('unpauseDailies') }}
-
+    .px-3
-    .below-header-sections
+      sidebar-section(:title="$t('staffAndModerators')")
-      .section-header
         .row
-          .col-10
-            h3(v-once) {{ $t('staffAndModerators') }}
-          .col-2
-            .toggle-up(@click="sections.staff = !sections.staff", v-if="sections.staff")
-              .svg-icon(v-html="icons.upIcon")
-            .toggle-down(@click="sections.staff = !sections.staff", v-if="!sections.staff")
-              .svg-icon(v-html="icons.downIcon")
-        .section.row(v-if="sections.staff")
           .col-4.staff(v-for='user in staff', :class='{staff: user.type === "Staff", moderator: user.type === "Moderator", bailey: user.name === "It\'s Bailey"}')
             div
               a.title(@click="viewStaffProfile(user.uuid)") {{user.name}}
@@ -122,50 +113,33 @@
               .svg-icon.npc-icon(v-html="icons.tierNPC", v-if='user.name === "It\'s Bailey"')
             .type {{user.type}}
 
-      .section-header
+      sidebar-section(:title="$t('helpfulLinks')")
-        .row
+        ul
-          .col-10
+          li
-            h3(v-once) {{ $t('helpfulLinks') }}
+            a(href='', @click.prevent='modForm()') {{ $t('contactForm') }}
-          .col-2
+          li
-            .toggle-up(@click="sections.helpfulLinks = !sections.helpfulLinks", v-if="sections.helpfulLinks")
+           router-link(to='/static/community-guidelines', v-once) {{ $t('communityGuidelinesLink') }}
-              .svg-icon(v-html="icons.upIcon")
+          li
-            .toggle-down(@click="sections.helpfulLinks = !sections.helpfulLinks", v-if="!sections.helpfulLinks")
+            router-link(to="/groups/guild/f2db2a7f-13c5-454d-b3ee-ea1f5089e601") {{ $t('lookingForGroup') }}
-              .svg-icon(v-html="icons.downIcon")
+          li
-        .section.row(v-if="sections.helpfulLinks")
+           router-link(to='/static/faq', v-once) {{ $t('faq') }}
-          ul
+          li
-            li
+            a(href='', v-html="$t('glossary')")
-              a(href='', @click.prevent='modForm()') {{ $t('contactForm') }}
+          li
-            li
+            a(href='http://habitica.wikia.com/wiki/Habitica_Wiki', v-once) {{ $t('wiki') }}
-             router-link(to='/static/community-guidelines', v-once) {{ $t('communityGuidelinesLink') }}
+          li
-            li
+            a(href='https://oldgods.net/habitrpg/habitrpg_user_data_display.html', v-once) {{ $t('dataDisplayTool') }}
-              router-link(to="/groups/guild/f2db2a7f-13c5-454d-b3ee-ea1f5089e601") {{ $t('lookingForGroup') }}
+          li
-            li
+            router-link(to="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac") {{ $t('reportProblem') }}
-             router-link(to='/static/faq', v-once) {{ $t('faq') }}
+          li
-            li
+            a(href='https://trello.com/c/odmhIqyW/440-read-first-table-of-contents', v-once) {{ $t('requestFeature') }}
-              a(href='', v-html="$t('glossary')")
+          li
-            li
+            a(href='', v-html="$t('communityForum')")
-              a(href='http://habitica.wikia.com/wiki/Habitica_Wiki', v-once) {{ $t('wiki') }}
+          li
-            li
+            router-link(to="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a") {{ $t('askQuestionGuild') }}
-              a(href='https://oldgods.net/habitrpg/habitrpg_user_data_display.html', v-once) {{ $t('dataDisplayTool') }}
-            li
-              router-link(to="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac") {{ $t('reportProblem') }}
-            li
-              a(href='https://trello.com/c/odmhIqyW/440-read-first-table-of-contents', v-once) {{ $t('requestFeature') }}
-            li
-              a(href='', v-html="$t('communityForum')")
-            li
-              router-link(to="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a") {{ $t('askQuestionGuild') }}
 
-      .section-header
+      sidebar-section(:title="$t('playerTiers')")
         .row
-          .col-10
-            h3(v-once) {{ $t('playerTiers') }}
-          .col-2
-            .toggle-up(@click="sections.playerTiers = !sections.playerTiers", v-if="sections.playerTiers")
-              .svg-icon(v-html="icons.upIcon")
-            .toggle-down(@click="sections.playerTiers = !sections.playerTiers", v-if="!sections.playerTiers")
-              .svg-icon(v-html="icons.downIcon")
-        .section.row(v-if="sections.playerTiers")
           .col-12
             p(v-once) {{ $t('playerTiersDesc') }}
             ul.tier-list
@@ -287,10 +261,6 @@
     width: 100%;
   }
 
-  .section-header {
-    margin-top: 2em;
-  }
-
   .grassy-meadow-backdrop {
     background-image: url('~assets/images/npc/#{$npc_tavern_flavor}/tavern_background.png');
     background-repeat: repeat-x;
@@ -545,17 +515,16 @@ import autocomplete from '../chat/autoComplete';
 import communityGuidelines from './communityGuidelines';
 import worldBossInfoModal from '../world-boss/worldBossInfoModal';
 import worldBossRageModal from '../world-boss/worldBossRageModal';
+import sidebarSection from '../sidebarSection';
 
 import challengeIcon from 'assets/svg/challenge.svg';
 import chevronIcon from 'assets/svg/chevron-red.svg';
-import downIcon from 'assets/svg/down.svg';
 import gemIcon from 'assets/svg/gem.svg';
 import healthIcon from 'assets/svg/health.svg';
 import informationIconRed from 'assets/svg/information-red.svg';
 import questBackground from 'assets/svg/quest-background-border.svg';
 import rageIcon from 'assets/svg/rage.svg';
 import swordIcon from 'assets/svg/sword.svg';
-import upIcon from 'assets/svg/up.svg';
 
 import tier1 from 'assets/svg/tier-1.svg';
 import tier2 from 'assets/svg/tier-2.svg';
@@ -577,6 +546,7 @@ export default {
     communityGuidelines,
     worldBossInfoModal,
     worldBossRageModal,
+    sidebarSection,
   },
   data () {
     return {
@@ -584,7 +554,6 @@ export default {
       icons: Object.freeze({
         challengeIcon,
         chevronIcon,
-        downIcon,
         gem: gemIcon,
         healthIcon,
         informationIcon: informationIconRed,
@@ -601,7 +570,6 @@ export default {
         tierMod,
         tierNPC,
         tierStaff,
-        upIcon,
       }),
       chat: {
         submitDisable: false,
@@ -611,9 +579,6 @@ export default {
         chat: [],
       },
       sections: {
-        staff: true,
-        helpfulLinks: true,
-        playerTiers: true,
         worldBoss: true,
       },
       staff: [

website/client/components/inventory/stable/index.vue

@@ -47,7 +47,7 @@
               label.custom-control-label(v-once, :for="mountGroup.key") {{ mountGroup.label }}
 
         div.form-group.clearfix
-          h3.float-left Hide Missing
+          h3.float-left {{ $t('hideMissing') }}
           toggle-switch.float-right(
             :checked="hideMissing",
             @change="updateHideMissing"

website/client/components/sidebarSection.vue

@@ -0,0 +1,91 @@
+<template lang="pug">
+  .section
+      .section-header.d-flex.align-items-center
+        h3.mb-0(v-once)
+          | {{ title }}
+        .section-info.mx-1(
+          v-if="tooltip !== null"
+        )
+          .svg-icon(
+            v-html='icons.information',
+            :id="tooltipId",
+            :title="tooltip"
+          )
+          b-tooltip(
+            :title="tooltip",
+            :target="tooltipId",
+          )
+        .section-toggle.ml-auto(@click="toggle")
+          .svg-icon(v-html="icons.upIcon", v-if="visible")
+          .svg-icon(v-html="icons.downIcon", v-else)
+      .section-body(v-show="visible")
+        slot
+</template>
+
+<style lang="scss" scoped>
+  .section {
+    border-top: 1px solid #e1e0e3;
+    margin-top: 1em;
+    padding-top: 1em;
+  }
+
+  .section:last-of-type {
+    border-bottom: 1px solid #e1e0e3;
+    margin-bottom: 1em;
+    padding-bottom: 1em;
+  }
+
+  .section-body {
+    margin-top: 1em;
+  }
+
+  .section-toggle {
+    cursor: pointer;
+  }
+
+  .section-info {
+    cursor: help;
+  }
+
+  .section-info .svg-icon,
+  .section-toggle .svg-icon {
+    width: 16px;
+  }
+</style>
+
+<script>
+  import uuid from 'uuid/v4';
+  import upIcon from 'assets/svg/up.svg';
+  import downIcon from 'assets/svg/down.svg';
+  import informationIcon from 'assets/svg/information.svg';
+
+  export default {
+    props: {
+      title: {
+        required: true,
+      },
+      tooltip: {
+        default: null,
+      },
+      show: {
+        default: true,
+      },
+    },
+    data () {
+      return {
+        tooltipId: uuid(),
+        visible: this.show,
+        icons: {
+          upIcon,
+          downIcon,
+          information: informationIcon,
+        },
+      };
+    },
+    methods: {
+      toggle () {
+        this.visible = !this.visible;
+      },
+    },
+  };
+</script>

website/client/components/userLink.vue

@@ -0,0 +1,21 @@
+<template lang="pug">
+  b-link(
+    v-if='user && user.profile',
+    @click.prevent='showProfile(user)'
+    ) {{user.profile.name}}
+</template>
+
+<script>
+  export default {
+    props: ['user'],
+    methods: {
+      async showProfile (user) {
+        let heroDetails = await this.$store.dispatch('members:fetchMember', { memberId: user._id });
+        this.$root.$emit('habitica:show-profile', {
+          user: heroDetails.data.data,
+          startingPage: 'profile',
+        });
+      },
+    },
+  };
+</script>

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.",
 
@@ -25,7 +26,9 @@
   "filter": "Filter",
   "groups": "Groups",
   "noNone": "None",
+  "category": "Category",
   "membership": "Membership",
+  "ownership": "Ownership",
   "participating": "Participating",
   "notParticipating": "Not Participating",
   "either": "Either",

website/common/locales/en/groups.json

@@ -371,9 +371,11 @@
   "recentActivity": "Recent Activity",
   "myGuilds": "My Guilds",
   "guildsDiscovery": "Discover Guilds",
+  "role": "Role",
   "guildOrPartyLeader": "Leader",
   "guildLeader": "Guild Leader",
   "member": "Member",
+  "guildSize": "Guild Size",
   "goldTier": "Gold Tier",
   "silverTier": "Silver Tier",
   "bronzeTier": "Bronze Tier",

website/common/locales/en/npc.json

@@ -53,6 +53,7 @@
   "featuredItems": "Featured Items!",
   "hideLocked": "Hide locked",
   "hidePinned": "Hide pinned",
+  "hideMissing": "Hide Missing",
   "amountExperience": "<%= amount %> Experience",
   "amountGold": "<%= amount %> Gold",
   "namedHatchingPotion": "<%= type %> Hatching Potion",