wip

website/client/components/appHeader.vue

@@ -7,11 +7,30 @@
       span.small-text(v-html="$t('inviteFriendsParty')")
       br
       button.btn.btn-primary {{ $t('startAParty') }}
-  .party-members(v-else)
+  .party-members.d-flex(v-else)
     member-details(
       v-for="member in partyMembers",
       :key="member._id",
       :member="member",
+      condensed=true,
+    )
+    member-details(
+      v-for="member in partyMembers",
+      :key="member._id",
+      :member="member",
+      condensed=true,
+    )
+    member-details(
+      v-for="member in partyMembers",
+      :key="member._id",
+      :member="member",
+      condensed=true,
+    )
+    member-details(
+      v-for="member in partyMembers",
+      :key="member._id",
+      :member="member",
+      condensed=true,
     )
 </template>
 
@@ -24,15 +43,18 @@
   background: $purple-50;
   height: 204px;
   color: $header-color;
+  flex-wrap: nowrap;
+}
+
+.no-party, .party-members {
+  flex-grow: 1;
 }
 
 .party-members {
-  margin-left: 24px;
+  overflow-x: auto;
 }
 
 .no-party {
-  flex-grow: 1;
-
   .small-text {
     color: $header-color;
   }

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(@click="onHover()", :class="{ condensed, expanded }")
+  avatar(:member="member")
+  .member-stats
     h3.character-name 
       | {{member.profile.name}}
       .is-buffed(v-if="isBuffed")
@@ -27,12 +27,47 @@
 <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);
+
+  .member-stats {
+    padding-right: 16px;
+  }
+}
+
 .small-text {
   color: $header-color;
 }
 
 .character-name {
-  margin-top: 24px;
   margin-bottom: 1px;
   color: $white;
 }
@@ -60,7 +95,6 @@
 }
 
 #header-avatar {
-  margin-top: 24px;
   margin-right: 16px;
 }
 
@@ -118,13 +152,14 @@ export default {
       type: Object,
       required: true,
     },
-    expanded: {
+    condensed: {
       type: Boolean,
       default: false,
     },
   },
   data () {
     return {
+      expanded: false,
       icons: Object.freeze({
         buff: buffIcon,
         health: healthIcon,
@@ -141,6 +176,10 @@ export default {
     isBuffed () {
       return this.$store.getters['members:isBuffed'](this.member);
     },
+    onHover () {
+      this.expanded = !this.expanded;
+      console.log('on hover');
+    },
   },
   computed: {
     ...mapState({

website/common/locales/en/newClient.json

@@ -1,4 +1,5 @@
 {
+  "viewParty": "View Party",
   "shops": "Shops",
   "faq": "FAQ",
   "costumePopoverText": "Select \"Use Costume\" to equip items to your avatar without affecting the stats from your Battle Gear! This means that you can dress up your avatar in whatever outfit you like while still having your best Battle Gear equipped.",