(refs #488) WIP: Fixing the screen layout for the issue detail.

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

@@ -5,6 +5,7 @@
 @import context._
 @import view.helpers._
 @if(loginAccount.isDefined){
+  <hr/><br/>
   <form method="POST" validate="true">
     <div class="issue-avatar-image">@avatar(loginAccount.get.userName, 48)</div>
       <div class="box issue-comment-box">

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

@@ -5,20 +5,36 @@
   pullreq: Option[model.PullRequest] = None)(implicit context: app.Context)
 @import context._
 @import view.helpers._
+<div class="issue-avatar-image">@avatar(issue.openedUserName, 48)</div>
+<div class="box issue-comment-box">
+  <div class="box-header-small">
+    @user(issue.openedUserName, styleClass="username strong") <span class="muted">commented on @datetime(issue.registeredDate)</span>
+    <span class="pull-right">
+      @if(hasWritePermission || loginAccount.map(_.userName == issue.openedUserName).getOrElse(false)){
+        <a href="#"><i class="icon-pencil"></i></a>
+      }
+    </span>
+  </div>
+  <div class="box-content issue-content">
+    @markdown(issue.content getOrElse "No description provided.", repository, false, true)
+  </div>
+</div>
+
 @comments.map { comment =>
   @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="box-header-small">
-        <i class="icon-comment"></i>
         @user(comment.commentedUserName, styleClass="username strong")
+        <span class="muted">
           @if(comment.action == "comment"){
             commented
           } else {
             @if(pullreq.isEmpty){ referenced the issue } else { referenced the pull request }
           }
+          on @datetime(comment.registeredDate)
+        </span>
         <span class="pull-right">
-          @datetime(comment.registeredDate)
           @if(comment.action != "commit" && comment.action != "merge" && comment.action != "refer" &&
                 (hasWritePermission || loginAccount.map(_.userName == comment.commentedUserName).getOrElse(false))){
             <a href="#" data-comment-id="@comment.commentId"><i class="icon-pencil"></i></a>&nbsp;

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

@@ -10,30 +10,41 @@
 @import view.helpers._
 @html.main(s"${issue.title} - Issue #${issue.issueId} - ${repository.owner}/${repository.name}", Some(repository)){
   @html.menu("issues", repository){
-    @tab("issues", true, repository)
     <ul class="nav nav-tabs pull-left fill-width">
-      <li class="pull-left"><a href="@url(repository)/issues"><i class="icon-arrow-left"></i> Back to issue list</a></li>
-      <li class="pull-right">Issue #@issue.issueId</li>
-    </ul>
-    <div class="row-fluid">
-      <div class="span10">
-        @issuedetail(issue, comments, collaborators, milestones, hasWritePermission, repository)
-        @commentlist(issue, comments, hasWritePermission, repository)
-        @commentform(issue, true, hasWritePermission, repository)
-      </div>
-      <div class="span2">
+      <li class="pull-left">
+        <h1>@issue.title <span class="muted">#@issue.issueId</span></h1>
         @if(issue.closed) {
           <span class="label label-important issue-status">Closed</span>
         } else {
           <span class="label label-success issue-status">Open</span>
         }
-        <div class="small" style="text-align: center;">
-          @defining(comments.filter( _.action.contains("comment") ).size){ count =>
-            <span class="strong">@count</span> @plural(count, "comment")
+        <span class="muted">
+          @user(issue.openedUserName, styleClass="username strong") opened this issue on @datetime(issue.registeredDate) - @defining(
+            comments.filter( _.action.contains("comment") ).size
+          ){ count =>
+            @count @plural(count, "comment")
           }
+        </span>
+        <br/><br/>
+      </li>
+      <li class="pull-right">
+        <div>
+          @if(hasWritePermission || loginAccount.map(_.userName == issue.openedUserName).getOrElse(false)){
+            <a class="btn btn-small" href="#" id="edit">Edit</a>
+          }
+          <a class="btn btn-small btn-success" href="@url(repository)/issues/new">New issue</a>
         </div>
+      </li>
+    </ul>
+    <div class="row-fluid">
+      <div class="span10">
+        @commentlist(issue, comments, hasWritePermission, repository)
+        @commentform(issue, true, hasWritePermission, repository)
+      </div>
+      <div class="span2">
+        @issueinfo(issue, issueLabels, labels, hasWritePermission, repository)
         <hr/>
-        @issues.html.labels(issue, issueLabels, labels, hasWritePermission, repository)
+
       </div>
     </div>
   }

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

@@ -5,7 +5,7 @@
   repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
 @import view.helpers._
 <div style="margin-bottom: 8px;">
-  <span class="strong">Labels</span>
+  <span class="muted small strong">Labels</span>
   @if(hasWritePermission){
     <div class="pull-right">
       @helper.html.dropdown(right = true) {
@@ -25,6 +25,17 @@
 <ul class="label-list nav nav-pills nav-stacked">
   @labellist(issueLabels)
 </ul>
+<hr/>
+<div style="margin-bottom: 8px;">
+  <span class="muted small strong">Milestone</span>
+
+</div>
+<hr/>
+<div style="margin-bottom: 8px;">
+  <span class="muted small strong">Assignee</span>
+
+</div>
+
 <script>
 $(function(){
   $('a.toggle-label').click(function(){

src/main/twirl/pulls/conversation.scala.html

@@ -67,7 +67,7 @@
       </div>
     }
     <hr/>
-    @issues.html.labels(issue, issueLabels, labels, hasWritePermission, repository)
+    @issues.html.issueinfo(issue, issueLabels, labels, hasWritePermission, repository)
   </div>
 </div>
 <script>

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

@@ -638,7 +638,6 @@ a.selected {
 }
 
 span.issue-status {
-  display: block;
   font-size: large;
   text-align: center;
   padding: 8px;