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.

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index d7984436a82eda19a4c58d4ee8be9c08d64833f8..5ab07e5cf587443995b1fe3c19e0c367d878ca57 100644 (file)
--- 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 7ff0948db5e961fa53379ebea39e50c166aeb901..54932cc56b4f8f1e3b3905d4cd7760d7993ae470 100644 (file)
--- 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 1a43a73c7372d21333f78c48b453cf3fb3cf2efb..143f2d887106cb996406f62358b4d4e8f3429465 100644 (file)
--- 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 3e2f5ef488e34202519d9fe760e6191c14f12216..24a74c728ef0600f31cedd0438d64a419d1cddd0 100644 (file)
--- 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 7c3ae073e882ab6b055d6221154793fc6799f2cf..173fc158e69dfc268ce4fe5377d1b3f9c50b6568 100644 (file)
--- 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}"