From cd801b2c12eae0f11fadf4b247e1403f9e3a5b78 Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 15 Jan 2020 11:58:47 +0100
Subject: [PATCH] Rework issues display page to be responsive

This change uses the bootstrap grid to make the issues page responsive,
and avoids having lots of custom widths of divs specified via CSS.

It also changes the display of the reports and comments to be more
like diary entry comments, by having all metadata on one line and shown
before the comment / report text.
---
 app/assets/stylesheets/common.scss  | 17 -----------------
 app/views/issues/_comments.html.erb | 12 ++++++------
 app/views/issues/_reports.html.erb  | 16 +++++++---------
 app/views/issues/show.html.erb      |  8 +++-----
 config/locales/en.yml               |  5 ++---
 5 files changed, 18 insertions(+), 40 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index d7984436a8..5ab07e5cf5 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -2689,20 +2689,7 @@ input.richtext_title[type="text"] {
   opacity: 0.7;
 }
 
-.report-related-block {
-  display:inline-block;
-}
-
-.report-block {
-  width:475px;
-  float:left;
-  margin-right:100px;
-}
-
 .related-reports {
-  width: 280px;
-  float: right;
-
   ul {
     padding-left: $lineheight;
     margin-bottom: 0;
@@ -2713,10 +2700,6 @@ input.richtext_title[type="text"] {
   }
 }
 
-.issue-comments {
-  width:475px;
-}
-
 .issues-list {
   td:nth-child(2) {
     white-space: nowrap;
diff --git a/app/views/issues/_comments.html.erb b/app/views/issues/_comments.html.erb
index 7ff0948db5..54932cc56b 100644
--- a/app/views/issues/_comments.html.erb
+++ b/app/views/issues/_comments.html.erb
@@ -1,15 +1,15 @@
 <div class="issue-comments">
   <% comments.each do |comment| %>
     <div class="comment">
-      <div style="float:left">
+      <div class="float-left">
         <%= link_to user_thumbnail(comment.user), user_path(comment.user) %>
       </div>
-      <b> <%= link_to comment.user.display_name, user_path(comment.user) %> </b> <br />
-      <%= comment.body %>
+      <p class="text-muted mb-0">
+        <%= t ".comment_from_html", :user_link => link_to(comment.user.display_name, user_path(comment.user)),
+                                    :comment_created_at => l(comment.created_at.to_datetime, :format => :friendly) %>
+      </p>
+      <p><%= comment.body %></p>
     </div>
-    <span class="deemphasize">
-      <%= t(".created_at", :datetime => l(comment.created_at.to_datetime, :format => :friendly)) %>
-    </span>
     <hr>
   <% end %>
 </div>
diff --git a/app/views/issues/_reports.html.erb b/app/views/issues/_reports.html.erb
index 1a43a73c73..143f2d8871 100644
--- a/app/views/issues/_reports.html.erb
+++ b/app/views/issues/_reports.html.erb
@@ -1,16 +1,14 @@
 <% reports.each do |report| %>
   <div class="report">
-    <div style="float:left">
+    <div class="float-left">
       <%= link_to user_thumbnail(report.user), user_path(report.user) %>
     </div>
-    <%= t ".reported_by_html", :category => report.category, :user => link_to(report.user.display_name, user_path(report.user)) %>
-    <br />
-    <span class="deemphasize">
-      <%= t(".updated_at", :datetime => l(report.updated_at.to_datetime, :format => :friendly)) %>
-    </span>
-    <br />
-    <%= report.details %>
-    <br />
+    <p class="text-muted mb-0">
+      <%= t ".reported_by_html", :category => report.category,
+                                 :user => link_to(report.user.display_name, user_path(report.user)),
+                                 :updated_at => l(report.updated_at.to_datetime, :format => :friendly) %>
+    </p>
+    <p><%= report.details %></p>
   </div>
   <hr>
 <% end %>
diff --git a/app/views/issues/show.html.erb b/app/views/issues/show.html.erb
index 3e2f5ef488..24a74c728e 100644
--- a/app/views/issues/show.html.erb
+++ b/app/views/issues/show.html.erb
@@ -19,9 +19,8 @@
 <p><%= link_to t(".reopen"), reopen_issue_url(@issue), :method => :post if @issue.may_reopen? %></p>
 <% end %>
 
-<div class="report-related-block">
-
-  <div class="report-block">
+<div class="row">
+  <div class="col-md-8">
     <h3><%= t ".reports_of_this_issue" %></h3>
 
     <% if @read_reports.present? %>
@@ -37,11 +36,10 @@
       <%= render "reports", :reports => @unread_reports %>
     </div>
     <% end %>
-    <br />
   </div>
 
   <% if @issue.reported_user %>
-    <div class="related-reports">
+    <div class="col-md-4 related-reports">
       <h3><%= t ".other_issues_against_this_user" %></h3>
       <% if @related_issues.count > 1 %>
         <ul>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 7c3ae073e8..173fc158e6 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1070,11 +1070,10 @@ en:
     reopen:
       reopened: Issue status has been set to 'Open'
     comments:
-      created_at: "On %{datetime}"
+      comment_from_html: "Comment from %{user_link} on %{comment_created_at}"
       reassign_param: Reassign Issue?
     reports:
-      updated_at: "On %{datetime}"
-      reported_by_html: "Reported as %{category} by %{user}"
+      reported_by_html: "Reported as %{category} by %{user} on %{updated_at}"
     helper:
       reportable_title:
         diary_comment: "%{entry_title}, comment #%{comment_id}"