UX: improve user page styling

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'),

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}}

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}}

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>

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}
   }

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;
   }
 }
 
 
+