clean up profile

app/assets/stylesheets/framework/blocks.scss

@@ -129,8 +129,6 @@
   position: relative;
 
   .avatar-holder {
-    margin-bottom: 16px;
-
     .avatar, .identicon {
       margin: 0 auto;
       float: none;
@@ -143,9 +141,6 @@
 
   .cover-title {
     color: $gl-header-color;
-    margin: 0;
-    font-weight: normal;
-    margin-bottom: 10px;
     font-size: 23px;
 
     h1 {

app/assets/stylesheets/pages/profile.scss

@@ -93,8 +93,9 @@
 
 .profile-user-bio {
   // Limits the width of the user bio for readability.
-  max-width: 750px;
-  margin: auto;
+  max-width: 600px;
+  margin: 15px auto 0;
+  padding: 0 16px;
 }
 
 .user-avatar-button {
@@ -212,6 +213,28 @@
 }
 
 .user-profile {
+  .cover-controls a {
+    margin-left: 5px;
+  }
+  .profile-header {
+    margin: 0 auto;
+    .avatar-holder {
+      width: 90px;
+      display: inline-block;
+    }
+    .user-info {
+      display: inline-block;
+      text-align: left;
+      vertical-align: middle;
+      margin-left: 15px;
+      .handle {
+        color: $gl-gray-light;
+      }
+      .member-date {
+        margin-bottom: 4px;
+      }
+    }
+  }
   @media (max-width: $screen-xs-max) {
     .cover-block {
       padding-top: 20px;
@@ -219,14 +242,24 @@
 
     .cover-controls {
       position: static;
+      padding: 0 16px;
       margin-bottom: 20px;
+      display: -webkit-flex;
+      display: flex;
 
       .btn {
-        display: inline-block;
-        width: 46%;
+        -webkit-flex-grow: 1;
+        flex-grow: 1;
+        &:first-child {
+          margin-left: 0;
         }
       }
     }
+  }
+}
+
+.user-profile-nav {
+  margin-top: 15px;
 }
 
 table.u2f-registrations {

app/views/users/show.html.haml

@@ -16,25 +16,23 @@
         = link_to profile_path, class: 'btn btn-gray' do
           = icon('pencil')
       - elsif current_user
-        %span.report-abuse
         - if @user.abuse_report
           %button.btn.btn-danger{ title: 'Already reported for abuse',
-              data: { toggle: 'tooltip', placement: 'left', container: 'body' }}
+            data: { toggle: 'tooltip', placement: 'bottom', container: 'body' }}
             = icon('exclamation-circle')
         - else
           = link_to new_abuse_report_path(user_id: @user.id, ref_url: request.referrer), class: 'btn btn-gray',
-              title: 'Report abuse', data: {toggle: 'tooltip', placement: 'left', container: 'body'} do
+            title: 'Report abuse', data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
             = icon('exclamation-circle')
       - if current_user
-         
         = link_to user_path(@user, :atom, { private_token: current_user.private_token }), class: 'btn btn-gray' do
           = icon('rss')
         - if current_user.admin?
-           
           = link_to [:admin, @user], class: 'btn btn-gray', title: 'View user in admin area',
             data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
             = icon('users')
 
+    .profile-header
       .avatar-holder
         = link_to avatar_icon(@user, 400), target: '_blank' do
           = image_tag avatar_icon(@user, 90), class: "avatar s90", alt: ''
@@ -42,10 +40,10 @@
       .user-info
         .cover-title
           = @user.name
-        %span
+          %span.handle
             @#{@user.username}
 
-      .cover-desc
+        .cover-desc.member-date
           %span.middle-dot-divider
             Member since #{@user.created_at.to_s(:medium)}