REFACTOR: user and group card CSS / template refactor (#6812)

REFACTOR: user and group card CSS / template refactor (#6812)

  • Check if user is a member of a group or if the group has members this is used in the template to conditionally show the relevant markup

  • Check if user is suspended or if they have a bio this is used in the template to conditionally show the relevant markup

  • Simplify group-card template

  • Simplify user-card template

  • Refactor user and group cards CSS

  • Check if user is new or if user is staff

  • Style fixes

  • round avatar margin
  • use a more standard margin for buttons
  • adds lighter font color for new users
  • makes some suspension text bold (used to be tags in template)
  • ensures images in group bio are responsive
  • user card template fixes
  • adds quotes to link href attributes
  • wraps some strings in tags for more consistent styling
  • group card fixes
  • adds quotes to link href attributes
  • fixes membership button login action
  • wraps some strings with tags for consistent styling
  • closure action fixes

  • closure action fix

  • uses core variables instead of new colors and removes unused styles

  • Uses better property names

diff --git a/app/assets/javascripts/discourse/components/group-card-contents.js.es6 b/app/assets/javascripts/discourse/components/group-card-contents.js.es6
index 2a73474..93f2b20 100644
--- a/app/assets/javascripts/discourse/components/group-card-contents.js.es6
+++ b/app/assets/javascripts/discourse/components/group-card-contents.js.es6
@@ -23,6 +23,11 @@ export default Ember.Component.extend(CardContentsBase, CleansUp, {
   viewingTopic: Ember.computed.match("currentPath", /^topic\./),
 
   showMoreMembers: Ember.computed.gt("moreMembersCount", 0),
+  hasMembersOrIsMember: Ember.computed.or(
+    "group.members",
+    "group.is_group_owner_display",
+    "group.is_group_user"
+  ),
 
   group: null,
 
diff --git a/app/assets/javascripts/discourse/components/user-card-contents.js.es6 b/app/assets/javascripts/discourse/components/user-card-contents.js.es6
index d13fcd1..d3fb83d 100644
--- a/app/assets/javascripts/discourse/components/user-card-contents.js.es6
+++ b/app/assets/javascripts/discourse/components/user-card-contents.js.es6
@@ -46,6 +46,10 @@ export default Ember.Component.extend(
       "user.location",
       "user.website_name"
     ),
+    isSuspendedOrHasBio: Ember.computed.or(
+      "user.suspend_reason",
+      "user.bio_cooked"
+    ),
     showCheckEmail: Ember.computed.and("user.staged", "canCheckEmails"),
 
     user: null,
@@ -53,6 +57,12 @@ export default Ember.Component.extend(
     // If inside a topic
     topicPostCount: null,
 
+    @computed("user.staff")
+    staff: isStaff => (isStaff ? "staff" : ""),
+
+    @computed("user.trust_level")
+    newUser: trustLevel => (trustLevel === 0 ? "new-user" : ""),
+
     @computed("user.name")
     nameFirst(name) {
       return (
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 ef3b6fe..f906f8b 100644
--- a/app/assets/javascripts/discourse/templates/components/group-card-contents.hbs
+++ b/app/assets/javascripts/discourse/templates/components/group-card-contents.hbs
@@ -1,72 +1,82 @@
 {{#if visible}}
   <div class="card-content">
-    <div class="group-card-avatar">
-      <a href={{groupPath}} {{action "showGroup" group}} class="card-huge-avatar">
-        {{avatar-flair
+
+    <div class="card-row first-row">
+      <div class="group-card-avatar">
+        <a href="{{groupPath}}" {{action "showGroup" group}} class="card-huge-avatar">
+          {{avatar-flair
           flairURL=group.flair_url
           flairBgColor=group.flair_bg_color
           flairColor=group.flair_color
           groupName=group.name}}
-      </a>
-    </div>
-
-    <div class="names">
-      <span>
-        <h1 class="{{ group.name }}">
-          <a href={{groupPath}} {{action "showGroup" group}}>{{ group.name }}</a>
-        </h1>
-        {{#if group.full_name}}
-          <h2 class='full-name'>{{group.full_name}}</h2>
-        {{else}}
-          <h2 class='username'>{{group.name}}</h2>
-        {{/if}}
-      </span>
-    </div>
-
-    <div class="usercard-controls group-details-button">
-      {{group-membership-button
-        model=group
-        showLogin=(route-action "showLogin")}}
-
-      {{#if group.messageable}}
-        {{d-button
+        </a>
+      </div>
+      <div class="names">
+        <span>
+          <h1 class="{{group.name}}">
+            <a href="{{groupPath}}" {{action "showGroup"}}>{{group.name}}</a>
+          </h1>
+          {{#if group.full_name}}
+            <h2 class='full-name'>{{group.full_name}}</h2>
+          {{else}}
+            <h2 class='username'>{{group.name}}</h2>
+          {{/if}}
+        </span>
+      </div>
+      <div class="usercard-controls group-details-button">
+        {{group-membership-button
+           model=group
+           showLogin=(route-action "showLogin")}}
+        {{#if group.messageable}}
+          {{d-button
           action=(action "messageGroup")
           class="btn-primary group-message-button inline"
           icon="envelope"
           label="groups.message"}}
-      {{/if}}
+        {{/if}}
+      </div>
     </div>
 
-    {{#if group.bio_cooked}}<div class='bio'>{{{group.bio_cooked}}}</div>{{/if}}
-
-    <div class="metadata">
-      <h3>
-        <span class="desc">
-          {{i18n 'groups.user_count'}}
-        </span>
-        {{ group.user_count }}
-      </h3>
-      <h3>
-        {{#if group.is_group_owner_display}}
+    {{#if group.bio_cooked}}
+      <div class="card-row second-row">
+        <div class='bio'>{{{group.bio_cooked}}}</div>
+      </div>
+    {{/if}}
 
-            {{i18n "groups.index.is_group_owner"}}
-        {{else if group.is_group_user}}
+    {{#if hasMembersOrIsMember}}
+      <div class="card-row third-row">
+        <div class="metadata">
+          <h3>
+            <span class="desc">
+              {{i18n 'groups.user_count'}}
+            </span>
+            {{group.user_count}}
+          </h3>
+          <h3>
+            {{#if group.is_group_owner_display}}
+              {{i18n "groups.index.is_group_owner"}}
+            {{else if group.is_group_user}}
+              {{i18n "groups.index.is_group_user"}}
+            {{/if}}
+          </h3>
+        </div>
+      </div>
+    {{/if}}
 
-            {{i18n "groups.index.is_group_user"}}
-        {{/if}}
-      </h3>
-    </div>
     {{#if group.members}}
-    <div class="members metadata">
-      <span>
-        {{#each group.members as |user|}}
-          <a href={{user.path}} {{action "showUser" user}} class="card-tiny-avatar">{{bound-avatar user "tiny"}}</a>
-        {{/each}}
-        {{#if showMoreMembers}}
-          <a href={{groupPath}} {{action "showGroup" group}}>+{{ moreMembersCount }} {{i18n "more"}}</a>
-        {{/if}}
-      </span>
-    </div>
+      <div class="card-row fourth-row">
+        <div class="members metadata">
+          {{#each group.members as |user|}}
+            <a href="{{user.path}}" {{action "showUser" user}} class="card-tiny-avatar">{{bound-avatar user "tiny"}}</a>
+          {{/each}}
+          {{#if showMoreMembers}}
+            <a href="{{groupPath}}" {{action "showGroup" group}} class="more-members-link"><span
+               class="more-members-count">+{{moreMembersCount}}
+                {{i18n "more"}}</span></a>
+          {{/if}}
+        </div>
+      </div>
     {{/if}}
+
   </div>
-{{/if}}
+{{/if}}
\ No newline at end of file
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 e9cb604..7242b76 100644
--- a/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
+++ b/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
@@ -1,182 +1,201 @@
 {{#if visible}}
   <div class="card-content">
-    <div class="user-card-avatar">
-      <a href={{user.path}} {{action "showUser"}} class="card-huge-avatar">{{bound-avatar user "huge"}}</a>
-      {{#if user.primary_group_name}}
-        {{avatar-flair
+
+    <div class="card-row first-row">
+      <div class="user-card-avatar">
+        <a href="{{user.path}}" {{action "showUser"}} class="card-huge-avatar">{{bound-avatar user "huge"}}</a>
+        {{#if user.primary_group_name}}
+          {{avatar-flair
           flairURL=user.primary_group_flair_url
           flairBgColor=user.primary_group_flair_bg_color
           flairColor=user.primary_group_flair_color
           groupName=user.primary_group_name}}
-      {{/if}}
-      {{plugin-outlet name="user-card-avatar-flair" args=(hash user=user) tagName='div'}}
-    </div>
-
-    <div class="names">
-      <span>
-        <h1 class="{{staff}} {{new_user}} {{if nameFirst "full-name" "username"}}">
-          <a href={{user.path}} {{action "showUser"}}>{{if nameFirst user.name (format-username username)}} {{user-status user currentUser=currentUser}}</a>
-        </h1>

[... diff too long, it was truncated ...]

GitHub sha: 6f1badc7

This commit has been mentioned on Discourse Meta. There might be relevant details there: