From dd02938a96c9ce0fc72cb7373f3a7e3aafeea158 Mon Sep 17 00:00:00 2001
From: Marcin Kurczewski <mkurczew@gmail.com>
Date: Fri, 24 Oct 2014 09:45:45 +0200
Subject: [PATCH] Improved comment list on small screens

---
 public_html/css/comments.css                | 30 ++++++++++-----------
 public_html/css/post-list.css               |  2 +-
 public_html/css/post.css                    |  1 +
 public_html/templates/post-comment-list.tpl |  2 +-
 4 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/public_html/css/comments.css b/public_html/css/comments.css
index 3d89ae4f..2a5672cc 100644
--- a/public_html/css/comments.css
+++ b/public_html/css/comments.css
@@ -19,15 +19,12 @@
 .comment {
 	margin: 0 0 1em 0;
 	padding: 0;
-}
-
-.comment .body,
-.comment .avatar {
-	display: inline-block;
+	display: flex;
 }
 
 .comment .avatar {
 	margin-right: 0.5em;
+	flex-shrink: 0;
 	vertical-align: top;
 }
 
@@ -82,24 +79,27 @@
 	margin: 0;
 	padding: 0;
 }
-#global-comment-list ul.posts>li>*:last-child:after {
-	display: block;
-	content: '';
-	clear: left;
-}
 #global-comment-list ul.posts>li {
 	margin-bottom: 2em;
 }
+#global-comment-list .post-comment {
+	display: flex;
+}
+@media all and (max-width: 40em) {
+	#global-comment-list .post-comment {
+		flex-direction: column;
+	}
+}
 #global-comment-list .post {
-	float: left;
+	flex-shrink: 0;
+	flex-grow: 0;
+	margin-right: 1em;
+	margin-bottom: 1em;
 }
 #global-comment-list .comment-add,
 #global-comment-list .comments>h1 {
 	display: none;
 }
-#global-comment-list .comments {
-	float: left;
-}
 #global-comment-list .post-small a {
-	margin: 0 1em 0 0;
+	margin: 0;
 }
diff --git a/public_html/css/post-list.css b/public_html/css/post-list.css
index 7db2c1b0..a0775105 100644
--- a/public_html/css/post-list.css
+++ b/public_html/css/post-list.css
@@ -53,7 +53,7 @@
 	position: relative;
 }
 .post-small a {
-	display: block;
+	display: inline-block;
 	margin: 0.2em;
 	border: 1px solid #999;
 	z-index: 1;
diff --git a/public_html/css/post.css b/public_html/css/post.css
index cb0f71f0..653b2c95 100644
--- a/public_html/css/post.css
+++ b/public_html/css/post.css
@@ -129,6 +129,7 @@
 	display: flex;
 	justify-content: space-around;
 	margin-bottom: 2em;
+	max-width: 30em;
 }
 #sidebar .essential li {
 	display: block;
diff --git a/public_html/templates/post-comment-list.tpl b/public_html/templates/post-comment-list.tpl
index 0130400e..c56e19a3 100644
--- a/public_html/templates/post-comment-list.tpl
+++ b/public_html/templates/post-comment-list.tpl
@@ -1,7 +1,7 @@
 <% if (canListComments && comments.length) { %>
 	<div class="comments">
 		<h1>Comments</h1>
-		<ul>
+		<ul class="comments">
 		</ul>
 	</div>
 <% } %>