Fix styles of account pages

src/main/scala/gitbucket/core/view/helpers.scala

@@ -222,8 +222,14 @@ object helpers extends AvatarImageProvider with LinkConverter with RequestCache
    * Generates the avatar link to the account page.
    * If user does not exist or disabled, this method returns avatar image without link.
    */
-  def avatarLink(userName: String, size: Int, mailAddress: String = "", tooltip: Boolean = false)(implicit context: Context): Html =
-    userWithContent(userName, mailAddress)(avatar(userName, size, tooltip, mailAddress))
+  def avatarLink(userName: String, size: Int, mailAddress: String = "", tooltip: Boolean = false, label: Boolean = false)
+                (implicit context: Context): Html = {
+
+    val avatarHtml = avatar(userName, size, tooltip, mailAddress)
+    val contentHtml = if(label == true) Html(avatarHtml.body + " " + userName) else avatarHtml
+
+    userWithContent(userName, mailAddress)(contentHtml)
+  }
 
   /**
     * Generates the avatar link to the account page.
@@ -232,7 +238,8 @@ object helpers extends AvatarImageProvider with LinkConverter with RequestCache
   def avatarLink(commit: JGitUtil.CommitInfo, size: Int)(implicit context: Context): Html =
     userWithContent(commit.authorName, commit.authorEmailAddress)(avatar(commit, size))
 
-  private def userWithContent(userName: String, mailAddress: String = "", styleClass: String = "")(content: Html)(implicit context: Context): Html =
+  private def userWithContent(userName: String, mailAddress: String = "", styleClass: String = "")(content: Html)
+                             (implicit context: Context): Html =
     (if(mailAddress.isEmpty){
       getAccountByUserName(userName)
     } else {

src/main/twirl/gitbucket/core/account/main.scala.html

@@ -3,29 +3,37 @@
 @import context._
 @import gitbucket.core.view.helpers._
 @html.main(account.userName){
-  <div class="container body">
-    <div class="main-sidebar">
-      <div class="block">
-        <div class="account-image">@avatar(account.userName, 240)</div>
-        <div class="account-fullname">@account.fullName</div>
-        <div class="account-username">@account.userName</div>
+  <div class="main-sidebar">
+    <div class="sidebar">
+      <div class="user-panel">
+        <div class="pull-left image">@avatar(account.userName, 40)</div>
+        <div class="pull-left info">
+          <p>@account.userName</p>
+          @account.fullName
+        </div>
       </div>
-      <div class="block">
+      <div style="padding-left: 10px; padding-right: 10px;">
         @if(account.url.isDefined){
-          <div><i class="octicon octicon-home"></i> <a href="@account.url">@account.url</a></div>
+          <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+            <i class="octicon octicon-home"></i> <a href="@account.url">@account.url</a>
+          </p>
         }
-        <div><i class="octicon octicon-clock"></i> <span class="muted">Joined on</span> @date(account.registeredDate)</div>
+        <p style="color: white;">
+          <i class="octicon octicon-clock"></i> Joined on @date(account.registeredDate)
+        </p>
       </div>
       @if(groupNames.nonEmpty){
-        <div>
-          <div>Groups</div>
+        <ul class="sidebar-menu">
+          <li class="header">Groups</li>
           @groupNames.map { groupName =>
-            @avatarLink(groupName, 36, tooltip = true)
+            <li>@avatarLink(groupName, 20, tooltip = true, label = true)</li>
           }
         </div>
       }
     </div>
-    <div class="main-content">
+  </div>
+  <div class="content-wrapper">
+    <div class="content body">
       <ul class="nav nav-tabs" style="margin-bottom: 5px;">
         <li@if(active == "repositories"){ class="active"}><a href="@url(account.userName)?tab=repositories">Repositories</a></li>
         @if(account.isGroupAccount){

src/main/twirl/gitbucket/core/account/menu.scala.html

@@ -1,27 +1,31 @@
 @(active: String, ssh: Boolean)(body: Html)(implicit context: gitbucket.core.controller.Context)
 @import context._
 <div class="main-sidebar">
-  <ul class="nav nav-pills nav-stacked">
-    <li@if(active=="profile"){ class="active"}>
-      <a href="@path/@loginAccount.get.userName/_edit">Profile</a>
-    </li>
-    @if(ssh){
-    <li@if(active=="ssh"){ class="active"}>
-      <a href="@path/@loginAccount.get.userName/_ssh">SSH Keys</a>
-    </li>
-    }
-    <li@if(active=="application"){ class="active"}>
-      <a href="@path/@loginAccount.get.userName/_application">Applications</a>
-    </li>
-    @gitbucket.core.plugin.PluginRegistry().getAccountSettingMenus.map { menu =>
-      @menu(context).map { link =>
-        <li@if(active==link.id){ class="active"}>
-          <a href="@path/@link.path">@link.label</a>
-        </li>
+  <div class="sidebar">
+    <ul class="sidebar-menu">
+      <li@if(active=="profile"){ class="active"}>
+        <a href="@path/@loginAccount.get.userName/_edit">Profile</a>
+      </li>
+      @if(ssh){
+      <li@if(active=="ssh"){ class="active"}>
+        <a href="@path/@loginAccount.get.userName/_ssh">SSH Keys</a>
+      </li>
       }
-    }
-  </ul>
+      <li@if(active=="application"){ class="active"}>
+        <a href="@path/@loginAccount.get.userName/_application">Applications</a>
+      </li>
+      @gitbucket.core.plugin.PluginRegistry().getAccountSettingMenus.map { menu =>
+        @menu(context).map { link =>
+          <li@if(active==link.id){ class="active"}>
+            <a href="@path/@link.path">@link.label</a>
+          </li>
+        }
+      }
+    </ul>
+  </div>
 </div>
-<div class="main-content">
-  @body
+<div class="content-wrapper">
+  <div class="content body">
+    @body
+  </div>
 </div>