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 7c00979de4c..1e9160d3f7d 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 f94ae71a903..f787290005f 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);