DEV: Improve user card styling extensibility (#10508)

DEV: Improve user card styling extensibility (#10508)

  • Add a metadata-row class
  • Remove wrapper tags from user-card-after-metadata and user-card-before-badges outlets
  • Correct max-height for mobile card
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs b/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs
index 68b1800..28e08da 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs
@@ -189,7 +189,7 @@
         </div>
       {{/if}}
 
-      <div class="card-row">
+      <div class="card-row metadata-row">
         {{#unless this.user.profile_hidden}}
           <div class="metadata">
             {{#if this.user.last_posted_at}}
@@ -225,7 +225,7 @@
             {{plugin-outlet name="user-card-metadata" args=(hash user=this.user)}}
           </div>
         {{/unless}}
-        {{plugin-outlet name="user-card-after-metadata" args=(hash user=this.user)}}
+        {{plugin-outlet name="user-card-after-metadata" args=(hash user=this.user) tagName=""}}
       </div>
 
       {{#if this.publicUserFields}}
@@ -243,7 +243,7 @@
         </div>
       {{/if}}
 
-      {{plugin-outlet name="user-card-before-badges" args=(hash user=this.user)}}
+      {{plugin-outlet name="user-card-before-badges" args=(hash user=this.user) tagName=""}}
 
       {{#if this.showBadges}}
         <div class="card-row">
diff --git a/app/assets/stylesheets/mobile/components/user-card.scss b/app/assets/stylesheets/mobile/components/user-card.scss
index b53613e..94ec4b1 100644
--- a/app/assets/stylesheets/mobile/components/user-card.scss
+++ b/app/assets/stylesheets/mobile/components/user-card.scss
@@ -8,7 +8,7 @@ $avatar_width: 120px;
   z-index: z("mobile-composer") + 2;
   max-width: 95vw;
   margin: 0 2.5vw;
-  max-height: 90vh;
+  max-height: 85vh; // 2.5vh margin-top and margin-bottom. 10vh top
   // avatar - names - controls
   .first-row {
     flex-wrap: wrap;

GitHub sha: ac801097

This commit appears in #10508 which was merged by davidtaylorhq.