css: factor out shared forum post / comment css.

app/javascript/src/styles/common/messages.scss

@@ -0,0 +1,53 @@
+div.list-of-messages {
+  margin: 1em 0;
+
+  article.message {
+    display: flex;
+    margin-top: 2em;
+    word-wrap: break-word;
+    padding: 5px;
+
+    &:first-of-type {
+      margin-top: 1em;
+    }
+
+    div.author {
+      flex-basis: 12em;
+      margin-right: 1em;
+
+      time {
+        font-style: italic;
+      }
+    }
+
+    div.content {
+      flex: 1;
+
+      menu {
+        li {
+          margin-right: 1em;
+        }
+      }
+    }
+
+    @media (max-width: 660px) {
+      display: block;
+      margin-top: 3em;
+
+      div.author {
+        margin: 0 0 1em;
+
+        h4 {
+          display: inline;
+          margin-right: 0.5em;
+        }
+
+        time {
+          display: inline;
+          color: var(--muted-text-color);
+          font-size: 0.8em;
+        }
+      }
+    }
+  }
+}

app/javascript/src/styles/specific/comments.scss

@@ -7,16 +7,8 @@ div.comments-for-post {
 
   div.list-of-comments {
     article.comment {
-      display: flex;
-      margin-top: 2em;
-      word-wrap: break-word;
-      padding: 5px;
       flex: 1;
 
-      &:first-of-type {
-        margin-top: 1em;
-      }
-
       &[data-is-sticky="true"] {
         background: var(--comment-sticky-background-color);
       }
@@ -40,25 +32,6 @@ div.comments-for-post {
           opacity: 1.0;
         }
       }
-
-      div.author {
-        flex-basis: 12em;
-        margin-right: 1em;
-
-        time {
-          font-style: italic;
-        }
-      }
-
-      div.content {
-        flex: 1;
-
-        menu {
-          li {
-            margin-right: 1em;
-          }
-        }
-      }
     }
   }
 }
@@ -126,27 +99,6 @@ form.edit_comment div.input.boolean {
 }
 
 @media screen and (max-width: 660px) {
-  div.comments-for-post div.list-of-comments article.comment {
-    display: block;
-    margin-top: 3em;
-    padding: 5px;
-
-    div.author {
-      margin: 0 0 1em;
-
-      h4 {
-        display: inline;
-        margin-right: 0.5em;
-      }
-
-      time {
-        display: inline;
-        color: var(--muted-text-color);
-        font-size: 0.8em;
-      }
-    }
-  }
-
   div#c-comments div#a-index, div#c-comments div#a-show {
     margin: 0 0.5em;
 
@@ -171,8 +123,4 @@ form.edit_comment div.input.boolean {
       }
     }
   }
-
-  div.new-comment {
-    margin: 1em 0;
-  }
 }

app/javascript/src/styles/specific/forum.scss

@@ -1,13 +1,5 @@
 div.list-of-forum-posts {
   article.forum-post {
-    display: flex;
-    margin-top: 2em;
-    word-wrap: break-word;
-
-    &:first-of-type {
-      margin-top: 1em;
-    }
-
     a.voted {
       font-weight: bold;
     }
@@ -24,18 +16,7 @@ div.list-of-forum-posts {
       color: var(--forum-vote-down-color);
     }
 
-    div.author {
-      flex-basis: 12em;
-      margin-right: 1em;
-
-      time {
-        font-style: italic;
-      }
-    }
-
     div.content {
-      flex: 1;
-
       .edit_forum_post, .edit_forum_topic {
         display: none;
       }
@@ -44,10 +25,6 @@ div.list-of-forum-posts {
         ul.votes {
           margin: 0.5em 0;
         }
-
-        li {
-          margin-right: 1em;
-        }
       }
     }
   }
@@ -86,24 +63,4 @@ div#c-forum-topics {
   #c-forum-topics #a-show {
     padding: 0 0.5em;
   }
