Tweak branch list presentation

src/main/twirl/gitbucket/core/repo/branches.scala.html

@@ -4,81 +4,81 @@
 @import gitbucket.core.view.helpers
 @gitbucket.core.html.main(s"${repository.owner}/${repository.name}", Some(repository)) {
   @gitbucket.core.html.menu("branches", repository){
-    <table class="table table-bordered table-hover branches">
+    <table class="table table-hover branches">
       <thead>
         <tr>
-          <th style="background: #f5f5f5;color: #666;">All branches</th>
+          <th style="background: #f5f5f5;color: #666;" colspan="3">All branches</th>
         </tr>
       </thead>
       <tbody>
       @branchInfo.map { case (branch, prs, isProtected) =>
         <tr>
-          <td style="padding: 12px;">
-            <div class="branch-action">
-              @branch.mergeInfo.map{ info =>
-                @prs.map{ case (pull, issue) =>
-                  <a href="@helpers.url(repository)/pull/@issue.issueId" title="@issue.title">#@issue.issueId</a>
-                  @if(issue.closed) {
-                    @if(info.isMerged){
-                      <a href="@helpers.url(repository)/pull/@issue.issueId" title="@issue.title" class="label label-info">Merged</a>
-                    } else {
-                      <a href="@helpers.url(repository)/pull/@issue.issueId" title="@issue.title" class="label label-important">Closed</a>
-                    }
-                  } else {
-                    <a href="@helpers.url(repository)/pull/@issue.issueId" title="@issue.title" class="label label-success">Open</a>
-                  }
-                }.getOrElse{
-                  @if(context.loginAccount.isDefined){
-                    <a href="@helpers.url(repository)/compare/@{repository.repository.parentUserName.map { parent =>
-                      helpers.urlEncode(parent) + ":" + helpers.encodeRefName(repository.repository.defaultBranch)
-                    }.getOrElse {
-                      helpers.encodeRefName(repository.repository.defaultBranch)
-                    }}...@{helpers.encodeRefName(branch.name)}?expand=1" class="btn btn-success">New Pull Request</a>
-                  } else {
-                    <a href="@helpers.url(repository)/compare/@{repository.repository.parentUserName.map { parent =>
-                      helpers.urlEncode(parent) + ":" + helpers.encodeRefName(repository.repository.defaultBranch)
-                    }.getOrElse {
-                      helpers.encodeRefName(repository.repository.defaultBranch)
-                    }}...@{helpers.encodeRefName(branch.name)}" class="btn btn-success">Compare</a>
-                  }
-                }
-                @if(hasWritePermission){
-                  <span style="margin-left: 8px;">
-                    @if(prs.map(!_._2.closed).getOrElse(false)){
-                      <a class="disabled" data-toggle="tooltip" title="You can’t delete this branch because it has an open pull request"><i class="octicon octicon-trashcan"></i></a>
-                    } else {
-                      @if(isProtected){
-                        <a class="disabled" data-toggle="tooltip" title="You can’t delete a protected branch."><i class="octicon octicon-trashcan"></i></a>
-                      } else {
-                        <a href="@helpers.url(repository)/delete/@helpers.encodeRefName(branch.name)" class="delete-branch" data-name="@branch.name" @if(info.isMerged){ data-toggle="tooltip" title="this branch is merged" }><i class="octicon octicon-trashcan @if(info.isMerged){warning} else {danger}"></i></a>
-                      }
-                    }
-                  </span>
-                }
-              }
-            </div>
-            <div class="branch-details">
-              @if(isProtected){ <span class="octicon octicon-shield" title="This branch is protected"></span> }
-              <a href="@helpers.url(repository)/tree/@helpers.encodeRefName(branch.name)" class="branch-name">@branch.name</a>
-              <span class="branch-meta">
-                <span>Updated @gitbucket.core.helper.html.datetimeago(branch.commitTime, false)
-                  by <span>@helpers.user(branch.committerName, branch.committerEmailAddress, "muted-link")</span>
-                </span>
+          <td class="branch-details">
+            @if(isProtected){ <span class="octicon octicon-shield" title="This branch is protected"></span> }
+            <a href="@helpers.url(repository)/tree/@helpers.encodeRefName(branch.name)" class="branch-name">@branch.name</a>
+            <span class="branch-meta">
+              <span>Updated @gitbucket.core.helper.html.datetimeago(branch.commitTime, false)
+                by <span>@helpers.user(branch.committerName, branch.committerEmailAddress, "muted-link")</span>
               </span>
