Improved challenge layout.

website/client/components/challenges/challengeDetail.vue

@@ -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
+      .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 +56,25 @@
         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')}}
-      div(v-if='isMember')
+    .button-container(v-if='isLeader || isAdmin')
-        button.btn.btn-danger(v-once, @click='leaveChallenge()') {{$t('leaveChallenge')}}
+      button.btn.btn-primary(v-once, @click='edit()') {{$t('editChallenge')}}
-      div(v-if='isLeader || isAdmin')
+    .button-container(v-if='isLeader || isAdmin')
-        button.btn.btn-secondary(v-once, @click='edit()') {{$t('editChallenge')}}
+      button.btn.btn-primary(v-once, @click='cloneChallenge()') {{$t('clone')}}
-      div(v-if='isLeader || isAdmin')
+    .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')}}
-      div(v-if='isLeader || isAdmin')
+    sidebar-section(:title="$t('challengeSummary')")
-        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')}}
       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

@@ -6,6 +6,8 @@ div
       .svg-icon.challenge-icon(v-html="icons.challengeIcon")
       h4(v-once) {{ $t('haveNoChallenges') }}
       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')
       .col-12.challenge-item
         .row
@@ -25,6 +27,30 @@ div
       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;

website/client/components/groups/group.vue

@@ -61,47 +61,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')
+    quest-sidebar-section(:group='group', v-if='isParty')
-      quest-sidebar-section(@toggle='toggleQuestSection', :show='sections.quest', :group='group')
+    sidebar-section(:title="$t('guildSummary')", v-if='!isParty')
-    .section-header(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)
+      :last="true"
-            | {{ $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') }}
@@ -270,29 +239,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 +280,7 @@ 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 deleteIcon from 'assets/svg/delete.svg';
 import copyIcon from 'assets/svg/copy.svg';
@@ -342,10 +289,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 +309,7 @@ export default {
     groupGemsModal,
     questSidebarSection,
     communityGuidelines,
+    sidebarSection,
   },
   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,
-      },
       newMessage: '',
       coords: {
         TOP: 0,
@@ -698,9 +634,6 @@ export default {
     showGroupGems () {
       this.$root.$emit('bv::show::modal', 'group-gems-modal');
     },
-    toggleQuestSection () {
-      this.sections.quest = !this.sections.quest;
-    },
   },
 };
 </script>

website/client/components/groups/questSidebarSection.vue

@@ -1,14 +1,5 @@
 <template lang="pug">
-div
+sidebar-section(:title="$t('questDetailsTitle')")
-  .row
-    .col-10
-      h3(v-once) {{ $t('questDetailsTitle') }}
-    .col-2
-      .toggle-up(@click="toggle()", v-if="show")
-        .svg-icon(v-html="icons.upIcon")
-      .toggle-down(@click="toggle()", v-if="!show")
-        .svg-icon(v-html="icons.downIcon")
-  .section(v-if="show")
   .row.no-quest-section(v-if='!onPendingQuest && !onActiveQuest')
     .col-12.text-center
       .svg-icon(v-html="icons.questIcon")
@@ -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/sidebarSection.vue

@@ -0,0 +1,94 @@
+<template lang="pug">
+  .section(:class="{'section-last': last}")
+      .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 {
+    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,
+      },
+      last: {
+        default: false,
+      },
+    },
+    data () {
+      return {
+        tooltipId: uuid(),
+        visible: this.show,
+        icons: {
+          upIcon,
+          downIcon,
+          information: informationIcon
+        },
+      };
+    },
+    methods: {
+      toggle () {
+        this.visible = !this.visible;
+      },
+    },
+  };
+</script>