(refs #865)Update commit list presentation

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

@@ -69,7 +69,7 @@
       @if(content.viewType == "text"){
         @defining(isRenderable(pathList.reverse.head)){ isRrenderable =>
           @if(!isBlame && isRrenderable) {
-            <div class="box-content-bottom markdown-body" style="border: none; padding-left: 16px; padding-right: 16px;">
+            <div class="box-content-bottom markdown-body" style="padding-left: 16px; padding-right: 16px;">
               @renderMarkup(pathList, content.content.get, branch, repository, false, false, true)
             </div>
           } else {

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

@@ -10,6 +10,7 @@
 @html.main(s"${repository.owner}/${repository.name}", Some(repository)) {
   @html.menu("code", repository){
     <div class="head">
+      @if(pathList.isEmpty){
         @helper.html.branchcontrol(
           branch,
           repository,
@@ -19,33 +20,31 @@
             <li><a href="@url(repository)/commits/@encodeRefName(x)">@helper.html.checkicon(x == branch) @x</a></li>
           }
         }
-      @if(pathList.isEmpty){
-        <a href="@url(repository)/tree/@encodeRefName(branch)">@repository.name</a> / Commit History
       }
       @if(pathList.nonEmpty){
         <span class="muted">History for</span>
-        <a href="@url(repository)/tree/@encodeRefName(branch)">@repository.name</a> /
+        <a class="strong" href="@url(repository)/tree/@encodeRefName(branch)">@repository.name</a> /
         @pathList.zipWithIndex.map { case (section, i) =>
           @if(i == pathList.length - 1){
-            @section
+            <span class="strong">@section</span>
           } else {
-            <a href="@url(repository)/tree/@encodeRefName(branch)/@pathList.take(i + 1).mkString("/")">@section</a> /
+            <a class="strong" href="@url(repository)/tree/@encodeRefName(branch)/@pathList.take(i + 1).mkString("/")">@section</a> /
           }
         }
       }
     </div>
+    <div class="commit-list">
       @commits.map { day =>
-      <table class="table table-bordered">
+        <div class="muted" style="background-color: white;">
-        <tr>
+          <i class="octicon octicon-git-commit"></i> Commits on @date(day.head.commitTime)
-          <th>@date(day.head.commitTime)</th>
-        </tr>
-        @day.map { commit =>
-        <tr>
-          <td>
-            <div class="pull-right align-right">
-              <a href="@url(repository)/commit/@commit.id" class="btn btn-small monospace">@commit.id.substring(0, 10)</a><br>
-              <a href="@url(repository)/tree/@commit.id" class="small">Browse code</a>
         </div>
+        <div class="box-commits">
+          @day.map { commit =>
+            <div class="box-content-row" style="padding: 8px;">
+              <ul class="nav nav-pills-group pull-right" style="margin-top: 2px; margin-bottom: 0px; margin-right: 4px;">
+                <li class="first"><a href="@url(repository)/commit/@commit.id" class="link monospace">@commit.id.substring(0, 7)</a></li>
+                <li class="last"><a href="@url(repository)/tree/@commit.id" style="padding-top: 9px; padding-bottom: 10px;"><i class="octicon octicon-code link"></i></a></li>
+              </ul>
               <div>
                 <div class="commit-avatar-image">@avatar(commit, 40)</div>
                 <div class="commit-message-box">
@@ -68,14 +67,16 @@
                   </div>
                 </div>
               </div>
-          </td>
+            </div>
-        </tr>
           }
-      </table>
+        </div>
       }
-    <div class="btn-group">
+    </div>
-      <button class="btn" onclick="location.href='?page=@{page - 1}'"@if(page <= 1){ disabled="true"}>&lt; Newer</button>
+    <div style="text-align: center; margin-top: 30px">
-      <button class="btn" onclick="location.href='?page=@{page + 1}'"@if(!hasNext){ disabled="true"}>Older &gt;</button>
+      <ul class="nav nav-pills-group">
+        <li class="first"><a class="link" href="?page=@{page - 1}" @if(page <= 1){ disabled="true"}>Newer</a></li>
+        <li class="last"><a class="link" href="?page=@{page + 1}" @if(!hasNext){ disabled="true"}>Older</a></li>
+      </ul>
     </div>
   }
 }

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

@@ -128,7 +128,7 @@
     @readme.map { case(filePath, content) =>
       <div id="readme">
         <div class="box-header">@filePath.reverse.head</div>
-        <div class="box-content-bottom markdown-body">@renderMarkup(filePath, content, branch, repository, false, false, true)</div>
+        <div class="box-content-bottom markdown-body" style="padding-left: 16px; padding-right: 16px;">@renderMarkup(filePath, content, branch, repository, false, false, true)</div>
       </div>
     }
   }

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

@@ -232,6 +232,36 @@ div.box-header {
   background: #f2f8fa;
 }
 
+.commit-list {
+  position: relative;
+}
+
+.commit-list::before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 6px;
+  z-index: -1;
+  display: block;
+  width: 2px;
+  content: "";
+  background-color: #f3f3f3;
+}
+
+ul.nav-pills-group .link {
+  color: #4078c0;
+}
+
+div.box-commits {
+  background-color: white;
+  border: 1px solid #d8d8d8;
+  padding-left: 0px;
+  padding-right: 0px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  margin-left: 20px;
+}
+
 div.box-content {
   background-color: white;
   border: 1px solid #d8d8d8;
@@ -239,7 +269,7 @@ div.box-content {
   border-radius: 3px;
 }
 
-div.box-content-bottom > div.box-content-row:nth-of-type(1) {
+div > div.box-content-row:nth-of-type(1) {
   border: none;
 }
 
@@ -1361,6 +1391,7 @@ div.markdown-body {
   font: 15px Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
   word-wrap: break-word;
 }
+
 div.markdown-body h1 {
   border-bottom: 1px solid #ddd;
   font-size: 2.5em;

src/main/webapp/assets/vendors/bootstrap/css/bootstrap.css

@@ -231,13 +231,13 @@ body {
 }
 
 a {
-  color: #0088cc;
+  color: #4078c0;
   text-decoration: none;
 }
 
 a:hover,
 a:focus {
-  color: #005580;
+  color: #4078c0;
   text-decoration: underline;
 }