Client: party members in header (#8804)

* wip party members in header

* wip

* add inbox routes back

* polishing

website/client/components/appHeader.vue

@@ -1,18 +1,24 @@
 <template lang="pug">
 #app-header.row
-  member-details(:member="user", :expanded="true")
-  .no-party.d-flex.justify-content-center.text-center(v-if="!user.party._id")
+  member-details(:member="user", @click="$router.push({name: 'avatar'})")
+  .party-members.d-flex(v-if="partyMembers && partyMembers.length > 1")
+    member-details(
+      v-for="member in partyMembers",
+      :key="member._id",
+      v-if="member._id !== user._id",
+      :member="member",
+      condensed=true,
+      @click="expandMember(member._id)"
+      :expanded="member._id === expandedMember",
+    )
+    button.btn.btn-primary {{ $t('viewParty') }}
+  .no-party.d-flex.justify-content-center.text-center(v-else)
     .align-self-center(v-once)
       h3 {{ $t('battleWithFriends') }}
       span.small-text(v-html="$t('inviteFriendsParty')")
       br
+      // TODO link to party creation
       button.btn.btn-primary {{ $t('startAParty') }}
-  div(v-else)
-    member-details(
-      v-for="member in partyMembers",
-      :key="member._id",
-      :member="member",
-    )
 </template>
 
 <style lang="scss" scoped>
@@ -24,11 +30,18 @@
   background: $purple-50;
   height: 204px;
   color: $header-color;
+  flex-wrap: nowrap;
+}
+
+.no-party, .party-members {
+  flex-grow: 1;
+}
+
+.party-members {
+  overflow-x: auto;
 }
 
 .no-party {
-  flex-grow: 1;
-
   .small-text {
     color: $header-color;
   }
@@ -52,6 +65,11 @@ export default {
   components: {
     MemberDetails,
   },
+  data () {
+    return {
+      expandedMember: null,
+    };
+  },
   computed: {
     ...mapGetters({
       user: 'user:data',
@@ -62,6 +80,13 @@ export default {
     ...mapActions({
       getPartyMembers: 'party:getMembers',
     }),
+    expandMember (memberId) {
+      if (this.expandedMember === memberId) {
+        this.expandedMember = null;
+      } else {
+        this.expandedMember = memberId;
+      }
+    },
   },
   created () {
     this.getPartyMembers();

website/client/components/appMenu.vue

@@ -44,7 +44,7 @@ nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
         router-link.dropdown-item.edit-avatar(:to="{name: 'avatar'}") 
           h3 {{ user.profile.name }}
           span.small-text {{ $t('editAvatar') }}
-        //.dropdown-divider
+        router-link.dropdown-item(:to="{name: 'inbox'}") {{ $t('inbox') }}
         router-link.dropdown-item(:to="{name: 'stats'}") {{ $t('stats') }}
         router-link.dropdown-item(:to="{name: 'achievements'}") {{ $t('achievements') }}
         router-link.dropdown-item(:to="{name: 'settings'}") {{ $t('settings') }}

website/client/components/avatar.vue

@@ -52,6 +52,7 @@
   height: 147px;
   image-rendering: pixelated;
   position: relative;
+  cursor: pointer;
 }
 
 .character-sprites {

website/client/components/memberDetails.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
-.d-flex
-  avatar#header-avatar(:member="member")
-  div(v-if="expanded")
+.d-flex.member-details(:class="{ condensed, expanded }")
+  avatar(:member="member", @click.native="$emit('click')",)
+  .member-stats
     h3.character-name 
       | {{member.profile.name}}
       .is-buffed(v-if="isBuffed")
@@ -27,12 +27,69 @@
 <style lang="scss" scoped>
 @import '~client/assets/scss/colors.scss';
 
+.member-details {
+  white-space: nowrap;
+  margin-top: 24px;
+  margin-bottom: 24px;
+  transition: all .15s ease;
+}
+
+.member-stats {
+  padding-left: 16px;
+  padding-right: 24px;
+  height: auto;
+  opacity: 1;
+  transition: all 0.15s ease-out;
+}
+
+.member-details.condensed:not(.expanded) .member-stats {
+  opacity: 0;
+  height: 0;
+  padding: 0;
+  width: 0;
+}
+
+// Condensed version
+.member-details.condensed.expanded {
+  background: $header-dark-background;
+  padding-top: 9px;
+  margin-top: 15px;
+  border-radius: 4px;
+  padding-left: 9px;
+  box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
+
+  .is-buffed {
+    background-color: $purple-50;
+  }
+
+  .member-stats {
+    padding-right: 16px;
+  }
+
+  .progress-container > .svg-icon {
+    width: 19px;
+    height: 19px;
+    margin-top: -2px;
+  }
+
+  .progress-container > .progress {
+    width: 152px;
+    border-radius: 0px;
+    height: 10px;
+    margin-top: 2px;
+  }
+
+  .progress-container > .progress > .progress-bar {
+    border-radius: 0px;
+    height: 10px;
+  }
+}
+
 .small-text {
   color: $header-color;
 }
 
 .character-name {
-  margin-top: 24px;
   margin-bottom: 1px;
   color: $white;
 }
@@ -60,7 +117,6 @@
 }
 
 #header-avatar {
-  margin-top: 24px;
   margin-right: 16px;
 }
 
@@ -118,7 +174,14 @@ export default {
       type: Object,
       required: true,
     },
-    expanded: Boolean,
+    condensed: {
+      type: Boolean,
+      default: false,
+    },
+    expanded: {
+      type: Boolean,
+      default: false,
+    },
   },
   data () {
     return {