css: fix comment layout on mobile.

Display comments and forum posts the same way on mobile.
2019-09-26 01:23:57 -05:00
parent cb6f467764
commit bca35d93bd
1 changed files with 43 additions and 0 deletions
--- a/app/javascript/src/styles/specific/comments.scss
+++ b/app/javascript/src/styles/specific/comments.scss
@@ -124,3 +124,46 @@ form.edit_comment div.input.boolean {
    vertical-align: initial;
  }
 }
+
+@media screen and (max-width: 660px) {
+  div.comments-for-post div.list-of-comments article.comment {
+    display: block;
+    margin-top: 1em;
+    padding: 0;
+    border: var(--forum-post-border);
+
+    div.author {
+      margin: 0;
+      padding: 1em;
+      border-bottom: var(--forum-post-border);
+      background: var(--forum-post-author-background);
+    }
+
+    div.content {
+      padding: 1em;
+    }
+  }
+
+  div#c-comments div#a-index, div#c-comments div#a-show {
+    div.post {
+      display: block;
+      margin: 0;
+
+      div.preview {
+        margin: 2em auto;
+        width: auto;
+        height: auto;
+      }
+
+      div.comments-for-post {
+        div.header div.row span.info {
+          display: block;
+        }
+
+        div.new-comment {
+          margin: 1em 0;
+        }
+      }
+    }
+  }
+}