Change users page to two column layout

app/assets/stylesheets/users.css.scss

@@ -13,12 +13,11 @@
 
 .user-profile {
   background: white;
-  padding: 20px 0;
   text-align: center;
 }
 
 .user-profile-avatar {
-  margin-bottom: $line-height-computed / 2;
+  margin: ($line-height-computed / 2) 0;
 
   img {
     width: 80px;

app/views/users/_profile.html.slim

@@ -1,18 +1,16 @@
-.user-profile
-  .container
-    .row
-      .col-md-8.col-md-push-2
-        .user-profile-avatar
-          img.img-circle alt="avatar" src=user.avatar.bigger.url
-        .user-profile-name
-          = user.name
-          '
-          span.text-muted = "@#{user.username}"
-        .user-profile-bio
-          = simple_format user.bio
+.panel.user-profile
+  .panel-body
+    .user-profile-avatar
+      img.img-rounded alt="avatar" src=user.avatar.bigger.url
+    .user-profile-name
+      = user.name
+      '
+      span.text-muted = "@#{user.username}"
+    .user-profile-bio
+      = simple_format user.bio
 
-        - if login? and user == current_user
-          .clearfix
-            .pull-right
-              a.btn.btn-default href=settings_profile_path
-                = t '.edit_profile'
+  - if login? and user == current_user
+    .panel-footer.clearfix
+      .pull-right
+        a.btn.btn-default href=settings_profile_path
+          = t '.edit_profile'

app/views/users/_sidebar.html.slim

@@ -0,0 +1,9 @@
+.list-group
+  a.list-group-item class=('active' if controller_name == 'topics') href=user_topics_path
+    .pull-right
+      i.fa.fa-chevron-right
+    = t '.topics'
+  a.list-group-item class=('active' if controller_name == 'comments') href=user_comments_path
+    .pull-right
+      i.fa.fa-chevron-right
+    = t '.comments'

app/views/users/_sub_navbar.html.slim

@@ -1,8 +0,0 @@
-.sub-navbar
-  ul.nav.sub-navbar-nav
-    li class=('active' if controller_name == 'topics')
-      a href=user_topics_path
-        = t '.topics'
-    li class=('active' if controller_name == 'comments')
-      a href=user_comments_path
-        = t '.comments'

app/views/users/comments/index.html.slim

@@ -1,12 +1,12 @@
 - @page_title = t '.user_s_comments', name: @user.name
 
-= render 'users/profile', user: @user
-= render 'users/sub_navbar'
-
 .main
   .container
     .row
-      .col-md-8.col-md-push-2
+      .col-md-3
+        = render 'users/profile', user: @user
+        = render 'users/sidebar'
+      .col-md-9
         #comments.panel
           .panel-heading.clearfix
             .pull-right

app/views/users/topics/index.html.slim

@@ -1,12 +1,12 @@
 - @page_title = t '.user_s_topics', name: @user.name
 
-= render 'users/profile', user: @user
-= render 'users/sub_navbar'
-
 .main
   .container
     .row
-      .col-md-8.col-md-push-2
+      .col-md-3
+        = render 'users/profile', user: @user
+        = render 'users/sidebar'
+      .col-md-9
         #topics.panel
           .panel-heading.clearfix
             .pull-right

config/locales/en.yml

@@ -343,7 +343,7 @@ en:
           sent.
     profile:
       edit_profile: Edit profile
-    sub_navbar:
+    sidebar:
       comments: Comments
       topics: Topics
     topics:

config/locales/zh-CN.yml

@@ -336,7 +336,7 @@ zh-CN:
         password_reset_email_has_been_sent_message: "密码重置邮件已发送，请注意查收。"
     profile:
       edit_profile: "编辑个人资料"
-    sub_navbar:
+    sidebar:
       comments: "评论"
       topics: "话题"
     topics: