Rework diary comments to use flex grid rather than floats and margins

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index ccb0d74932b5415cd8b60ecadeb2ac4d5188edac..93e660a97bda0a8f78e8f755c15aa217d6b8d353 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -1612,10 +1612,6 @@ dl.dl-inline {
   }
 }
 
-.comments .richtext {
-  margin-left: 70px;
-}
-
 /* Rules for the user notes list */
 
 .note_list {

diff --git a/app/views/diary_entries/_diary_comment.html.erb b/app/views/diary_entries/_diary_comment.html.erb
index a7cdf21d7321d2215dc8caa915d8cd884c437e54..5423e26865a6f34607c567295d6c7be8f5285f3b 100644 (file)
--- a/app/views/diary_entries/_diary_comment.html.erb
+++ b/app/views/diary_entries/_diary_comment.html.erb
@@ -1,19 +1,23 @@
-<div class="clearfix diary-comment<%= " text-muted deleted" unless diary_comment.visible? %>">
-  <%= user_thumbnail diary_comment.user %>
-  <p class="text-muted comment-heading" id="comment<%= diary_comment.id %>"><%= t(".comment_from_html", :link_user => (link_to diary_comment.user.display_name, user_path(diary_comment.user)), :comment_created_at => link_to(l(diary_comment.created_at, :format => :friendly), :anchor => "comment#{diary_comment.id}")) %>
-    <% if current_user and diary_comment.user.id != current_user.id %>
-      | <%= report_link(t(".report"), diary_comment) %>
-    <% end %>
-  </p>
-
-  <div class="richtext text-break"><%= diary_comment.body.to_html %></div>
-  <% if can? :hidecomment, DiaryEntry %>
-    <span>
-      <% if diary_comment.visible? %>
-        <%= link_to t(".hide_link"), hide_diary_comment_path(:display_name => diary_comment.diary_entry.user.display_name, :id => diary_comment.diary_entry.id, :comment => diary_comment.id), :method => :post, :data => { :confirm => t(".confirm") } %>
-      <% else %>
-        <%= link_to t(".unhide_link"), unhide_diary_comment_path(:display_name => diary_comment.diary_entry.user.display_name, :id => diary_comment.diary_entry.id, :comment => diary_comment.id), :method => :post, :data => { :confirm => t(".confirm") } %>
+<div class="row diary-comment<%= " text-muted deleted" unless diary_comment.visible? %>">
+  <div class="col-auto">
+    <%= user_thumbnail diary_comment.user, :class => "user_thumbnail_no_margins" %>
+  </div>
+  <div class="col">
+    <p class="text-muted comment-heading" id="comment<%= diary_comment.id %>"><%= t(".comment_from_html", :link_user => (link_to diary_comment.user.display_name, user_path(diary_comment.user)), :comment_created_at => link_to(l(diary_comment.created_at, :format => :friendly), :anchor => "comment#{diary_comment.id}")) %>
+      <% if current_user and diary_comment.user.id != current_user.id %>
+        | <%= report_link(t(".report"), diary_comment) %>
       <% end %>
-    </span>
-  <% end %>
+    </p>
+
+    <div class="richtext text-break"><%= diary_comment.body.to_html %></div>
+    <% if can? :hidecomment, DiaryEntry %>
+      <span>
+        <% if diary_comment.visible? %>
+          <%= link_to t(".hide_link"), hide_diary_comment_path(:display_name => diary_comment.diary_entry.user.display_name, :id => diary_comment.diary_entry.id, :comment => diary_comment.id), :method => :post, :data => { :confirm => t(".confirm") } %>
+        <% else %>
+          <%= link_to t(".unhide_link"), unhide_diary_comment_path(:display_name => diary_comment.diary_entry.user.display_name, :id => diary_comment.diary_entry.id, :comment => diary_comment.id), :method => :post, :data => { :confirm => t(".confirm") } %>
+        <% end %>
+      </span>
+    <% end %>
+  </div>
 </div>