Rework issues display page to be responsive
authorAndy Allan <git@gravitystorm.co.uk>
Wed, 15 Jan 2020 10:58:47 +0000 (11:58 +0100)
committerAndy Allan <git@gravitystorm.co.uk>
Wed, 15 Jan 2020 11:20:27 +0000 (12:20 +0100)
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
app/views/issues/_comments.html.erb
app/views/issues/_reports.html.erb
app/views/issues/show.html.erb
config/locales/en.yml

index d798443..5ab07e5 100644 (file)
@@ -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;
index 7ff0948..54932cc 100644 (file)
@@ -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>
index 1a43a73..143f2d8 100644 (file)
@@ -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 %>
index 3e2f5ef..24a74c7 100644 (file)
@@ -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? %>
       <%= 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>
index 7c3ae07..173fc15 100644 (file)
@@ -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}"