Merge pull request #2924 from awesomerobot/master

new user profile page

app/assets/javascripts/discourse/templates/user/user.hbs

@@ -6,6 +6,155 @@
 {{#unless loading}}
   <div class="container">
 
+    <section class='user-main'>
+      <section {{bind-attr class="collapsedInfo :about profileBackground:has-background:no-background"}}>
+      <div class='staff-counters'>
+        {{#if number_of_flags_given}}
+          <div><span class="helpful-flags">{{number_of_flags_given}}</span>&nbsp;{{i18n user.staff_counters.flags_given}}</div>
+        {{/if}}
+        {{#if number_of_flagged_posts}}
+          <div>
+            {{#link-to 'user.flaggedPosts' this}}
+              <span class="flagged-posts">{{number_of_flagged_posts}}</span>&nbsp;{{i18n user.staff_counters.flagged_posts}}
+            {{/link-to}}
+          </div>
+        {{/if}}
+        {{#if number_of_deleted_posts}}
+          <div>
+            {{#link-to 'user.deletedPosts' this}}
+              <span class="deleted-posts">{{number_of_deleted_posts}}</span>&nbsp;{{i18n user.staff_counters.deleted_posts}}
+            {{/link-to}}
+          </div>
+        {{/if}}
+        {{#if number_of_suspensions}}
+          <div><span class="suspensions">{{number_of_suspensions}}</span>&nbsp;{{i18n user.staff_counters.suspensions}}</div>
+        {{/if}}
+        {{#if number_of_warnings}}
+          <div><span class="warnings-received">{{number_of_warnings}}</span>&nbsp;{{i18n user.staff_counters.warnings_received}}</div>
+        {{/if}}
+      </div>
+        <div class='profile-image'  {{bind-attr style="profileBackground"}}>
+
+      </div>
+        <div class='details'>
+          <div class='primary'>
+
+
+            {{bound-avatar model "huge"}}
+
+            <section class='controls'>
+
+            <ul>
+
+              {{#if can_send_private_message_to_user}}
+              <li>
+                <a class='btn btn-primary right' {{action "composePrivateMessage"}}>
+                  <i class='fa fa-envelope'></i>
+                  {{i18n user.private_message}}
+                </a>
+              </li>
+              {{/if}}
+
+              {{#if viewingSelf}}
+              <li>
+                <a {{action "logout"}} class='btn btn-danger right'><i class='fa fa-sign-out'></i>{{i18n user.log_out}}</a>
+              </li>
+              {{/if}}
+
+              {{#if currentUser.staff}}
+              <li>
+                <a {{bind-attr href="adminPath"}} class='btn right'><i class="fa fa-wrench"></i>{{i18n admin.user.show_admin_profile}}</a>
+              </li>
+              {{/if}}
+
+              {{#if can_edit}}
+              <li>
+                {{#link-to 'preferences' class="btn right"}}<i class='fa fa-cog'></i>{{i18n user.preferences}}{{/link-to}}
+              </li>
+              {{/if}}
+
+              {{#if canInviteToForum}}
+              <li>
+                {{#link-to 'user.invited' class="btn right"}}<i class='fa fa-envelope-o'></i>{{i18n user.invited.title}}{{/link-to}}
+              </li>
+              {{/if}}
+
+            </ul>
+
+            </section>
+
+            <div class="primary-textual">
+              <h1>{{username}} {{{statusIcon}}}</h1>
+              <h2>{{name}}</h2>
+              <h3>
+
+              {{#if location}}
+                <i class="fa fa-map-marker"></i>
+                {{location}}
+              {{/if}}
+
+              {{#if websiteName}}
+                <i class="fa fa-globe"></i>
+                  {{#if linkWebsite}}
+                    <a {{bind-attr href="website"}} rel="nofollow" target="_blank">{{websiteName}}</a>
+                  {{else}}
+                    <span {{bind-attr title="website"}}>{{websiteName}}</span>
+                  {{/if}}
+              {{/if}}
+
+              </h3>
+
+              <div class='bio'>
+                {{#if isSuspended}}
+                  <div class='suspended'>
+                    <i class='fa fa-ban'></i>
+                    <b>{{i18n user.suspended_notice date="suspendedTillDate"}}</b><br/>
+                    <b>{{i18n user.suspended_reason}}</b> {{suspend_reason}}
+                  </div>
+                {{/if}}
+                {{{bio_cooked}}}
+              </div>
+
+              {{plugin-outlet "user-profile-primary"}}
+
+
+            </div>
+
+          </div>
+
+        <div style='clear: both'></div>
+        </div>
+
+        <div class='secondary'>
+          <dl>
+
+            {{#if created_at}}
+              <dt>{{i18n user.created}}</dt><dd>{{bound-date created_at}}</dd>
+            {{/if}}
+            {{#if last_posted_at}}
+              <dt>{{i18n user.last_posted}}</dt><dd>{{bound-date last_posted_at}}</dd>
+            {{/if}}
+            {{#if last_seen_at}}
+              <dt>{{i18n user.last_seen}}</dt><dd>{{bound-date last_seen_at}}</dd>
+            {{/if}}
+            {{#if invited_by}}
+              <dt>{{i18n user.invited_by}}</dt><dd>{{#link-to 'user' invited_by}}{{invited_by.username}}{{/link-to}}</dd>
+            {{/if}}
+            <dt>{{i18n user.trust_level}}</dt><dd>{{trustLevel.name}}</dd>
+            {{#if canCheckEmails}}
+              <dt>{{i18n user.email.title}}</dt>
+              <dd {{bind-attr title="email"}}>
+                {{#if email}}
+                  {{email}}
+                {{else}}
+                  <button class="btn btn-primary" title="{{i18n admin.users.check_email.title}}" {{action "checkEmail" this}}>{{fa-icon "envelope-o"}} {{i18n admin.users.check_email.text}}</button>
+                {{/if}}
+              </dd>
+            {{/if}}
+          </dl>
+          {{plugin-outlet "user-profile-secondary"}}
+        </div>
+      </section>
     <section class='user-navigation'>
 
       <ul class='action-list nav-stacked'>
@@ -64,133 +213,10 @@
 
     </section>
 
-    <section class='user-main'>
-      <section {{bind-attr class="collapsedInfo :about"}} {{bind-attr style="profileBackground"}}>
-
-        <div class='details'>
-          <div class='primary'>
-            <div class='staff-counters'>
-              {{#if number_of_flags_given}}
-                <div><span class="pill helpful-flags">{{number_of_flags_given}}</span>&nbsp;{{i18n user.staff_counters.flags_given}}</div>
-              {{/if}}
-              {{#if number_of_flagged_posts}}
-                <div>
-                  {{#link-to 'user.flaggedPosts' this}}
-                    <span class="pill flagged-posts">{{number_of_flagged_posts}}</span>&nbsp;{{i18n user.staff_counters.flagged_posts}}
-                  {{/link-to}}
-                </div>
-              {{/if}}
-              {{#if number_of_deleted_posts}}
-                <div>
-                  {{#link-to 'user.deletedPosts' this}}
-                    <span class="pill deleted-posts">{{number_of_deleted_posts}}</span>&nbsp;{{i18n user.staff_counters.deleted_posts}}
-                  {{/link-to}}
-                </div>
-              {{/if}}
-              {{#if number_of_suspensions}}
-                <div><span class="pill suspensions">{{number_of_suspensions}}</span>&nbsp;{{i18n user.staff_counters.suspensions}}</div>
-              {{/if}}
-              {{#if number_of_warnings}}
-                <div><span class="pill warnings-received">{{number_of_warnings}}</span>&nbsp;{{i18n user.staff_counters.warnings_received}}</div>
-              {{/if}}
-            </div>
-
-            {{bound-avatar model "huge"}}
-
-            <div class="primary-textual">
-              <h1>{{username}} {{{statusIcon}}}</h1>
-              <h2>{{name}}</h2>
-
-              <div class='bio'>{{{bio_cooked}}}</div>
-
-              {{groups-list groups=custom_groups}}
-
-              {{plugin-outlet "user-profile-primary"}}
-
-              {{#if isSuspended}}
-                <div class='suspended'>
-                  <i class='fa fa-ban'></i>
-                  <b>{{i18n user.suspended_notice date="suspendedTillDate"}}</b><br/>
-                  <b>{{i18n user.suspended_reason}}</b> {{suspend_reason}}
-                </div>
-              {{/if}}
-            </div>
-          </div>
-
-          <div class='secondary'>
-            <dl>
-              {{#if location}}
-                <dd><i class="fa fa-map-marker"></i> {{location}}</dd>
-              {{/if}}
-              {{#if websiteName}}
-                <dt>{{i18n user.website}}</dt>
-                <dd>
-                  {{#if linkWebsite}}
-                    <a {{bind-attr href="website"}} rel="nofollow" target="_blank">{{websiteName}}</a>
-                  {{else}}
-                    <span {{bind-attr title="website"}}>{{websiteName}}</span>
-                  {{/if}}
-                </dd>
-              {{/if}}
-              {{#if created_at}}
-                <dt>{{i18n user.created}}</dt><dd>{{bound-date created_at}}</dd>
-              {{/if}}
-              {{#if last_posted_at}}
-                <dt>{{i18n user.last_posted}}</dt><dd>{{bound-date last_posted_at}}</dd>
-              {{/if}}
-              {{#if last_seen_at}}
-                <dt>{{i18n user.last_seen}}</dt><dd>{{bound-date last_seen_at}}</dd>
-              {{/if}}
-              {{#if invited_by}}
-                <dt>{{i18n user.invited_by}}</dt><dd>{{#link-to 'user' invited_by}}{{invited_by.username}}{{/link-to}}</dd>
-              {{/if}}
-              {{#if canCheckEmails}}
-                <dt>{{i18n user.email.title}}</dt>
-                <dd {{bind-attr title="email"}}>
-                  {{#if email}}
-                    {{email}}
-                  {{else}}
-                    <button class="btn" title="{{i18n admin.users.check_email.title}}" {{action "checkEmail" this}}>{{fa-icon "envelope-o"}} {{i18n admin.users.check_email.text}}</button>
-                  {{/if}}
-                </dd>
-              {{/if}}
-              <dt>{{i18n user.trust_level}}</dt><dd>{{trustLevel.name}}</dd>
-            </dl>
-            {{plugin-outlet "user-profile-secondary"}}
-          </div>
-
-          <div style='clear: both'></div>
-        </div>
-
-        <section class='controls'>
-          {{#if can_send_private_message_to_user}}
-            <button class='btn btn-primary' {{action "composePrivateMessage"}}>
-              <i class='fa fa-envelope'></i>
-              {{i18n user.private_message}}
-            </button>
-          {{/if}}
-
-          {{#if viewingSelf}}
-            <button {{action "logout"}} class='btn btn-danger right'><i class='fa fa-sign-out'></i>{{i18n user.log_out}}</button>
-          {{/if}}
-
-          {{#if currentUser.staff}}
-            <a {{bind-attr href="adminPath"}} class='btn right'><i class="fa fa-wrench"></i>{{i18n admin.user.show_admin_profile}}</a>
-          {{/if}}
-
-          {{#if can_edit}}
-            {{#link-to 'preferences' class="btn right"}}<i class='fa fa-cog'></i>{{i18n user.preferences}}{{/link-to}}
-          {{/if}}
-
-          {{#if canInviteToForum}}
-            {{#link-to 'user.invited' class="btn right"}}<i class='fa fa-envelope-o'></i>{{i18n user.invited.title}}{{/link-to}}
-          {{/if}}
-
-        </section>
-      </section>
-
     {{outlet userOutlet}}
+
     </section>
 
+
   </div>
 {{/unless}}

app/assets/stylesheets/desktop/user.scss

@@ -6,6 +6,26 @@
   }
 }
 
+.has-background .details {
+}
+
+
+
+.profile-image {
+  height: 250px;
+  width: 100%;
+  background-size: cover;
+  transition: height .15s linear;
+}
+
+
+.no-background {
+  .profile-image {
+    height: 0;
+  }
+
+}
+
 .user-preferences {
   input.category-group {
     width: 500px;
@@ -87,6 +107,7 @@
   width: 21.62%;
   margin-right: 1.8018%;
   float: left;
+  margin-top: 20px;
 
   h3 {
     color: $primary;
@@ -97,7 +118,7 @@
 
 .user-main {
 
-  width: 76.5765%;
+  width: 100%;
   float: left;
   margin-bottom: 50px;
 
@@ -132,6 +153,10 @@
     background-color: $secondary;
     border: 1px solid scale-color-diff();
     margin-bottom: 10px;
+    box-sizing: border-box;
+    width: 75%;
+    float: right;
+    margin-top: 20px;
 
     .btn.right {
       float: right
@@ -159,19 +184,49 @@
   }
 
   .about {
-    background-color: dark-light-diff($primary, $secondary, 0%, -75%);
+    background-size: 1110px 250px;
-    background-size: cover;
     background-position: center center;
-
+    width: 100%;
     margin-bottom: 10px;
     overflow: hidden;
     color: $secondary;
 
+  .secondary {
+    background: dark-light-diff($primary, $secondary, 90%, -65%);
+    font-size: 13px;
+      .btn { padding: 3px 12px; }
+
+      dl dd {
+        display: inline;
+        margin: 0 15px 0 5px;
+        padding: 0;
+      }
+
+      dl dt {
+        display: inline-block;
+      }
+
+      dl {
+        padding: 10px 15px;
+        margin: 0;
+      }
+
+      dd {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: $primary;
+      }
+
+      dt {
+        color: dark-light-diff($secondary, $primary, 50%, -40%);
+        margin: 0;
+      }
+    }
 
     .details {
-      text-align: center;
+      padding: 15px 15px 4px 15px;
-      padding: 12px;
+      background-color: $primary;
-
+      transition: margin .15s linear;
 
       h1 {
         font-size: 30px;
@@ -179,23 +234,33 @@
       }
 
       h2 {
-        font-size: 20px;
+        font-size: 17px;
-        margin-bottom: 6px;
         font-weight: normal;
-        margin-top: 5px;
+        margin-top: 10px;
         max-width: 100%;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
 
-      a[href] {
+      h3 {
-        color: dark-light-diff($secondary, $primary, 75%, -10%);
+        font-weight: normal;
+        font-size: 14px;
+        margin: 5px 0;
+        i:not(:first-of-type) {
+          margin-left: 10px;
+        }
+      }
 
+      .groups {
+        margin-left: 10px;
+        display: inline;
         }
 
       img.avatar {
-        margin-bottom: 10px;
+        margin: 0 20px 10px 0;
+        float: left;
+        transition: all .1s linear;
       }
 
       .suspended {
@@ -203,61 +268,48 @@
       }
 
       .primary {
+        width: 100%;
         position: relative;
         float: left;
-        width: 71%;
         color: dark-light-diff($secondary, $primary, 75%, 0%);
-        text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
 
-        h1, h2 {font-weight: bold;}
+        h1 {font-weight: bold;}
 
         .primary-textual {
           padding: 3px;
+          a[href] {
+            color: dark-light-diff($secondary, $primary, 75%, -10%);
+
+          }
         }
 
         .bio {
           color: dark-light-diff($secondary, $primary, 75%, 0%);
-          text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
           max-height: 300px;
           overflow: auto;
+          max-width: 750px;
 
           a[href] {
             color: dark-light-diff($secondary, $primary, 75%, 0%);
             text-decoration: underline;
-            text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
           }
 
           img {
             max-width: 100%;
           }
         }
-
-      }
-
-      .secondary {
-        float: right;
-        background-color: rgba(dark-light-diff($primary, $secondary, 20%, -85%), .9);
-        text-align: right;
-        padding: 0 10px;
-        max-width: 20%;
-
-        dd {
-          margin: 0 0 7px 0;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          color: dark-light-diff($secondary, $primary, 75%, -10%);
-
-        }
-        dt {
-          color: dark-light-diff($secondary, $primary, 50%, -40%);
-          margin: 0;
-        }
       }
     }
 
     .controls {
-      padding: 12px;
+      padding: 0 0 12px 0;
-      height: 30px;
+      float: right;
+      ul {list-style-type: none;}
+      a {
+        padding: 5px 10px;
+        width: 140px;
+        margin-bottom: 10px;
+        }
 
       .right {
         float: right;
@@ -269,20 +321,36 @@
   .about.collapsed-info {
     .controls {
       margin-top: 0;
+      ul {
+        li {display: inline;}
+        a {
+          padding: 5px 10px;
+          margin-bottom: 10px;
+          width: auto;
+          }
+      }
     }
 
     .staff-counters {
       display: none;
     }
 
-    .details {
     .secondary { display: none; }
+
+    .profile-image {
+      height: 0;
+    }
+
+    .details {
+      padding: 12px 15px 2px 15px;
+      margin-top: 0;
+      background: rgba($primary, 1);
       .bio { display: none; }
 
       .primary {
-        width: 100%;
         text-align: left;
         margin-top: 0;
+        width: 100%;
 
         .avatar {
           float: left;
@@ -293,20 +361,24 @@
 
         h1 {
           font-size: 20px;
-          line-height: 22px;
         }
 
         h2 {
-          font-size: 17px;
+          font-size: 15px;
-          line-height: 20px;
           margin-top: 4px;
         }
+
+        h3 {
+          display: none;
+        }
       }
     }
   }
 
 
   .user-stream {
+      float: right;
+      width: 75%;
     .excerpt {
       margin: 5px 0;
       font-size: 13px;
@@ -401,11 +473,26 @@
 
   .staff-counters {
     text-align: left;
-    position: absolute;
+    background: $primary;
+    padding: 7px 0;
+    display: inline;
     > div {
-      margin-bottom: 10px;
+      margin: 0 10px 0 0;
+      display: inline-block;
+      padding: 5px 0;
+      &:first-of-type {
+        padding-left: 10px;
         }
-    a.active {
+      span {
+        padding: 1px 5px;
+        border-radius: 10px;
+        }
+
+    }
+    a {
+      color: $secondary;
+    }
+    .active {
       font-weight: bold;
     }
   }
@@ -468,3 +555,22 @@
     margin-bottom: 10px;
   }
 }
+
+.paginated-topics-list {
+  float: right;
+  width: 75%;
+  margin-top: 20px;
+
+    .topic-list > tbody > tr:nth-child(odd)  {
+      background-color: darken($secondary, 3%);
+      }
+
+    .topic-list > tbody > tr:nth-child(even) {
+      background-color: $secondary;
+      }
+
+    .user-content {
+        width: 100%;
+        margin-top: 0;
+      }
+}

app/assets/stylesheets/mobile/user.scss

@@ -66,129 +66,296 @@
   .bio-composer #wmd-quote-post {
     display: none;
   }
+
+  #pagedown-editor {
+    width: 100%;
   }
 
-#about-me {
+  textarea {width: 100%;}
-  padding: 4px;
+}
-  margin: -4px;
+
-  display: block;
+.profile-image {
-  width: 220px;
+  height: 150px;
-  min-height: 200px;
+  width: 100%;
-  background-color: scale-color-diff();
+  background-size: cover;
+}
+
+
+.groups {
+  .group-link {
+    color: $tertiary;
+  }
+}
+
+.hasBackground .details {margin-top: 200px;
+}
+
+.user-preferences {
+  input.category-group {
+  }
+
+  .autocomplete .badge-category {
+    margin: 2px;
+    font-weight: normal;
+  }
+
+  .autocomplete .badge-category.selected {
+    font-weight: bold;
+  }
+
+  textarea {
+    height: 100px;
+  }
+
+  input[type=text] {
+    @include small-width {
+    }
+  }
+
+  .bio-composer #wmd-quote-post {
+    display: none;
+  }
+
+  .static {
     color: $primary;
-  word-wrap: break-word;
+    display: inline-block;
+  }
+  .instructions {
+    color: scale-color($primary, $lightness: 50%);
+    margin-top: 5px;
+    margin-bottom: 10px;
+    font-size: 80%;
+    line-height: 1.4em;
+  }
+  .avatar {
+    margin-left: 3px;
+  }
+  .instructions a[href] {
+    color: $tertiary;
+  }
+  .warning {
+    background-color: scale-color($danger, $lightness: 30%);
+    padding: 5px 8px;
+    color: $secondary;
+  }
+
+}
+
+.form-horizontal .control-group.other {
+  margin-bottom: 0;
+}
+
+.form-horizontal .control-group.category {
+  margin-top: 18px;
 }
 
 .user-navigation {
+  width: 100%;
+  margin-right: 1.8018%;
+  margin-top: 20px;
 
   h3 {
-    color: scale-color($primary, $lightness: 50%);
+    color: $primary;
-    padding-left: 5px;
+    margin: 20px 0 10px 0;
-  }
-  .nav-stacked {
-    border-left: 0;
-    border-right: 0;
   }
 
 }
 
 .user-main {
-  clear: both;
+
+  width: 100%;
+  float: left;
   margin-bottom: 50px;
 
+
+  table.group-members {
+    width: 100%;
+    p {
+      max-width: 600px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    th.seen {
+      text-align: right;
+    }
+    td.avatar {
+      width: 60px;
+    }
+    td {
+      img {
+        margin-right: 10px;
+      }
+      span.last-seen-at {
+        float: right;
+        color: $primary;
+      }
+    }
+  }
+
+  .user-content {
+    padding: 10px 8px;
+    background-color: $secondary;
+    border: 1px solid scale-color-diff();
+    margin-bottom: 10px;
+    box-sizing: border-box;
+    margin-top: 20px;
+
+    .btn.right {
+      float: right
+    }
+
+    h2 {
+      margin-bottom: 10px;
+    }
+
+    table {
+      width: 100%;
+      margin-top: 10px;
+
+      th {
+        text-align: left;
+        border-bottom: 1px solid scale-color-diff();
+        padding: 5px;
+      }
+
+      td {
+        padding: 5px;
+        border-bottom: 1px solid scale-color-diff();
+      }
+    }
+  }
+
   .about {
-    background-color: scale-color-diff();
+    background-color: dark-light-diff($primary, $secondary, 0%, -75%);
-    background-position: center center;
     background-size: cover;
+    background-position: center center;
+    width: 100%;
     margin-bottom: 10px;
     overflow: hidden;
+    color: $secondary;
+
+  .secondary {
+    background: dark-light-diff($primary, $secondary, 90%, -65%);
+    font-size: 13px;
+      .btn { padding: 3px 12px; }
+
+      dl dd {
+        display: inline;
+        margin: 0 15px 0 5px;
+        padding: 0;
+      }
+
+      dl dt {
+        display: inline-block;
+      }
+
+      dl {
+        padding: 10px 15px;
+        margin: 0;
+      }
+
+      dd {
+        overflow: hidden;
+        text-overflow: ellipsis;
         color: $primary;
+      }
+
+      dt {
+        color: dark-light-diff($secondary, $primary, 50%, -40%);
+        margin: 0;
+      }
+    }
 
     .details {
-      text-align: center;
+      padding: 15px 15px 4px 15px;
-      padding: 10px;
+      background-color: rgba($primary, .9);
 
       h1 {
         font-size: 30px;
         font-weight: normal;
+        margin: 10px 0 0 0;
       }
 
       h2 {
-        font-size: 20px;
+        font-size: 17px;
-        margin-bottom: 6px;
         font-weight: normal;
+        margin-top: 10px;
         max-width: 100%;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
 
-      a[href] {
+      h3 {
-        color: $primary;
+        font-weight: normal;
+        font-size: 14px;
+        margin: 5px 0;
+        i:not(:first-of-type) {
+          margin-left: 10px;
+        }
+      }
+
+      .groups {
+        margin-left: 10px;
+        display: inline;
         }
 
       img.avatar {
-        border: 3px solid scale-color-diff();
+        float: left;
-        margin-bottom: 4px;
+      }
+
+      .suspended {
+        color: $danger;
       }
 
       .primary {
-        color: $secondary;
+        width: 100%;
-        text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
+        position: relative;
-        max-height: 800px;
+        float: left;
+        color: dark-light-diff($secondary, $primary, 75%, 0%);
+
+        h1 {font-weight: bold;}
+
+        .primary-textual {
+          float: left;
+          a[href] {
+            color: dark-light-diff($secondary, $primary, 75%, -10%);
+
+          }
+        }
+
+        .bio {
+          color: dark-light-diff($secondary, $primary, 75%, 0%);
+          max-height: 300px;
           overflow: auto;
+          max-width: 700px;
 
           a[href] {
-          color: $secondary;
+            color: dark-light-diff($secondary, $primary, 75%, 0%);
             text-decoration: underline;
-          text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
           }
 
           img {
             max-width: 100%;
           }
-
-        .primary-textual {
-          width: 90%;
-          margin: 0 auto;
-          padding: 4px;
-
-          h1, h2 {
-            margin: 7px;
-          }
-        }
-      }
-
-      .secondary {
-        background-color: $primary;
-        text-align: left;
-        padding: 1px 10px;
-
-        dd {
-          color: $secondary;
-          margin: 0 0 7px 0;
-          a {
-            color: inherit;
-          }
-          .btn {
-            float: none;
-          }
-        }
-        dt {
-          color: scale-color($primary, $lightness: 75%);
-          margin: 0;
         }
       }
     }
 
     .controls {
-      background-color: scale-color($primary, $lightness: 75%);
+      padding: 0 0 12px 0;
-      margin-top: 0;
+      float: right;
-      padding: 10px 10px 0 10px;
+      ul {list-style-type: none;}
-
+      a {
-      .btn {
+        padding: 5px 10px;
+        width: 140px;
         margin-bottom: 10px;
-        float: none;
+        }
+
+      .right {
+        float: right;
+        margin-left: 5px;
       }
     }
   }
@@ -196,68 +363,84 @@
   .about.collapsed-info {
     .controls {
       margin-top: 0;
+
+    }
+
+    .staff-counters {
+      display: none;
+    }
+    .secondary { display: none; }
+
+  .profile-image {
+    height: 0;
   }
 
     .details {
-      .secondary { display: none; }
+      padding: 12px 15px 2px 15px;
+      margin-top: 0;
+      background: rgba($primary, 1);
       .bio { display: none; }
 
       .primary {
-        width: 100%;
         text-align: left;
-        margin-top: 4px;
+        margin-top: 0;
+        width: 100%;
 
         .avatar {
           float: left;
           margin-right: 10px;
-          border: 2px solid $tertiary;
           width: 45px;
           height: 45px;
         }
 
         h1 {
-          margin:0;
           font-size: 20px;
-          line-height: 22px;
         }
 
         h2 {
-          font-size: 17px;
+          font-size: 15px;
-          line-height: 16px;
           margin-top: 4px;
         }
+
+        h3 {
+          display: none;
+        }
       }
     }
   }
 
+
   .user-stream {
+    .end-of-stream {
+      width: auto;
+      }
     .excerpt {
       margin: 5px 0;
       font-size: 13px;
       word-wrap: break-word;
-      color: scale-color($primary, $lightness: 50%);
+      color: $primary;
     }
     .item.moderator-action {
-      background-color:  scale-color($highlight, $lightness: 50%);
+      background-color: dark-light-diff($highlight, $secondary, 50%, -10%);
     }
     .item.deleted {
       opacity: 0.8;
-      background-color: scale-color($danger, $lightness: 50%);
+      background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -10%);
     }
     .item.hidden {
       display: block;
       opacity: 0.4;
     }
     .item {
-      padding: 10px 8px;
+      padding: 20px 0 15px 0;
       background-color: $secondary;
       border-bottom: 1px solid scale-color-diff();
     }
     .type {
-      color: scale-color($primary, $lightness: 50%);
+      color: $primary;
     }
     span.name {
-      color: scale-color($primary, $lightness: 50%);
+      color: $primary;
     }
     .time, .delete-info {
       display: block;
@@ -271,55 +454,83 @@
     }
     .avatar-link {
       float: left;
-      margin-right: 10px;
+      margin-right: 4px;
     }
     .title {
       display: block;
-      margin-bottom: 4px;
       font-size: 14px;
+      max-width: 80%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .name {
+      display: block;
+      font-size: 14px;
+      max-width: 400px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     .edit-reason {
-      background-color: scale-color($highlight, $lightness: 50%);
+      background-color: scale-color($highlight, $lightness: 25%);
       padding: 3px 5px 5px 5px;
     }
     .remove-bookmark {
-      float: right !important;
+      float: right;
-      margin-top: -8px;
+      margin-top: -4px;
     }
     .notification {
-      padding: 0 8px;
+      &.unread {
+        background-color: dark-light-diff($tertiary, $secondary, 90%, -60%);
+      }
+
       li { display: inline-block; }
       p {
         display: inline-block;
-        margin: 7px;
+        margin-left: 10px;
         span {
           color: $primary;
         }
       }
       .time {
         display: inline-block;
-        margin: 0;
+        margin-left: 10px;
         float: none;
       }
       // common/base/header.scss
       .fa, .icon {
         color: scale-color($primary, $lightness: 50%);
+        font-size: 24px;
       }
     }
   }
 
   .staff-counters {
-    text-align: center;
+    text-align: left;
-    div {
+    background: $primary;
-      padding: 2px 8px;
+    padding: 7px 0;
-      margin-bottom: 10px;
+    display: inline;
+    > div {
+      margin: 0 10px 0 0;
       display: inline-block;
+      padding: 5px 0;
+      &:first-of-type {
+        padding-left: 10px;
         }
-    a.active {
+      span {
+        padding: 1px 5px;
+        border-radius: 10px;
+        }
+
+    }
+    a {
+      color: $secondary;
+    }
+    .active {
       font-weight: bold;
     }
   }
-
   .pill {
     border-radius: 15px;
     display: inline-block;
@@ -335,6 +546,9 @@
   .flagged-posts {
     background-color: #E49735;
   }
+  .warnings-received {
+    background-color: #EC441B;
+  }
   .deleted-posts {
     background-color: #EC441B;
   }
@@ -342,12 +556,53 @@
     background-color: #c22020;
   }
 
-  div#pagedown-editor {
+  .user-field.text {
-    width: 100%;
+    padding-top: 18px;
   }
 
-  textarea#wmd-input {
+  .user-field {
-    width: 100%;
+    label {
+      width: 140px;
+      float: left;
+      text-align: right;
+      font-weight: bold;
+    }
+    input[type=text] {
+      width: 530px;
+    }
+    .controls {
+      label {
+        width: auto;
+        text-align: left;
+        font-weight: normal;
+        float: auto;
+      }
+      p {
+        color: scale-color($primary, $lightness: 50%);
+        margin-top: 5px;
+        margin-bottom: 10px;
+        font-size: 80%;
+        line-height: 1.4em;
+      }
+    }
+    clear: both;
+    margin-bottom: 10px;
+  }
 }
 
+.paginated-topics-list {
+  margin-top: 20px;
+
+    .topic-list > tbody > tr:nth-child(odd)  {
+      background-color: darken($secondary, 3%);
+      }
+
+    .topic-list > tbody > tr:nth-child(even) {
+      background-color: $secondary;
+      }
+
+    .user-content {
+        width: 100%;
+        margin-top: 0;
+      }
 }