css: switch comments and forum posts to flexbox.

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

@@ -1,15 +1,13 @@
 @import "../base/000_vars.scss";
 
 div.comments-for-post {
-  div.notices {
-    margin: 1em 0;
-  }
-
   div.list-of-comments {
     article.comment {
+      display: flex;
       margin-bottom: 2em;
       word-wrap: break-word;
       padding: 5px;
+      flex: 1;
 
       &[data-is-sticky="true"] {
         background: var(--comment-sticky-background-color);
@@ -36,9 +34,7 @@ div.comments-for-post {
       }
 
       div.author {
-        width: 12em;
+        flex-basis: 12em;
-        float: left;
-        overflow: hidden;
         margin-right: 1em;
 
         h1 {
@@ -48,8 +44,7 @@ div.comments-for-post {
       }
 
       div.content {
-        margin-left: 13em;
+        flex: 1;
-        min-width: 17em;
 
         menu {
           li {
@@ -61,12 +56,6 @@ div.comments-for-post {
   }
 }
 
-div#c-posts {
-  div.comments-for-post {
-    float: left;
-  }
-}
-
 div#c-comments {
   div#a-index, div#a-show {
     div.header {
@@ -83,15 +72,6 @@ div#c-comments {
       }
     }
 
-    div.preview {
-      float: left;
-      width: 154px;
-      height: 154px;
-      margin-right: 30px;
-      overflow: hidden;
-      text-align: center;
-    }
-
     div.post-preview {
       &[data-tags~=animated], &[data-file-ext=swf], &[data-file-ext=webm], &[data-file-ext=zip], &[data-file-ext=mp4] {
         div.preview {
@@ -115,24 +95,19 @@ div#c-comments {
     }
 
     div.post {
+      display: flex;
       margin-bottom: 4em;
 
-      div.comments-for-post {
+      div.preview {
-        margin-left: 184px;
+        width: 154px;
-        min-width: 30em;
+        height: 154px;
-        
+        margin-right: 30px;
-        div.list-of-comments {
+        overflow: hidden;
-          float: left;
+        text-align: center;
-          width: 100%;
-        }
       }
-    }
+
-    
+      div.comments-for-post {
-    div.comments-for-post {
+        flex: 1;
-      div.post {
-        article.comment {
-          margin-left: 184px;
-        }
       }
     }
   }

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

@@ -1,6 +1,7 @@
 div.list-of-forum-posts {
   article {
-    margin: 1em 0em;
+    display: flex;
+    margin-top: 3em;
     word-wrap: break-word;
 
     a.voted {
@@ -24,9 +25,7 @@ div.list-of-forum-posts {
     }
 
     div.author {
-      padding: 1em 1em 0 1em;
+      flex-basis: 13em;
-      width: 12em;
-      float: left;
 
       time {
         font-style: italic;
@@ -34,8 +33,7 @@ div.list-of-forum-posts {
     }
 
     div.content {
-      padding: 1em;
+      flex: 1;
-      margin-left: 14em;
 
       .edit_forum_post, .edit_forum_topic {
         display: none;
@@ -91,20 +89,18 @@ div#c-forum-topics {
   }
 
   div.list-of-forum-posts article {
+    display: block;
+    margin-top: 1em;
     border: var(--forum-post-border);
 
-    div.author, div.content {
-      width: auto;
-      float: none;
-    }
-
     div.author {
+      padding: 1em 1em 0;
       border-bottom: var(--forum-post-border);
       background: var(--forum-post-author-background);
     }
 
     div.content {
-      margin-left: 0;
+      padding: 1em;
     }
   }
 }

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

@@ -391,10 +391,6 @@ div#c-posts {
       right: 5px;
       cursor: pointer;
     }
-    
-    div.comments-for-post {
-      width:100%
-    }
 
     #artist-commentary {
       border: var(--post-artist-commentary-container-border);

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

@@ -224,7 +224,6 @@
 
   div#page {
     div.comments-for-post div.list-of-comments article.comment div.content {
-      clear: both;
       margin: 0;
     }
   }

app/views/comments/_index_by_comment.html.erb

@@ -9,7 +9,6 @@
             <% end %>
           </div>
           <%= render :partial => "comments/partials/show/comment", :collection => [comment] %>
-          <div class="clearfix"></div>
         <% end %>
       <% end %>
     <% end %>

app/views/comments/_index_by_post.html.erb

@@ -16,7 +16,6 @@
           <%= link_to(image_tag(post.preview_file_url), post_path(post)) %>
         </div>
         <%= render "comments/partials/index/list", post: post, comments: post.comments.visible(CurrentUser.user).last(6), page: :comments %>
-        <div class="clearfix"></div>
       <% end %>
     <% end %>
   <% end %>

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

@@ -21,8 +21,6 @@
     <% end %>
   </div>
 
-  <div class="clearfix"></div>
-
   <% if CurrentUser.is_member? %>
     <div class="new-comment">
       <p><%= link_to "Post comment", new_comment_path(comment: { post_id: post.id }), :class => "expand-comment-response" %></p>

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

@@ -64,6 +64,5 @@
         <% end %>
       <% end %>
     </div>
-    <div class="clearfix"></div>
   </article>
 <% end %>

app/views/comments/show.html.erb

@@ -9,7 +9,6 @@
             <% end %>
           </div>
           <%= render :partial => "comments/partials/show/comment", :collection => [@comment] %>
-          <div class="clearfix"></div>
         <% end %>
       </div>
     </div>

app/views/forum_posts/_forum_post.html.erb

@@ -54,6 +54,5 @@
         <% end %>
       <% end %>
     </div>
-    <div class="clearfix"></div>
   </article>
 <% end %>