-
-  div.list-of-forum-posts article.forum-post {
-    display: block;
-    margin-top: 3em;
-
-    div.author {
-      margin: 0 0 1em;
-
-      h4 {
-        display: inline;
-        margin-right: 0.5em;
-      }
-
-      time {
-        display: inline;
-        color: var(--muted-text-color);
-        font-size: 0.8em;
-      }
-    }
-  }
 }

app/views/comments/_index_by_comment.html.erb

@@ -1,5 +1,5 @@
 <div id="p-index-by-comment" class="comments-for-post">
-  <div class="list-of-comments">
+  <div class="list-of-comments list-of-messages">
     <% @comments.each do |comment| %>
       <% if CurrentUser.is_moderator? || (params[:search] && params[:search][:is_deleted] =~ /t/) || !comment.is_deleted? %>
         <%= content_tag(:div, { id: "post_#{comment.post.id}", class: ["post", *PostPresenter.preview_class(comment.post)].join(" ") }.merge(PostPresenter.data_attributes(comment.post))) do %>

app/views/comments/partials/index/_list.html.erb

@@ -11,7 +11,7 @@
     </div>
   <% end %>
 
-  <div class="list-of-comments">
+  <div class="list-of-comments list-of-messages">
     <% if comments.present? %>
       <%= render partial: "comments/partials/show/comment", collection: comments %>
     <% elsif post.last_commented_at.present? %>

app/views/comments/partials/show/_comment.html.erb

@@ -1,6 +1,6 @@
 <% if CurrentUser.is_moderator? || (params[:search] && params[:search][:is_deleted] =~ /t/) || !comment.is_deleted? %>
   <a name="comment-<%= comment.id %>"></a>
-  <article class="comment"
+  <article class="comment message"
            data-id="<%= comment.id %>"
            data-post-id="<%= comment.post_id %>"
            data-creator-id="<%= comment.creator_id %>"

app/views/comments/show.html.erb

@@ -1,7 +1,7 @@
 <div id="c-comments">
   <div id="a-show">
     <div class="comments-for-post">
-      <div class="list-of-comments">
+      <div class="list-of-comments list-of-messages">
         <%= content_tag(:div, { id: "post_#{@comment.post_id}", class: ["post", *PostPresenter.preview_class(@comment.post)].join(" ") }.merge(PostPresenter.data_attributes(@comment.post))) do %>
           <div class="preview">
             <% if @comment.post.visible? %>

app/views/forum_posts/_forum_post.html.erb

@@ -1,5 +1,5 @@
 <% if forum_post.visible?(CurrentUser.user, ActiveModel::Type::Boolean.new.cast(params.dig(:search, :is_deleted))) %>
-  <article class="forum-post" id="forum_post_<%= forum_post.id %>" data-forum-post-id="<%= forum_post.id %>" data-creator="<%= forum_post.creator.name %>">
+  <article class="forum-post message" id="forum_post_<%= forum_post.id %>" data-forum-post-id="<%= forum_post.id %>" data-creator="<%= forum_post.creator.name %>">
     <div class="author">
       <h4>
         <%= link_to_user forum_post.creator %>

app/views/forum_posts/_listing.html.erb

@@ -1,7 +1,7 @@
 <%- # forum_post %>
 <%- # original_forum_post_id %>
 
-<div class="list-of-forum-posts">
+<div class="list-of-forum-posts list-of-messages">
   <% forum_posts.each do |forum_post| %>
     <%= render "forum_posts/forum_post", :forum_post => forum_post, :original_forum_post_id => original_forum_post_id %>
   <% end %>

app/views/forum_posts/show.html.erb

@@ -1,5 +1,5 @@
 <div id="c-forum-posts">
-  <div id="a-show" class="single-forum-post list-of-forum-posts">
+  <div id="a-show" class="single-forum-post list-of-forum-posts list-of-messages">
     <h1>Topic: <%= @forum_post.topic.title %></h1>
     <%= render "forum_post", :forum_post => @forum_post, :original_forum_post_id => @forum_post.topic.original_post.id %>
   </div>