UX: Display user and group cards over the small PM header

UX: Display user and group cards over the small PM header

diff --git a/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6 b/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6
index 7c00979..1e9160d 100644
--- a/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6
+++ b/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6
@@ -16,6 +16,7 @@ export default Ember.Mixin.create({
   cardTarget: null,
   post: null,
   isFixed: false,
+  isDocked: false,
 
   _show(username, $target) {
     // No user card for anon
@@ -123,6 +124,8 @@ export default Ember.Mixin.create({
     });
 
     this.appEvents.on(`topic-header:trigger-${id}`, (username, $target) => {
+      this.set("isFixed", true);
+      this.set("isDocked", true);
       return this._show(username, $target);
     });
   },
@@ -135,6 +138,7 @@ export default Ember.Mixin.create({
     const width = this.$().width();
     const height = 175;
     const isFixed = this.get("isFixed");
+    const isDocked = this.get("isDocked");
 
     let verticalAdjustments = 0;
 
@@ -183,9 +187,16 @@ export default Ember.Mixin.create({
               position.top = "unset";
             }
           }
+
+          if (isDocked && position.top < 44) {
+            position.top = 44;
+          }
+
           this.$().css(position);
         }
 
+        this.$().toggleClass("docked-card", isDocked);
+
         // After the card is shown, focus on the first link
         //
         // note: we DO NOT use afterRender here cause _positionCard may
@@ -209,7 +220,8 @@ export default Ember.Mixin.create({
       loading: null,
       cardTarget: null,
       post: null,
-      isFixed: false
+      isFixed: false,
+      isDocked: false
     });
   },
 
diff --git a/app/assets/stylesheets/desktop/user-card.scss b/app/assets/stylesheets/desktop/user-card.scss
index f94ae71..f787290 100644
--- a/app/assets/stylesheets/desktop/user-card.scss
+++ b/app/assets/stylesheets/desktop/user-card.scss
@@ -33,6 +33,10 @@ $user_card_background: $secondary;
     z-index: z("composer", "content") + 1;
   }
 
+  &.docked-card {
+    z-index: z("header") + 1;
+  }
+
   .card-content {
     padding: 12px 12px 0 12px;
     background: rgba($user_card_background, 0.85);

GitHub
sha: 3589f3e0

Try to group when possible:

this.setProperties({isFixed: true, isDocked: true});
1 Like

where is this 44 coming from please ? Can you make it a constant?

1 Like

Sure, I’ll make it as constant. Whenever the user-card’s top position is less than 44px the upper part of user avatar is hidden.

user-card-top

2 Likes

This is done via minor refactoring of card-contents-base mixin · discourse/discourse@1f12a37 · GitHub

1 Like