Fix style of issue comment form and more

src/main/twirl/gitbucket/core/helper/preview.scala.html

@@ -14,7 +14,7 @@
 @import gitbucket.core._
 @import gitbucket.core.view.helpers._
 <div class="tabbable">
-  <ul class="nav nav-tabs fill-width pull-left" style="margin-top: 12px; margin-bottom: 10px;">
+  <ul class="nav nav-tabs fill-width pull-left" style="@*margin-top: 12px; *@margin-bottom: 10px;">
     <li class="active"><a href="#tab@uid" data-toggle="tab">Write</a></li>
     <li><a href="#tab@(uid+1)" data-toggle="tab" id="preview@uid">Preview</a></li>
   </ul>

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

@@ -78,8 +78,8 @@
 <script>
 $(function(){
   $('#show-more-repos').click(function(e){
-    $(e.target).parents('div.box-content-bottom').find('div.repo-link').show();
+    $(e.target).parents('ul.list-group').find('li.repo-link').show();
-    $(e.target).parents('div.show-more').remove();
+    $(e.target).parents('li.show-more').remove();
   });
 });
 </script>

src/main/twirl/gitbucket/core/issues/commentform.scala.html

@@ -8,8 +8,8 @@
   <hr/><br/>
   <form method="POST" validate="true">
     <div class="issue-avatar-image">@avatar(loginAccount.get.userName, 48)</div>
