From 903163a65c6c49c1901a9e580eb660200238c1ee Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 8 May 2018 15:38:55 -0400
Subject: [PATCH] Updating group usercard layout

---
 .../components/group-card-contents.hbs        | 21 +++++++++++++--
 .../components/user-card-contents.hbs         |  2 ++
 app/assets/stylesheets/desktop/user-card.scss | 26 +++++++++++--------
 3 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/components/group-card-contents.hbs b/app/assets/javascripts/discourse/templates/components/group-card-contents.hbs
index 40947416471..b458965cec3 100644
--- a/app/assets/javascripts/discourse/templates/components/group-card-contents.hbs
+++ b/app/assets/javascripts/discourse/templates/components/group-card-contents.hbs
@@ -20,7 +20,6 @@
         {{else}}
           <h2 class='username'>{{group.name}}</h2>
         {{/if}}
-        <h2 class='bio'>{{{group.bio_cooked}}}</h2>
       </span>
     </div>
 
@@ -38,9 +37,26 @@
       {{/if}}
     </div>
 
+    {{#if group.bio_cooked}}<div class='bio'>{{{group.bio_cooked}}}</div>{{/if}}
+
     <div class="metadata">
-      <h3><a href={{groupPath}} {{action "showGroup"}}>{{ group.user_count }} {{i18n 'groups.user_count'}}</a></h3>
+      <h3>
+        <span class="desc">
+          {{i18n 'groups.user_count'}}
+        </span>
+        {{ group.user_count }}
+      </h3>
+      <h3>
+        {{#if group.is_group_owner}}
+
+            {{i18n "groups.index.is_group_owner"}}
+        {{else if group.is_group_user}}
+
+            {{i18n "groups.index.is_group_user"}}
+        {{/if}}
+      </h3>
     </div>
+    {{#if group.members}}
     <div class="members metadata">
       <span>
         {{#each group.members as |user|}}
@@ -51,5 +67,6 @@
         {{/if}}
       </span>
     </div>
+    {{/if}}
   </div>
 {{/if}}
diff --git a/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs b/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
index 92f8e832a47..66275c66345 100644
--- a/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
+++ b/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
@@ -156,6 +156,7 @@
     {{/if}}
 
     {{#if showBadges}}
+      {{#if user.featured_user_badges}}
       <div class="badge-section">
         {{#each user.featured_user_badges as |ub|}}
           {{user-badge badge=ub.badge user=user}}
@@ -166,6 +167,7 @@
           {{/link-to}}
         {{/if}}
       </div>
+     {{/if}}
     {{/if}}
   </div>
 {{/if}}
diff --git a/app/assets/stylesheets/desktop/user-card.scss b/app/assets/stylesheets/desktop/user-card.scss
index db50a811b3d..0f637ee1f0f 100644
--- a/app/assets/stylesheets/desktop/user-card.scss
+++ b/app/assets/stylesheets/desktop/user-card.scss
@@ -49,7 +49,7 @@ $user_card_background: $secondary;
   }
 
   .bio {
-    max-height: 200px;
+    max-height: 150px;
     overflow: auto;
   }
 
@@ -88,7 +88,8 @@ $user_card_background: $secondary;
 
   h2 {
     font-size: $font-up-1;
-    line-height: $line-height-medium;
+    line-height: $line-height-large;
+    margin: 0;
     font-weight: normal;
     display: block;
     max-width: 250px;
@@ -126,8 +127,8 @@ $user_card_background: $secondary;
   .metadata {
     width: 100%;
     clear: both;
-    padding-top: 5px;
-    padding-bottom: 5px;
+    padding-top: 10px;
+    padding-bottom: 10px;
     h3 {
       display: inline;
       margin-right: 5px;
@@ -146,7 +147,7 @@ $user_card_background: $secondary;
   }
 
   .bio {
-    padding: 10px 0 0 0;
+    margin-top: 80px;
     clear: left;
 
     a {
@@ -195,17 +196,16 @@ $user_card_background: $secondary;
     }
   }
 
-  .user-card-avatar {
+  .user-card-avatar, .group-card-avatar {
     float: left;
     margin-right: 10px;
     margin-top: -53px;
   }
 
   .group-card-avatar {
-    float: left;
-    margin-right: 10px;
-    margin-top: -5px;
-    $size: 50px;
+    $size: 120px;
+    width: $size;
+    height: $size;
     .avatar-flair {
       width: $size;
       height: $size;
@@ -217,12 +217,16 @@ $user_card_background: $secondary;
       color: $primary;
       i {
         margin: auto;
-        font-size: $size !important;
+        font-size: $size / 1.5 !important;
+      }
+      &.rounded {
+        border-radius: 50%;
       }
     }
   }
 
   .members {
+    padding: 0 0 10px 0;
     a {
       color: lighten($primary, 40%);
       &:hover {