Partly implement new UI for user page

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/stylesheets/framework/blocks.scss

@@ -60,3 +60,48 @@
     line-height: 42px;
   }
 }
+
+.cover-block {
+  text-align: center;
+  background: #f7f8fa;
+  margin: -$gl-padding;
+  margin-bottom: 0;
+  padding: 44px $gl-padding;
+  border-bottom: 1px solid $border-color;
+  position: relative;
+
+  .avatar-holder {
+    margin-bottom: 16px;
+
+    .avatar, .identicon {
+      margin: 0 auto;
+      float: none;
+    }
+
+    .identicon {
+      @include border-radius(50%);
+    }
+  }
+
+  .cover-title {
+    color: $gl-header-color;
+    margin: 0;
+    font-size: 23px;
+    font-weight: normal;
+    margin: 16px 0 5px 0;
+    color: #4c4e54;
+    font-size: 23px;
+    line-height: 1.1;
+  }
+
+  .cover-desc {
+    padding: 0 $gl-padding;
+    color: $gl-text-color;
+  }
+
+  .cover-controls {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+}

app/assets/stylesheets/pages/profile.scss

@@ -47,3 +47,9 @@
     }
   }
 }
+
+.calendar-hint {
+  margin-top: -12px;
+  float: right;
+  font-size: 12px;
+}

app/views/admin/users/show.html.haml

@@ -14,7 +14,7 @@
           %strong
             = link_to user_path(@user) do
               = @user.username
-    = render 'users/profile', user: @user
+    = render 'admin/users/profile', user: @user
 
     .panel.panel-default
       .panel-heading

app/views/users/calendar.html.haml

-%h4
-  Contributions calendar
-  .pull-right
-    %small Issues, merge requests and push events
 #cal-heatmap.calendar
   :javascript
     new Calendar(
@@ -10,3 +6,5 @@
       #{@starting_month},
       '#{user_calendar_activities_path}'
     );
+
+.calendar-hint Summary of issues, merge requests and push events

app/views/users/show.html.haml

@@ -6,47 +6,72 @@
 
 = render 'shared/show_aside'
 
-.row
-  %section.col-md-7
-    .header-with-avatar
+.cover-block
+  .avatar-holder
     = link_to avatar_icon(@user, 400), target: '_blank' do
-        = image_tag avatar_icon(@user, 90), class: "avatar avatar-tile s90", alt: ''
-      %h3
+      = image_tag avatar_icon(@user, 90), class: "avatar s90", alt: ''
+  .cover-title
     = @user.name
+
+  .cover-desc
+    %span
+      @#{@user.username}.
+    - if @user.bio.present?
+      %span
+        #{@user.bio}.
+    %span
+      Member since #{@user.created_at.stamp("Aug 21, 2011")}
+
+  .cover-desc
+    - unless @user.public_email.blank?
+      = link_to @user.public_email, "mailto:#{@user.public_email}"
+    - unless @user.skype.blank?
+      ·
+      = link_to "Skype", "skype:#{@user.skype}"
+    - unless @user.linkedin.blank?
+      ·
+      = link_to "LinkedIn", "http://www.linkedin.com/in/#{@user.linkedin}"
+    - unless @user.twitter.blank?
+      ·
+      = link_to "Twitter", "http://www.twitter.com/#{@user.twitter}"
+    - unless @user.website_url.blank?
+      ·
+      = link_to @user.short_website_url, @user.full_website_url
+    - unless @user.location.blank?
+      ·
+      = @user.location
+
+
+  .cover-controls
     - if @user == current_user
-          .pull-right.hidden-xs
-            = link_to profile_path, class: 'btn btn-sm' do
-              = icon('user')
-              Profile settings
+      = link_to profile_path, class: 'btn btn-gray' do
+        = icon('pencil')
     - elsif current_user
-          .report_abuse.pull-right
+      .report-abuse
         - if @user.abuse_report
-              %span#report_abuse_btn.light.btn.btn-sm.btn-close{title: 'Already reported for abuse', data: {toggle: 'tooltip', placement: 'right', container: 'body'}}
+          %button.btn.btn-danger{ title: 'Already reported for abuse',
+            data: { toggle: 'tooltip', placement: 'left', container: 'body' }}
             = icon('exclamation-circle')
         - else
-              %a.light.btn.btn-sm{href: new_abuse_report_path(user_id: @user.id), title: 'Report abuse', data: {toggle: 'tooltip', placement: 'right', container: 'body'}}
+          = link_to new_abuse_report_path(user_id: @user.id), class: 'btn btn-gray',
+            title: 'Report abuse', data: {toggle: 'tooltip', placement: 'left', container: 'body'} do
             = icon('exclamation-circle')
 
-      .username
-        @#{@user.username}
-      .description
-        - if @user.bio.present?
-          = @user.bio
+.gray-content-block.second-block
+  .user-calendar
+    %h4.center.light
+      %i.fa.fa-spinner.fa-spin
+  .user-calendar-activities
 
-    .clearfix
 
+.row.prepend-top-20
+  %section.col-md-7
     - if @groups.any?
       .prepend-top-20
         %h4 Groups
         = render 'groups', groups: @groups
         %hr
 
-    .hidden-xs
-      .user-calendar
-        %h4.center.light
-          %i.fa.fa-spinner.fa-spin
-      .user-calendar-activities
-      %hr
     %h4
       User Activity
 
@@ -59,7 +84,6 @@
     .content_list
     = spinner
   %aside.col-md-5
-    = render 'profile', user: @user
     = render 'projects', projects: @projects, contributed_projects: @contributed_projects
 
 :coffeescript

features/steps/abuse_reports.rb

@@ -23,7 +23,7 @@ class Spinach::Features::AbuseReports < Spinach::FeatureSteps
   end
 
   step 'I should see a red "Report abuse" button' do
-    expect(find(:css, '.report_abuse')).to have_selector(:css, 'span.btn-close')
+    expect(page).to have_button("Already reported for abuse")
   end
 
   def user_mike