Improve header with avatar for group and user pages

5 files changed, 45 insertions, 30 deletions

diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/generic/common.scss
index 876eea72e8a..db393e08819 100644
--- a/app/assets/stylesheets/generic/common.scss
+++ b/app/assets/stylesheets/generic/common.scss
@@ -355,3 +355,22 @@ table {
   bottom: 20px !important;
   left: 20px !important;
 }
+
+.header-with-avatar {
+  h3 {
+    margin: 0;
+    font-weight: bold;
+  }
+
+  .username {
+    font-size: 18px;
+    color: #666;
+    margin-top: 8px;
+  }
+
+  .description {
+    font-size: 16px;
+    color: #666;
+    margin-top: 8px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 81afe05162f..fbe71a5b5ad 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -41,11 +41,6 @@
   }
 }
 
-.user-show-username {
-  font-weight: 200;
-  color: #666;
-}
-
 /*
  * Appearance settings
  *
diff --git a/app/views/groups/show.html.haml b/app/views/groups/show.html.haml
index 25efe973d4f..8df9366ecbe 100644
--- a/app/views/groups/show.html.haml
+++ b/app/views/groups/show.html.haml
@@ -1,12 +1,13 @@
 .dashboard
-  %div
+  .header-with-avatar.clearfix
     = image_tag group_icon(@group), class: "avatar group-avatar s90"
-    .clearfix
-      %h2
-        = @group.name
-      - if @group.description.present?
-        %p
-          = escaped_autolink(@group.description)
+    %h3
+      = @group.name
+    .username
+      @#{@group.path}
+    - if @group.description.present?
+      .description
+        = escaped_autolink(@group.description)
   %hr
   .row
     %section.activities.col-md-8
diff --git a/app/views/users/_profile.html.haml b/app/views/users/_profile.html.haml
index a073e5048e7..bca71444956 100644
--- a/app/views/users/_profile.html.haml
+++ b/app/views/users/_profile.html.haml
@@ -25,7 +25,3 @@
       %li
         %span.light Location:
         %strong= user.location
-    - unless user.bio.blank?
-      %li
-        %span.light Bio:
-        %span= user.bio
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 6d6beb58711..fd96020d129 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -2,24 +2,28 @@
   = link_to '#aside', class: 'show-aside' do
     %i.fa.fa-angle-left
   %section.col-md-8
-    %h3.page-title
+    .header-with-avatar
       = image_tag avatar_icon(@user.email, 90), class: "avatar avatar-tile s90", alt: ''
-      = @user.name
-      - if @user == current_user
-        .pull-right
-          = link_to profile_path, class: 'btn' do
-            %i.fa.fa-pencil-square-o
-            Edit Profile settings
-      %br
-      %span.user-show-username #{@user.username}
-      %br
-      %small member since #{@user.created_at.stamp("Nov 12, 2031")}
+      %h3
+        = @user.name
+        - if @user == current_user
+          .pull-right
+            = link_to profile_path, class: 'btn btn-sm' do
+              %i.fa.fa-pencil-square-o
+              Edit Profile settings
+      .username
+        @#{@user.username}
+      .description
+        - if @user.bio.present?
+          = @user.bio
+
     .clearfix
 
     - if @groups.any?
-      %h4 Groups
-      = render 'groups', groups: @groups
-      %hr
+      .prepend-top-20
+        %h4 Groups
+        = render 'groups', groups: @groups
+        %hr
 
     .hidden-xs
       .user-calendar