Adjust CSS styles.

src/main/twirl/issues/issue.scala.html

@@ -68,8 +68,9 @@
         </div>
       </div>
       @comments.map { comment =>
-        <div class="box" id="comment-@comment.commentId">
+        <div class="box issue-comment-box" id="comment-@comment.commentId">
           <div class="box-header-small">
+            <i class="icon-comment"></i>
             <a href="@url(comment.commentedUserName)" class="username strong">@comment.commentedUserName</a> commented
             <span class="pull-right">
               @datetime(comment.registeredDate)
@@ -83,13 +84,13 @@
           </div>
         </div>
         @comment.action.map { action =>
-        <div class="small">
+        <div class="small issue-comment-action">
           @if(action == "close"){
             <span class="label label-important">Closed</span>
-            <a href="@url(comment.commentedUserName)">@comment.commentedUserName</a> closed the issue @datetime(comment.registeredDate)
+            <a href="@url(comment.commentedUserName)" class="username strong">@comment.commentedUserName</a> closed the issue @datetime(comment.registeredDate)
           } else {
             <span class="label label-success">Reopened</span>
-            <a href="@url(comment.commentedUserName)">@comment.commentedUserName</a> reopened the issue @datetime(comment.registeredDate)
+            <a href="@url(comment.commentedUserName)" class="username strong">@comment.commentedUserName</a> reopened the issue @datetime(comment.registeredDate)
           }
         </div>
         }
@@ -109,21 +110,23 @@
     </div>
     <div class="span2">
       @if(issue.closed) {
-        <a class="btn btn-large btn-danger disabled">Closed</a>
+        <span class="label label-important issue-status">Closed</span>
       } else {
-        <a class="btn btn-large btn-success disabled">Open</a>
+        <span class="label label-success issue-status">Open</span>
       }
-      <div class="small">@comments.size comments</div>
+      <div class="small" style="text-align: center;">
+        @if(comments.size == 1){
+          <strong>1</strong> comment
+        } else {
+          <strong>@comments.size</strong> comments
+        }
+      </div>
       <hr/>
+      <div style="margin-bottom: 8px;">
       <strong>Labels</strong>
       @if(hasWritePermission){
         <div class="pull-right">
-          <div class="btn-group">
+          @helper.html.dropdown {
-            <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
-              <i class="icon-cog"></i>
-              <span class="caret"></span>
-            </button>
-            <ul class="dropdown-menu">
             @labels.map { label =>
               <li>
                 <a href="#" class="toggle-label" data-label-id="@label.labelId">
@@ -134,9 +137,10 @@
               </li>
             }
             </ul>
-          </div>
+          }
         </div>
       }
+      </div>
       <ul class="label-list">
         @labellist(issueLabels)
       </ul>

src/main/twirl/issues/labellist.scala.html

@@ -1,4 +1,4 @@
 @(issueLabels: List[model.Label])
 @issueLabels.map { label =>
-  <li><span class="label" style="background-color: #@label.color;">@label.labelName</span></li>
+  <li><span class="label" style="display: block; background-color: #@label.color; color: #@label.fontColor; margin-top: 2px; padding: 4px;">@label.labelName</span></li>
 }

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

@@ -107,7 +107,7 @@ h3 {
 div.box {
   background-color: #efefef;
   padding: 2px;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 }
 
 div.box-header {
@@ -313,6 +313,13 @@ pre.blob {
 /****************************************************************************/
 /* Issues */
 /****************************************************************************/
+span.issue-status {
+  display: block;
+  font-size: large;
+  text-align: center;
+  padding: 8px;
+}
+
 table.table-issues {
   margin-top: 12px;
 }
@@ -430,6 +437,18 @@ h4#issueTitle {
   padding: 0px;
 }
 
+div.issue-comment-box {
+  margin-bottom: 15px;
+  margin-top: 25px;
+}
+
+div.issue-comment-action {
+  padding-bottom: 10px;
+  padding-top: 0px;
+  margin-bottom: 10px;
+  border-bottom: 4px solid #ddd;
+}
+
 /****************************************************************************/
 /* Wiki */
 /****************************************************************************/