Party members in header v2 (#8815)

* update comemnt

* flyout on hover

* fix hasClass and isBuffed

* polish members in party header

website/client/assets/scss/button.scss

@@ -25,7 +25,7 @@
     border-color: transparent;
   }
 
-  &:active {
+  &:active, &.active {
     box-shadow: none;
     border: 1px solid transparent;
   }
@@ -44,8 +44,9 @@
     background: $purple-200;
   }
 
-  &:hover:not(:disabled), &:active {
+  &:hover:not(:disabled), &:active, &.active, &:focus {
     background: #5d3b9c;
+    color: $white;
   }
 }
 
@@ -53,11 +54,11 @@
   color: $gray-50;
   background: $white !important;
 
-  &:hover:not(:disabled):not(.disabled), &:active, &:focus {
+  &:hover:not(:disabled):not(.disabled), &:active, &.active, &:focus {
     color: $purple-200 !important;
   }
 
-  &:active, &:focus {
+  &:active, &:focus, &.active {
     border-color: $purple-500 !important;
   }
 
@@ -74,7 +75,7 @@
     background: $green-10;
   }
 
-  &:hover:not(:disabled), &:active {
+  &:hover:not(:disabled), &:active, &.active {
     background: $green-50;
   }
 }
@@ -86,7 +87,7 @@
     background: $blue-50;
   }
 
-  &:hover:not(:disabled), &:active {
+  &:hover:not(:disabled), &:active, &.active {
     background: $blue-100;
   }
 }
@@ -98,7 +99,7 @@
     background: $red-50;
   }
 
-  &:hover:not(:disabled), &:active {
+  &:hover:not(:disabled), &:active, &.active {
     background: $red-100;
   }
 }

website/client/assets/scss/page.scss

@@ -1,3 +1,7 @@
+html {
+  overflow-x: hidden;
+}
+
 html, body {
   height: 100%;
   background: $gray-700;

website/client/components/appHeader.vue

@@ -1,24 +1,26 @@
 <template lang="pug">
 #app-header.row
   member-details(:member="user", @click="$router.push({name: 'avatar'})")
+  .view-party
+    // TODO button should open the party members modal
+    router-link.btn.btn-primary(:active-class="''", :to="{name: 'party'}") {{ $t('viewParty') }}
   .party-members.d-flex(v-if="partyMembers && partyMembers.length > 1")
     member-details(
-      v-for="member in partyMembers",
+      v-for="(member, $index) in partyMembers",
       :key="member._id",
-      v-if="member._id !== user._id",
+      v-if="member._id !== user._id && $index < 10",
       :member="member",
       condensed=true,
-      @click="expandMember(member._id)"
+      @onHover="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') }}
+      // TODO link to party creation or party page if partying solo
+      router-link.btn.btn-primary(:active-class="''", :to="{name: 'party'}") {{ $t('startAParty') }}
 </template>
 
 <style lang="scss" scoped>
@@ -31,6 +33,7 @@
   height: 204px;
   color: $header-color;
   flex-wrap: nowrap;
+  position: relative;
 }
 
 .no-party, .party-members {
@@ -38,7 +41,19 @@
 }
 
 .party-members {
-  overflow-x: auto;
+}
+
+.view-party {
+  position: absolute;
+  z-index: 10;
+  right: 0;
+  padding-right: 40px;
+  height: 100%;
+  background-image: linear-gradient(to right, rgba($purple-50, 0), $purple-50);
+
+  .btn {
+    margin-top: 75%;
+  }
 }
 
 .no-party {

website/client/components/memberDetails.vue

@@ -1,6 +1,10 @@
 <template lang="pug">
 .d-flex.member-details(:class="{ condensed, expanded }")
-  avatar(:member="member", @click.native="$emit('click')",)
+  avatar(:member="member", 
+    @click.native="$emit('click')", 
+    @mouseover.native="$emit('onHover')",
+    @mouseout.native="$emit('onHover')",
+  )
   .member-stats
     h3.character-name 
       | {{member.profile.name}}
@@ -31,7 +35,7 @@
   white-space: nowrap;
   margin-top: 24px;
   margin-bottom: 24px;
-  transition: all .15s ease;
+  transition: all 0.15s ease-out;
 }
 
 .member-stats {
@@ -39,7 +43,7 @@
   padding-right: 24px;
   height: auto;
   opacity: 1;
-  transition: all 0.15s ease-out;
+  transition: opacity 0.15s ease-out;
 }
 
 .member-details.condensed:not(.expanded) .member-stats {
@@ -52,18 +56,28 @@
 // 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);
+  box-shadow: 0 0 0px 9px $header-dark-background;
+  position: relative;
+  margin-bottom: 33px;
+  z-index: 8;
 
   .is-buffed {
     background-color: $purple-50;
   }
 
   .member-stats {
+    background: $header-dark-background;
+    position: absolute;
+    right: 100%;
+    height: calc(100% + 18px);
+    margin-top: -9px;
+    padding-top: 9px;
+    padding-bottom: 24px;
     padding-right: 16px;
+    padding-bottom: 14px;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    z-index: 9;
   }
 
   .progress-container > .svg-icon {
@@ -77,6 +91,7 @@
     border-radius: 0px;
     height: 10px;
     margin-top: 2px;
+    background: $purple-100;
   }
 
   .progress-container > .progress > .progress-bar {
@@ -195,12 +210,6 @@ export default {
   },
   methods: {
     percent,
-    hasClass () {
-      return this.$store.getters['members:hasClass'](this.member);
-    },
-    isBuffed () {
-      return this.$store.getters['members:isBuffed'](this.member);
-    },
   },
   computed: {
     ...mapState({
@@ -217,6 +226,12 @@ export default {
         this.member.stats.class ? this.$t(this.member.stats.class) : ''
       }`;
     },
+    isBuffed () {
+      return this.$store.getters['members:isBuffed'](this.member);
+    },
+    hasClass () {
+      return this.$store.getters['members:hasClass'](this.member);
+    },
   },
 };
 </script>