From affb93576040cd0591d02030fc1a17d83f1283e2 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 9 Apr 2018 14:02:43 -0400
Subject: [PATCH] Cleaning up secondary stats on user profile

---
 .../javascripts/discourse/templates/user.hbs  | 22 ++++++++++---------
 app/assets/stylesheets/common/base/user.scss  | 20 +++++++++++++++--
 app/assets/stylesheets/desktop/user.scss      | 20 -----------------
 app/assets/stylesheets/mobile/user.scss       | 13 ++---------
 4 files changed, 32 insertions(+), 43 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/user.hbs b/app/assets/javascripts/discourse/templates/user.hbs
index 92e2883a081..09e41badad3 100644
--- a/app/assets/javascripts/discourse/templates/user.hbs
+++ b/app/assets/javascripts/discourse/templates/user.hbs
@@ -151,23 +151,23 @@
       <div class='secondary'>
         <dl>
           {{#if model.created_at}}
-            <dt>{{i18n 'user.created'}}</dt><dd>{{bound-date model.created_at}}</dd>
+            <div><dt>{{i18n 'user.created'}}</dt><dd>{{bound-date model.created_at}}</dd></div>
           {{/if}}
           {{#if model.last_posted_at}}
-            <dt>{{i18n 'user.last_posted'}}</dt><dd>{{bound-date model.last_posted_at}}</dd>
+            <div><dt>{{i18n 'user.last_posted'}}</dt><dd>{{bound-date model.last_posted_at}}</dd></div>
           {{/if}}
           {{#if model.last_seen_at}}
-            <dt>{{i18n 'user.last_seen'}}</dt><dd>{{bound-date model.last_seen_at}}</dd>
+            <div><dt>{{i18n 'user.last_seen'}}</dt><dd>{{bound-date model.last_seen_at}}</dd></div>
           {{/if}}
-          <dt>{{i18n 'views'}}</dt><dd>{{model.profile_view_count}}</dd>
+          <div><dt>{{i18n 'views'}}</dt><dd>{{model.profile_view_count}}</dd></div>
           {{#if model.invited_by}}
-            <dt class="invited-by">{{i18n 'user.invited_by'}}</dt><dd class="invited-by">{{#link-to 'user' model.invited_by}}{{model.invited_by.username}}{{/link-to}}</dd>
+            <div><dt class="invited-by">{{i18n 'user.invited_by'}}</dt><dd class="invited-by">{{#link-to 'user' model.invited_by}}{{model.invited_by.username}}{{/link-to}}</dd></div>
           {{/if}}
           {{#if model.trust_level}}
-            <dt class="trust-level">{{i18n 'user.trust_level'}}</dt><dd class="trust-level">{{model.trustLevel.name}}</dd>
+            <div><dt class="trust-level">{{i18n 'user.trust_level'}}</dt><dd class="trust-level">{{model.trustLevel.name}}</dd></div>
           {{/if}}
           {{#if canCheckEmails}}
-            <dt>{{i18n 'user.email.title'}}</dt>
+            <div><dt>{{i18n 'user.email.title'}}</dt>
             <dd title={{model.email}}>
               {{#if model.email}}
                 {{model.email}}
@@ -175,10 +175,11 @@
                 {{d-button action="checkEmail" actionParam=model icon="envelope-o" label="admin.users.check_email.text" class="btn-primary"}}
               {{/if}}
             </dd>
+            </div>
           {{/if}}
 
           {{#if model.displayGroups}}
-            <dt class="groups">{{i18n 'groups.title' count=model.displayGroups.length}}</dt>
+            <div><dt class="groups">{{i18n 'groups.title' count=model.displayGroups.length}}</dt>
             <dd class='groups'>
               {{#each model.displayGroups as |group|}}
                 <span>{{#link-to 'group' group.name class="group-link"}}{{group.name}}{{/link-to}}</span>
@@ -188,10 +189,11 @@
                 ...
               {{/link-to}}
             </dd>
+            </div>
           {{/if}}
-
+          
           {{#if canDeleteUser}}
-            {{d-button action="adminDelete" icon="exclamation-triangle" label="user.admin_delete" class="btn-danger"}}
+            <div>{{d-button action="adminDelete" icon="exclamation-triangle" label="user.admin_delete" class="btn-danger"}}</div>
           {{/if}}
         </dl>
         {{plugin-outlet name="user-profile-secondary" args=(hash model=model)}}
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index 2eae6df77c8..88f744e7000 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -27,17 +27,33 @@
     width: 100%;
 
     .secondary {
+      background: $secondary;
+      border-top: 1px solid $primary-low;
+      border-bottom: 1px solid $primary-low;
 
       .btn {
-        padding: 3px 12px;
+        padding: 4px 12px;
       }
 
       dl {
         margin: 0;
+        padding: 5px 10px;
+        div {
+          display: inline-flex;
+          align-items: baseline;
+          margin-right: 15px;
+          margin: 4px 0;          
+        }
+      }
+
+      dt, dd {
+        display: inline-flex;
+        align-items: center;
       }
 
       dd {
         padding: 0;
+        margin: 0 15px 0 0;
         overflow: hidden;
         text-overflow: ellipsis;
         color: $primary;
@@ -54,7 +70,7 @@
 
       dt {
         color: $secondary-medium;
-        margin: 0;
+        margin-right: 5px;        
         display: inline-block;
       }
     }
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 7345548003e..6244b8aaf86 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -147,26 +147,6 @@
       }
     }
 
-  .secondary {
-    background: $secondary;
-    border-top: 1px solid $primary-low;
-    border-bottom: 1px solid $primary-low;
-
-      dl {
-        padding: 8px 10px;
-      }
-
-      dd {
-        display: inline;
-        margin: 0 10px 0 0;
-      }
-
-      dt {
-        margin: 0 5px 0 0;
-        padding: 0;
-      }
-    }
-
     .details {
       padding: 0 0 4px 0;
       margin-top: -200px;
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index 821844d1c72..a8cd147c22f 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -77,18 +77,9 @@ margin-top: 10px;
     }
 
     .secondary {
-      background: $primary-low;
-
       dl {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        padding: 10px;
-
-      }
-
-      dd {
-        margin: 0 15px 0 5px;
+        padding: 5px 0;
+        
       }
     }