Fix milestone list and progress bar

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

@@ -13,7 +13,7 @@
 @import gitbucket.core.view.helpers._
 @import gitbucket.core.service.IssuesService.IssueInfo
 @if(condition.nonEmpty){
-  <div>
+  <div style="width: 100%; display: inline-block;">
     <a href="@gitbucket.core.service.IssuesService.IssueSearchCondition().toURL" class="header-link">
       <i class="octicon octicon-x" ></i>
       <span class="strong">Clear current search query, filters, and sorts</span>

src/main/twirl/gitbucket/core/issues/milestones/list.scala.html

@@ -9,89 +9,93 @@
     @issues.html.navigation("milestones", hasWritePermission, repository)
     <br>
     <table class="table table-bordered table-hover table-issues">
-      <tr>
-        <th style="background-color: #eee;">
-          <span class="small">
-            <a class="button-link@if(state == "open"){ selected}" href="?state=open">
-              <i class="octicon octicon-milestone @(if(state == "open"){"active"})"></i>
-              @milestones.count(_._1.closedDate.isEmpty) Open
-            </a>&nbsp;&nbsp;
-            <a class="button-link@if(state == "closed"){ selected}" href="?state=closed">
-              <i class="octicon octicon-milestone @(if(state == "closed"){"active"})"></i>
-              @milestones.count(_._1.closedDate.isDefined) Closed
-            </a>
-          </span>
-        </th>
-      </tr>
-      @defining(milestones.filter { case (milestone, _, _) =>
-        milestone.closedDate.map(_ => state == "closed").getOrElse(state == "open")
-      }){ milestones =>
-        @milestones.map { case (milestone, openCount, closedCount) =>
+      <thead>
         <tr>
-          <td style="padding-top: 15px; padding-bottom: 15px;">
-            <div class="milestone row-fluid">
-              <div class="span4">
-                <a href="@url(repository)/issues?milestone=@milestone.title&state=open" class="milestone-title">@milestone.title</a>
-                <div style="margin-top: 6px">
-                  @if(milestone.closedDate.isDefined){
-                    <span class="muted">Closed @helper.html.datetimeago(milestone.closedDate.get)</span>
-                  } else {
-                    @milestone.dueDate.map { dueDate =>
-                      @if(isPast(dueDate)){
-                        <i class="octicon octicon-alert" style="color:#BD2C00;"></i><span class="muted milestone-alert">Due by @date(dueDate)</span>
-                      } else {
-                        <span class="muted">Due by @date(dueDate)</span>
-                      }
-                    }.getOrElse {
-                      <span class="muted">No due date</span>
-                    }
-                  }
-                </div>
-              </div>
-              <div class="span8">
-                @progress(openCount + closedCount, closedCount)
-                <div>
+          <th style="background-color: #eee;">
+            <span class="small">
+              <a class="button-link@if(state == "open"){ selected}" href="?state=open">
+                <i class="octicon octicon-milestone @(if(state == "open"){"active"})"></i>
+                @milestones.count(_._1.closedDate.isEmpty) Open
+              </a>&nbsp;&nbsp;
+              <a class="button-link@if(state == "closed"){ selected}" href="?state=closed">
+                <i class="octicon octicon-milestone @(if(state == "closed"){"active"})"></i>
+                @milestones.count(_._1.closedDate.isDefined) Closed
+              </a>
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        @defining(milestones.filter { case (milestone, _, _) =>
+          milestone.closedDate.map(_ => state == "closed").getOrElse(state == "open")
+        }){ milestones =>
+          @milestones.map { case (milestone, openCount, closedCount) =>
+          <tr>
+            <td style="padding-top: 15px; padding-bottom: 15px;">
+              <div class="milestone row">
+                <div class="col-md-4">
+                  <a href="@url(repository)/issues?milestone=@milestone.title&state=open" class="milestone-title">@milestone.title</a>
                   <div>
-                    @if(closedCount == 0){
-                      0%
+                    @if(milestone.closedDate.isDefined){
+                      <span class="muted">Closed @helper.html.datetimeago(milestone.closedDate.get)</span>
                     } else {
-                      @((closedCount.toDouble / (openCount + closedCount).toDouble * 100).toInt)%
-                    } <span class="muted">complete</span> &nbsp;&nbsp;
-                    @openCount <span class="muted">open</span> &nbsp;&nbsp;
-                    @closedCount <span class="muted">closed</span>
-                  </div>
-                  <div class="milestone-menu">
-                    @if(hasWritePermission){
-                      <a href="@url(repository)/issues/milestones/@milestone.milestoneId/edit">Edit</a> &nbsp;&nbsp;
-                      @if(milestone.closedDate.isDefined){
-                        <a href="@url(repository)/issues/milestones/@milestone.milestoneId/open">Open</a> &nbsp;&nbsp;
-                      } else {
-                        <a href="@url(repository)/issues/milestones/@milestone.milestoneId/close">Close</a> &nbsp;&nbsp;
+                      @milestone.dueDate.map { dueDate =>
+                        @if(isPast(dueDate)){
+                          <i class="octicon octicon-alert" style="color:#BD2C00;"></i><span class="muted milestone-alert">Due by @date(dueDate)</span>
+                        } else {
+                          <span class="muted">Due by @date(dueDate)</span>
+                        }
+                      }.getOrElse {
+                        <span class="muted">No due date</span>
                       }
-                      <a href="@url(repository)/issues/milestones/@milestone.milestoneId/delete" class="delete">Delete</a>
                     }
                   </div>
                 </div>
+                <div class="col-md-8">
+                  @progress(openCount + closedCount, closedCount)
+                  <div>
+                    <div>
+                      @if(closedCount == 0){
+                        0%
+                      } else {
+                        @((closedCount.toDouble / (openCount + closedCount).toDouble * 100).toInt)%
+                      } <span class="muted">complete</span> &nbsp;&nbsp;
+                      @openCount <span class="muted">open</span> &nbsp;&nbsp;
+                      @closedCount <span class="muted">closed</span>
+                    </div>
+                    <div class="milestone-menu">
+                      @if(hasWritePermission){
+                        <a href="@url(repository)/issues/milestones/@milestone.milestoneId/edit">Edit</a> &nbsp;&nbsp;
+                        @if(milestone.closedDate.isDefined){
+                          <a href="@url(repository)/issues/milestones/@milestone.milestoneId/open">Open</a> &nbsp;&nbsp;
+                        } else {
+                          <a href="@url(repository)/issues/milestones/@milestone.milestoneId/close">Close</a> &nbsp;&nbsp;
+                        }
+                        <a href="@url(repository)/issues/milestones/@milestone.milestoneId/delete" class="delete">Delete</a>
+                      }
+                    </div>
+                  </div>
+                </div>
               </div>
-            </div>
-            @if(milestone.description.isDefined){
-              <div class="milestone-description markdown-body">
-                @markdown(milestone.description.get, repository, false, false)
-              </div>
-            }
-          </td>
-        </tr>
-        }
-        @if(milestones.isEmpty){
-        <tr>
-          <td style="padding: 20px; background-color: #eee; text-align: center;">
-            No milestones to show.
-            @if(hasWritePermission){
-              <a href="@url(repository)/issues/milestones/new">Create a new milestone.</a>
-            }
-          </td>
-        </tr>
-        }
+              @if(milestone.description.isDefined){
+                <div class="milestone-description markdown-body">
+                  @markdown(milestone.description.get, repository, false, false)
+                </div>
+              }
+            </td>
+          </tr>
+          }
+          @if(milestones.isEmpty){
+          <tr>
+            <td style="padding: 20px; background-color: #eee; text-align: center;">
+              No milestones to show.
+              @if(hasWritePermission){
+                <a href="@url(repository)/issues/milestones/new">Create a new milestone.</a>
+              }
+            </td>
+          </tr>
+          }
+        </tbody>
       }
     </table>
   }

src/main/twirl/gitbucket/core/issues/milestones/progress.scala.html

@@ -1,6 +1,5 @@
 @(total: Int, progress: Int)
-<div class="milestone-progress">
-  @if(progress > 0){
-    <span class="milestone-progress" style="width: @((progress.toDouble / total.toDouble * 100).toInt)%;"></span>
-  }
+<div class="progress" style="height: 12px; margin-bottom: 8px;">
+  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="@((progress.toDouble / total.toDouble * 100).toInt)" aria-valuemin="0" aria-valuemax="100" style="width: @((progress.toDouble / total.toDouble * 100).toInt)%">
+  </div>
 </div>

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

@@ -1114,6 +1114,7 @@ div.milestone-menu a.delete {
   color: #b00;
 }
 
+/*
 div#milestone-progress-area {
   display: inline-block;
 }
@@ -1152,6 +1153,7 @@ div.issue-header {
   padding-top: 12px;
   padding-bottom: 12px;
 }
+*/
 
 div.issue-info {
   border-top: 1px solid #e5e5e5;