-            </div>
-            <div class="branch-a-b-count">
-              @if(branch.mergeInfo.isEmpty){
-                <span class="badge">Default</span>
-              } else {
-                @branch.mergeInfo.map{ info =>
-                  <div data-toggle="tooltip" title="@info.ahead commits ahead, @info.behind commits behind @repository.repository.defaultBranch">
-                    <div class="a-b-count-widget">
-                      <div class="count-half"><div class="count-value">@info.ahead</div></div>
-                      <div class="count-half"><div class="count-value">@info.behind</div></div>
-                    </div>
+            </span>
+          </td>
+          <td class="branch-a-b-count">
+            @if(branch.mergeInfo.isEmpty){
+              <span class="badge">Default</span>
+            } else {
+              @branch.mergeInfo.map{ info =>
+                <div data-toggle="tooltip" title="@info.ahead commits ahead, @info.behind commits behind @repository.repository.defaultBranch">
+                  <div class="a-b-count-widget">
+                    <div class="count-half"><div class="count-value">@info.ahead</div></div>
+                    <div class="count-half"><div class="count-value">@info.behind</div></div>
                   </div>
+                </div>
+              }
+            }
+          </td>
+          <td>
+            <div class="branch-action">
+            @branch.mergeInfo.map{ info =>
+              @prs.map{ case (pull, issue) =>
+              <a href="@helpers.url(repository)/pull/@issue.issueId" title="@issue.title">#@issue.issueId</a>
+                @if(issue.closed) {
+                  @if(info.isMerged){
+                    <a href="@helpers.url(repository)/pull/@issue.issueId" title="@issue.title" class="label label-info">Merged</a>
+                  } else {
+                    <a href="@helpers.url(repository)/pull/@issue.issueId" title="@issue.title" class="label label-important">Closed</a>
+                  }
+                } else {
+                  <a href="@helpers.url(repository)/pull/@issue.issueId" title="@issue.title" class="label label-success">Open</a>
+                }
+              }.getOrElse{
+                @if(context.loginAccount.isDefined){
+                  <a href="@helpers.url(repository)/compare/@{repository.repository.parentUserName.map { parent =>
+                    helpers.urlEncode(parent) + ":" + helpers.encodeRefName(repository.repository.defaultBranch)
+                  }.getOrElse {
+                    helpers.encodeRefName(repository.repository.defaultBranch)
+                  }}...@{helpers.encodeRefName(branch.name)}?expand=1" class="btn btn-default">New Pull Request</a>
+                } else {
+                  <a href="@helpers.url(repository)/compare/@{repository.repository.parentUserName.map { parent =>
+                    helpers.urlEncode(parent) + ":" + helpers.encodeRefName(repository.repository.defaultBranch)
+                  }.getOrElse {
+                    helpers.encodeRefName(repository.repository.defaultBranch)
+                  }}...@{helpers.encodeRefName(branch.name)}" class="btn btn-default">Compare</a>
                 }
               }
+              @if(hasWritePermission){
+                <span style="margin-left: 8px;">
+                @if(prs.map(!_._2.closed).getOrElse(false)){
+                  <a class="disabled" data-toggle="tooltip" title="You can’t delete this branch because it has an open pull request"><i class="octicon octicon-trashcan"></i></a>
+                } else {
+                  @if(isProtected){
+                    <a class="disabled" data-toggle="tooltip" title="You can’t delete a protected branch."><i class="octicon octicon-trashcan"></i></a>
+                  } else {
+                    <a href="@helpers.url(repository)/delete/@helpers.encodeRefName(branch.name)" class="delete-branch" data-name="@branch.name" @if(info.isMerged){ data-toggle="tooltip" title="this branch is merged" }><i class="octicon octicon-trashcan @if(info.isMerged){warning} else {danger}"></i></a>
+                  }
+                }
+                </span>
+              }
+            }
             </div>
           </td>
         </tr>

src/main/webapp/assets/common/css/gitbucket.css

@@ -427,48 +427,52 @@ div.repository-icon {
 div.repository-content {
   margin-left: 40px;
 }
-
+table.branches>thead>tr>th, table.branches>tbody>tr>td{
+  padding: 12px;
+}
 .branches .muted-link{
   color: #777;
 }
 .branches .muted-link:hover{
   color: #4183c4;
 }
+/*
 .branches .branch-details{
   display: inline-block;
   width: 490px;
   margin-right: 10px;
 }
+*/
 .branches .branch-name{
   color: #4183c4;
   display: inline-block;
   padding: 2px 6px;
-  font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
   background-color: rgba(209,227,237,0.5);
   border-radius: 3px;
 }
 .branches .branch-meta{
   color: #aaa;
-  font-size: 12px;
   line-height: 20px;
 }
 .branches .branch-action{
-  display: inline-block;
-  float: right;
-  position: relative;
-  top: -6px;
+  /*float: right;*/
+  text-align: right;
   height: 20px;
 }
+.branches .branch-action a {
+  font-size: 100%;
+}
+.branches .branch-action a.btn {
+  font-size: 100%;
+  position: relative;
+  top: -6px;
+}
+
 .branches .branch-a-b-count{
-  display: inline-block;
-  vertical-align: middle;
-  width: 181px;
-  text-align: center;
   color: rgba(0,0,0,0.5);
 }
-.branches .a-b-count-widget{
-  font-size: 10px;
-}
+
 .branches .a-b-count-widget .count-half{
   width:90px;
   position: relative;