(refs #865)Update commit list presentation

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

@@ -65,11 +65,11 @@
           <a class="btn btn-mini btn-danger" href="@url(repository)/remove/@encodeRefName(branch)/@pathList.mkString("/")">Delete</a>
         }
       </div>
-      </div>
+    </div>
       @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,72 +10,73 @@
 @html.main(s"${repository.owner}/${repository.name}", Some(repository)) {
   @html.menu("code", repository){
     <div class="head">
-      @helper.html.branchcontrol(
-        branch,
-        repository,
-        hasWritePermission
-      ){
-        @repository.branchList.map { x =>
-          <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
+        @helper.html.branchcontrol(
+          branch,
+          repository,
+          hasWritePermission
+        ){
+          @repository.branchList.map { x =>
+            <li><a href="@url(repository)/commits/@encodeRefName(x)">@helper.html.checkicon(x == branch) @x</a></li>
+          }
+        }
       }
       @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>
-    @commits.map { day =>
+    <div class="commit-list">
-      <table class="table table-bordered">
+      @commits.map { day =>
-        <tr>
+        <div class="muted" style="background-color: white;">
-          <th>@date(day.head.commitTime)</th>
+          <i class="octicon octicon-git-commit"></i> Commits on @date(day.head.commitTime)
-        </tr>
+        </div>
-        @day.map { commit =>
+        <div class="box-commits">
-        <tr>
+          @day.map { commit =>
-          <td>
+            <div class="box-content-row" style="padding: 8px;">
-            <div class="pull-right align-right">
+              <ul class="nav nav-pills-group pull-right" style="margin-top: 2px; margin-bottom: 0px; margin-right: 4px;">
-              <a href="@url(repository)/commit/@commit.id" class="btn btn-small monospace">@commit.id.substring(0, 10)</a><br>
+                <li class="first"><a href="@url(repository)/commit/@commit.id" class="link monospace">@commit.id.substring(0, 7)</a></li>
-              <a href="@url(repository)/tree/@commit.id" class="small">Browse code</a>
+                <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>
-            </div>
+              </ul>
-            <div>
+              <div>
-              <div class="commit-avatar-image">@avatar(commit, 40)</div>
+                <div class="commit-avatar-image">@avatar(commit, 40)</div>
-              <div class="commit-message-box">
+                <div class="commit-message-box">
-                <a href="@url(repository)/commit/@commit.id" class="commit-message" style="font-weight: bold;">@link(commit.summary, repository)</a>
+                  <a href="@url(repository)/commit/@commit.id" class="commit-message" style="font-weight: bold;">@link(commit.summary, repository)</a>
-                @if(commit.description.isDefined){
+                  @if(commit.description.isDefined){
-                  <a href="javascript:void(0)" onclick="$('#description-@commit.id').toggle();" class="omit">...</a>
+                    <a href="javascript:void(0)" onclick="$('#description-@commit.id').toggle();" class="omit">...</a>
-                }
-                <br>
-                @if(commit.description.isDefined){
-                  <pre id="description-@commit.id" style="display: none;" class="commit-description">@link(commit.description.get, repository)</pre>
-                }
-                <div class="small">
-                  @user(commit.authorName, commit.authorEmailAddress, "username")
-                  <span class="muted">authored @helper.html.datetimeago(commit.authorTime)</span>
-                  @if(commit.isDifferentFromAuthor) {
-                    <span class="icon-arrow-right" style="margin-top : -2px ;"></span>
-                    @user(commit.committerName, commit.committerEmailAddress, "username")
-                    <span class="muted">committed @helper.html.datetimeago(commit.authorTime)</span>
                   }
+                  <br>
+                  @if(commit.description.isDefined){
+                    <pre id="description-@commit.id" style="display: none;" class="commit-description">@link(commit.description.get, repository)</pre>
+                  }
+                  <div class="small">
+                    @user(commit.authorName, commit.authorEmailAddress, "username")
+                    <span class="muted">authored @helper.html.datetimeago(commit.authorTime)</span>
+                    @if(commit.isDifferentFromAuthor) {
+                      <span class="icon-arrow-right" style="margin-top : -2px;"></span>
+                      @user(commit.committerName, commit.committerEmailAddress, "username")
+                      <span class="muted">committed @helper.html.datetimeago(commit.authorTime)</span>
+                    }
+                  </div>
                 </div>
               </div>
             </div>
-          </td>
+          }
-        </tr>
+        </div>
-        }
+      }
-      </table>
+    </div>
-    }
+    <div style="text-align: center; margin-top: 30px">
-    <div class="btn-group">
+      <ul class="nav nav-pills-group">
-      <button class="btn" onclick="location.href='?page=@{page - 1}'"@if(page <= 1){ disabled="true"}>&lt; Newer</button>
+        <li class="first"><a class="link" href="?page=@{page - 1}" @if(page <= 1){ disabled="true"}>Newer</a></li>
-      <button class="btn" onclick="location.href='?page=@{page + 1}'"@if(!hasNext){ disabled="true"}>Older &gt;</button>
+        <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;
 }