From 7350b6c6e60ee1e49a2e7c02819354bd2af4a12c Mon Sep 17 00:00:00 2001
From: Sam Saffron <sam.saffron@gmail.com>
Date: Mon, 11 Jan 2016 22:40:59 +1100
Subject: [PATCH] UX: improve user page styling

---
 .../controllers/user-private-messages.js.es6  |  4 +-
 .../discourse/templates/user/activity.hbs     |  2 +-
 .../templates/user/notifications.hbs          |  2 +-
 .../discourse/templates/user/user.hbs         |  6 ++-
 .../stylesheets/common/admin/admin_base.scss  |  2 +-
 app/assets/stylesheets/desktop/user.scss      | 39 ++++++++++++++-----
 6 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/discourse/controllers/user-private-messages.js.es6 b/app/assets/javascripts/discourse/controllers/user-private-messages.js.es6
index c51bf407297..09dc372daa9 100644
--- a/app/assets/javascripts/discourse/controllers/user-private-messages.js.es6
+++ b/app/assets/javascripts/discourse/controllers/user-private-messages.js.es6
@@ -3,9 +3,9 @@ import Topic from 'discourse/models/topic';
 
 export default Ember.Controller.extend({
 
-  needs: ["user-topics-list"],
+  needs: ["user-topics-list", "user"],
   pmView: false,
-
+  viewingSelf: Em.computed.alias("controllers.user.viewingSelf"),
   isGroup: Em.computed.equal('pmView', 'groups'),
 
   selected: Em.computed.alias('controllers.user-topics-list.selected'),
diff --git a/app/assets/javascripts/discourse/templates/user/activity.hbs b/app/assets/javascripts/discourse/templates/user/activity.hbs
index 01bc42ee163..e94b740c9c4 100644
--- a/app/assets/javascripts/discourse/templates/user/activity.hbs
+++ b/app/assets/javascripts/discourse/templates/user/activity.hbs
@@ -1,5 +1,5 @@
 <section class='user-navigation'>
-  <ul class='action-list nav-stacked'>
+  <ul class='action-list activity-list nav-stacked'>
 
     <li class='no-glyph'>
       {{#link-to 'userActivity.index'}}{{i18n 'user.filters.all'}}{{/link-to}}
diff --git a/app/assets/javascripts/discourse/templates/user/notifications.hbs b/app/assets/javascripts/discourse/templates/user/notifications.hbs
index a6b66263d97..aece3ca5ca2 100644
--- a/app/assets/javascripts/discourse/templates/user/notifications.hbs
+++ b/app/assets/javascripts/discourse/templates/user/notifications.hbs
@@ -1,6 +1,6 @@
 
 <section class='user-navigation'>
-  <ul class='action-list nav-stacked'>
+  <ul class='notification-list action-list nav-stacked'>
     {{#if model}}
     <li class='no-glyph'>
       {{#link-to 'userNotifications.index'}}{{i18n 'user.filters.all'}}{{/link-to}}
diff --git a/app/assets/javascripts/discourse/templates/user/user.hbs b/app/assets/javascripts/discourse/templates/user/user.hbs
index d7b04557920..c8f5eec79d8 100644
--- a/app/assets/javascripts/discourse/templates/user/user.hbs
+++ b/app/assets/javascripts/discourse/templates/user/user.hbs
@@ -172,7 +172,11 @@
       {{/if}}
     </ul>
 
-    {{outlet}}
+    <div class='user-table'>
+      <div class='wrapper'>
+        {{outlet}}
+      </div>
+    </div>
 
   </section>
 </div>
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 7ef592b19d8..57e7fce2e1d 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -1532,7 +1532,7 @@ button.ru {
 
 @media all
 and (max-width : 850px) {
-  html:not(.mobile-view) .nav-stacked {
+  html:not(.mobile-view) .admin-content .nav-stacked {
     .glyph {width: auto; position: relative;}
     > li > a {padding: 13px}
   }
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 56e196f73c8..99d7c1600bd 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -79,11 +79,26 @@
   margin-top: 18px;
 }
 
+.user-table {
+  margin-top: 30px;
+  width: 100%;
+  display: table;
+  .wrapper {
+    display: table-row;
+  }
+}
+
+.user-navigation .nav-stacked .glyph {
+  float: right;
+  display: block;
+  position: static;
+}
+
 .user-navigation {
-  width: 21.62%;
-  margin-right: 1.8018%;
-  float: left;
-  margin-top: 20px;
+  display: table-cell;
+  vertical-align: top;
+  width: 170px;
+  padding-right: 50px;
 
   h3 {
     color: $primary;
@@ -161,9 +176,9 @@
   }
 
   .user-right {
-    width: 75%;
-    float: right;
+    max-width: 700px;
     margin-top: 20px;
+    display: table-cell;
   }
 
   .user-content {
@@ -654,13 +669,18 @@
 }
 
 .user-main .nav-stacked {
+  &.notification-list {
+    padding-top: 40px;
+  }
+  &.activity-list {
+    padding-top: 20px;
+  }
   background-color: transparent;
-  margin-top: 20px;
 
   > li {
     border-bottom: none;
     > a {
-      padding: 8px 8px 8px 30px;
+      padding: 8px 13px;
       color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 40%));
     }
   }
@@ -671,8 +691,9 @@
     background-color: transparent;
   }
   li > a.active:after {
-    border-left-color: none;
+    display: none;
   }
 }
 
 
+