-      <div class="issue-comment-box">
+    <div class="panel panel-default issue-comment-box">
-      <div class="box-content">
+      <div class="panel-body">
         @helper.html.preview(
           repository         = repository,
           content            = "",

src/main/twirl/gitbucket/core/issues/commentlist.scala.html

@@ -27,8 +27,8 @@
   case comment: gitbucket.core.model.IssueComment => {
     @if(comment.action != "close" && comment.action != "reopen" && comment.action != "delete_branch"){
       <div class="issue-avatar-image">@avatar(comment.commentedUserName, 48)</div>
-      <div class="box issue-comment-box" id="comment-@comment.commentId">
+      <div class="panel panel-default issue-comment-box" id="comment-@comment.commentId">
-        <div class="box-header">
+        <div class="panel-heading">
           @user(comment.commentedUserName, styleClass="username strong")
           <span class="muted">
             @if(comment.action == "comment"){
@@ -38,20 +38,22 @@
             }
             @helper.html.datetimeago(comment.registeredDate)
           </span>
-          <span class="pull-right">
           @if(comment.action != "commit" && comment.action != "merge" && comment.action != "refer"
                 && (hasWritePermission || loginAccount.map(_.userName == comment.commentedUserName).getOrElse(false))){
+            <span class="pull-right">
               <a href="#" data-comment-id="@comment.commentId"><i class="octicon octicon-pencil" aria-label="Edit"></i></a>&nbsp;
               <a href="#" data-comment-id="@comment.commentId"><i class="octicon octicon-x" aria-label="Remove"></i></a>
-            }
             </span>
-        </div>
+          }
-        <div class="box-content-bottom issue-content markdown-body" id="commentContent-@comment.commentId">
           @if(comment.action == "commit" && comment.content.split(" ").last.matches("[a-f0-9]{40}")){
             @defining(comment.content.substring(comment.content.length - 40)){ id =>
-              <div class="pull-right"><a href="@path/@repository.owner/@repository.name/commit/@id" class="monospace">@id.substring(0, 7)</a></div>
+              <span class="pull-right"><a href="@path/@repository.owner/@repository.name/commit/@id" class="monospace">@id.substring(0, 7)</a></span>
-              @markdown(comment.content.substring(0, comment.content.length - 41), repository, false, true, true, hasWritePermission)
             }
+          }
+          </div>
+        <div class="panel-body issue-content markdown-body" id="commentContent-@comment.commentId">
+          @if(comment.action == "commit" && comment.content.split(" ").last.matches("[a-f0-9]{40}")){
+            @markdown(comment.content.substring(0, comment.content.length - 41), repository, false, true, true, hasWritePermission)
           } else {
             @if(comment.action == "refer"){
               @defining(comment.content.split(":")){ case Array(issueId, rest @ _*) =>

src/main/twirl/gitbucket/core/issues/editcomment.scala.html

@@ -5,8 +5,8 @@
   <textarea id="edit-content-@commentId">@content</textarea>
 }
 <div>
-  <input type="button" id="cancel-comment-@commentId" class="btn btn-small btn-danger" value="Cancel"/>
+  <input type="button" id="cancel-comment-@commentId" class="btn btn-danger" value="Cancel"/>
-  <input type="button" id="update-comment-@commentId" class="btn btn-small pull-right" value="Update comment"/>
+  <input type="button" id="update-comment-@commentId" class="btn btn-default pull-right" value="Update comment"/>
 </div>
 <script>
 $(function(){

src/main/twirl/gitbucket/core/issues/issueinfo.scala.html

@@ -116,11 +116,13 @@
   <div style="margin-bottom: 8px;">
     @defining((issue.openedUserName :: comments.map(_.commentedUserName)).distinct){ participants =>
       <div class="muted small strong">@participants.size @plural(participants.size, "participant")</div>
+    }
+  </div>
+  @defining((issue.openedUserName :: comments.map(_.commentedUserName)).distinct){ participants =>
     @participants.map { participant =>
       @avatarLink(participant, 20, tooltip = true)
     }
   }
-  </div>
 }
 <script>
 $(function(){

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

@@ -110,7 +110,8 @@
       @repository.repository.description.map { description =>
         <p class="description">@detectAndRenderLinks(description)</p>
       }
-      <div style="margin-bottom: 10px;" class="box-content">
+      <div style="margin-bottom: 10px;" class="panel panel-default">
+        <div class="panel-body">
           <table class="fill-width">
             <tr>
               <td style="width: 33%; text-align: center;">
@@ -134,6 +135,7 @@
             </tr>
           </table>
         </div>
+      </div>
     }
     @body
   </div>

src/main/twirl/gitbucket/core/pulls/mergeguide.scala.html

@@ -10,7 +10,7 @@
 @import gitbucket.core.view.helpers._
 @import model.CommitState
 <div class="box issue-comment-box" style="background-color: @if(hasProblem){ #fbeed5 }else{ #d8f5cd };">
-  <div class="box-content"class="issue-content" style="border: 1px solid @if(hasProblem){ #c09853 }else{ #95c97e }; padding: 10px;">
+  <div class="box-content issue-content" style="border: 1px solid @if(hasProblem){ #c09853 }else{ #95c97e }; padding: 10px;">
     <div id="merge-pull-request">
       @if(!statuses.isEmpty){
         <div class="build-statuses">

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

@@ -1170,6 +1170,7 @@ div.issue-info {
   margin-right: 0px;
 }
 
+/*
 div.issue-content {
   padding: 13px;
   background-color: #fff;
@@ -1182,6 +1183,7 @@ div.issue-content p:first-child {
 div.issue-content p:last-child {
   margin-bottom: 0;
 }
+*/
 
 h4#issueTitle {
   font-size: large;
@@ -1209,10 +1211,17 @@ div.issue-comment-box, div.commit-comment-box {
   margin-bottom: 15px;
   margin-left: 70px;
   max-width: 820px;
+  /*padding: 8px;*/
 }
 
+div.issue-comment-box > div.panel-body,
+div.commit-comment-box > div.panel-body {
+  padding: 8px;
+}
+
+
 div.issue-comment-box textarea {
-  width: 670px;
+  width: 650px;
   height: 100px;
   max-height: 300px;
 }
@@ -1328,7 +1337,7 @@ div.author-info div.committer {
   color: #bd2c00;
 }
 
-.box-content .build-statuses{
+.build-statuses{
   margin: -10px -10px 10px -10px;
 }
 .build-statuses .build-status-item{