From 29a9ee748cc1a1fbc908cc397b96bce6b173257e Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Tue, 16 Apr 2019 21:54:19 +0100
Subject: [PATCH] Update meta discussion section

---
 .../twentynineteen-tailwindcss/comments.php       |  4 ++--
 .../src/css/components/comments.css               | 15 +++++++++++++++
 .../twentynineteen-tailwindcss/src/css/style.css  |  1 +
 .../template-parts/post/discussion-meta.php       |  4 ++--
 4 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 wp-content/themes/twentynineteen-tailwindcss/src/css/components/comments.css

diff --git a/wp-content/themes/twentynineteen-tailwindcss/comments.php b/wp-content/themes/twentynineteen-tailwindcss/comments.php
index 4dc6f74..0100f71 100644
--- a/wp-content/themes/twentynineteen-tailwindcss/comments.php
+++ b/wp-content/themes/twentynineteen-tailwindcss/comments.php
@@ -24,8 +24,8 @@ if ( post_password_required() ) {
 $discussion = twentynineteen_get_discussion_data();
 ?>
 
-<div id="comments" class="<?php echo comments_open() ? 'comments-area' : 'comments-area comments-closed'; ?>">
-	<div class="<?php echo $discussion->responses > 0 ? 'comments-title-wrap' : 'comments-title-wrap no-responses'; ?>">
+<div id="comments" class="max-w-xl <?php echo comments_open() ? 'comments-area' : 'comments-area comments-closed'; ?>">
+	<div class="lg:flex lg:justify-between lg:items-baseline">
 		<h2 class="text-4xl font-bold">
 		<?php
 		if ( comments_open() ) {
diff --git a/wp-content/themes/twentynineteen-tailwindcss/src/css/components/comments.css b/wp-content/themes/twentynineteen-tailwindcss/src/css/components/comments.css
new file mode 100644
index 0000000..8b6cfb1
--- /dev/null
+++ b/wp-content/themes/twentynineteen-tailwindcss/src/css/components/comments.css
@@ -0,0 +1,15 @@
+.discussion-avatar-list {
+    @apply flex;
+}
+
+.discussion-avatar-list li {
+  @apply mb-1;
+
+  &:not(:first-child) {
+    @apply -ml-3;
+  }
+}
+
+.discussion-avatar-list img {
+    @apply rounded-full w-10;
+}
diff --git a/wp-content/themes/twentynineteen-tailwindcss/src/css/style.css b/wp-content/themes/twentynineteen-tailwindcss/src/css/style.css
index a8b6ac3..e246756 100644
--- a/wp-content/themes/twentynineteen-tailwindcss/src/css/style.css
+++ b/wp-content/themes/twentynineteen-tailwindcss/src/css/style.css
@@ -25,6 +25,7 @@ h2:before {
   @apply absolute opacity-0 pointer-events-none;
 }
 
+@import 'components/comments.css';
 @import 'components/content.css';
 @import 'components/forms.css';
 @import 'components/post.css';
diff --git a/wp-content/themes/twentynineteen-tailwindcss/template-parts/post/discussion-meta.php b/wp-content/themes/twentynineteen-tailwindcss/template-parts/post/discussion-meta.php
index 61a96dc..c0c4034 100644
--- a/wp-content/themes/twentynineteen-tailwindcss/template-parts/post/discussion-meta.php
+++ b/wp-content/themes/twentynineteen-tailwindcss/template-parts/post/discussion-meta.php
@@ -19,13 +19,13 @@ if ( $has_responses ) {
 }
 ?>
 
-<div class="discussion-meta">
+<div>
 	<?php
 	if ( $has_responses ) {
 		twentynineteen_discussion_avatars_list( $discussion->authors );
 	}
 	?>
-	<p class="flex items-center">
+	<p class="flex items-center text-sm">
 		<?php echo twentynineteen_get_icon_svg( 'comment', 16 ); ?>
 		<span class="ml-2"><?php echo esc_html( $meta_label ); ?></span>
 	</p>