From c78600536e1522c1be89bf4428ee79ed31957713 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Tue, 16 Apr 2019 21:31:33 +0100 Subject: [PATCH 1/7] Add comments.php --- .../twentynineteen-tailwindcss/comments.php | 128 ++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 wp-content/themes/twentynineteen-tailwindcss/comments.php diff --git a/wp-content/themes/twentynineteen-tailwindcss/comments.php b/wp-content/themes/twentynineteen-tailwindcss/comments.php new file mode 100644 index 0000000..d74c1cf --- /dev/null +++ b/wp-content/themes/twentynineteen-tailwindcss/comments.php @@ -0,0 +1,128 @@ + + +
+
+

+ responses ) { + /* translators: %s: post title */ + printf( _x( 'One reply on “%s”', 'comments title', 'twentynineteen' ), get_the_title() ); + } else { + printf( + /* translators: 1: number of comments, 2: post title */ + _nx( + '%1$s reply on “%2$s”', + '%1$s replies on “%2$s”', + $discussion->responses, + 'comments title', + 'twentynineteen' + ), + number_format_i18n( $discussion->responses ), + get_the_title() + ); + } + } + ?> +

+ +
+ +
    + new TwentyNineteen_Walker_Comment(), + 'avatar_size' => twentynineteen_get_avatar_size(), + 'short_ping' => true, + 'style' => 'ol', + ) + ); + ?> +
+ sprintf( '%s %s %s', $prev_icon, __( 'Previous', 'twentynineteen' ), __( 'Comments', 'twentynineteen' ) ), + 'next_text' => sprintf( '%s %s %s', __( 'Next', 'twentynineteen' ), __( 'Comments', 'twentynineteen' ), $next_icon ), + ) + ); + endif; + + // Show comment form at bottom if showing newest comments at the bottom. + if ( comments_open() && 'asc' === strtolower( get_option( 'comment_order', 'asc' ) ) ) : + ?> +
+ + + +
+ +

+ +

+ +
From bc99494ae9474cd787b462018c4884a29002d459 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Tue, 16 Apr 2019 21:32:18 +0100 Subject: [PATCH 2/7] Update comment section heading --- wp-content/themes/twentynineteen-tailwindcss/comments.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wp-content/themes/twentynineteen-tailwindcss/comments.php b/wp-content/themes/twentynineteen-tailwindcss/comments.php index d74c1cf..4dc6f74 100644 --- a/wp-content/themes/twentynineteen-tailwindcss/comments.php +++ b/wp-content/themes/twentynineteen-tailwindcss/comments.php @@ -26,7 +26,7 @@ $discussion = twentynineteen_get_discussion_data();
-

+

Date: Tue, 16 Apr 2019 21:38:05 +0100 Subject: [PATCH 3/7] Create discussion-meta.php --- .../template-parts/post/discussion-meta.php | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 wp-content/themes/twentynineteen-tailwindcss/template-parts/post/discussion-meta.php 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 new file mode 100644 index 0000000..add281d --- /dev/null +++ b/wp-content/themes/twentynineteen-tailwindcss/template-parts/post/discussion-meta.php @@ -0,0 +1,32 @@ +responses > 0; + +if ( $has_responses ) { + /* translators: %1(X comments)$s */ + $meta_label = sprintf( _n( '%d Comment', '%d Comments', $discussion->responses, 'twentynineteen' ), $discussion->responses ); +} else { + $meta_label = __( 'No comments', 'twentynineteen' ); +} +?> + +
+ authors ); + } + ?> +

+ + +

+
From d7de23fbd271cc32e9542169d35a8b133c2c972e Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Tue, 16 Apr 2019 21:38:24 +0100 Subject: [PATCH 4/7] Re-style discussion-meta-info --- .../template-parts/post/discussion-meta.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 add281d..61a96dc 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 @@ -25,8 +25,8 @@ if ( $has_responses ) { twentynineteen_discussion_avatars_list( $discussion->authors ); } ?> -

- - +

+ +

From 29a9ee748cc1a1fbc908cc397b96bce6b173257e Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Tue, 16 Apr 2019 21:54:19 +0100 Subject: [PATCH 5/7] 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(); ?> -
-
+
+

-
+
authors ); } ?> -

+

From 7ae5d67f938c7daf324d4ce30844f787a283ed53 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Tue, 16 Apr 2019 23:18:02 +0100 Subject: [PATCH 6/7] Style comment list --- .../src/css/components/avatars.css | 3 ++ .../src/css/components/comment-list.css | 44 +++++++++++++++++++ .../src/css/components/content.css | 2 + ...omments.css => discussion-avatar-list.css} | 0 .../src/css/style.css | 4 +- 5 files changed, 52 insertions(+), 1 deletion(-) create mode 100644 wp-content/themes/twentynineteen-tailwindcss/src/css/components/avatars.css create mode 100644 wp-content/themes/twentynineteen-tailwindcss/src/css/components/comment-list.css rename wp-content/themes/twentynineteen-tailwindcss/src/css/components/{comments.css => discussion-avatar-list.css} (100%) diff --git a/wp-content/themes/twentynineteen-tailwindcss/src/css/components/avatars.css b/wp-content/themes/twentynineteen-tailwindcss/src/css/components/avatars.css new file mode 100644 index 0000000..eecf66d --- /dev/null +++ b/wp-content/themes/twentynineteen-tailwindcss/src/css/components/avatars.css @@ -0,0 +1,3 @@ +.avatar { + @apply rounded-full; +} diff --git a/wp-content/themes/twentynineteen-tailwindcss/src/css/components/comment-list.css b/wp-content/themes/twentynineteen-tailwindcss/src/css/components/comment-list.css new file mode 100644 index 0000000..226e7a1 --- /dev/null +++ b/wp-content/themes/twentynineteen-tailwindcss/src/css/components/comment-list.css @@ -0,0 +1,44 @@ +.comment-list .comment, +.comment-author b.fn { + @apply mt-12 pl-24 relative w-full block; +} + +.comment-list { + .comment-author .avatar, + .comment-author > a.url { + @apply absolute top-0 left-0; + } + + .comment-author > b.fn { + @apply pl-0 text-2xl text-black; + } + .comment-author > b.fn a { + @apply text-inherit; + } + + .comment-author img { + @apply w-16; + } + + .comment-metadata { + @apply text-sm text-gray-900; + } + + .comment-content { + @apply mt-8 text-base; + } + + .comment-reply { + @apply mt-6 text-sm; + } +} + +.post-author-badge { + @apply absolute top-0 left-0 ml-10 w-6 h-6; + @apply flex items-center; + @apply bg-blue-500 rounded-full p-1; + + > svg { + @apply fill-current text-white block; + } +} diff --git a/wp-content/themes/twentynineteen-tailwindcss/src/css/components/content.css b/wp-content/themes/twentynineteen-tailwindcss/src/css/components/content.css index 4aa52f4..da441e6 100644 --- a/wp-content/themes/twentynineteen-tailwindcss/src/css/components/content.css +++ b/wp-content/themes/twentynineteen-tailwindcss/src/css/components/content.css @@ -1,3 +1,5 @@ +.markup, +.comment-content, .entry-content { @apply font-serif text-lg leading-loose; diff --git a/wp-content/themes/twentynineteen-tailwindcss/src/css/components/comments.css b/wp-content/themes/twentynineteen-tailwindcss/src/css/components/discussion-avatar-list.css similarity index 100% rename from wp-content/themes/twentynineteen-tailwindcss/src/css/components/comments.css rename to wp-content/themes/twentynineteen-tailwindcss/src/css/components/discussion-avatar-list.css diff --git a/wp-content/themes/twentynineteen-tailwindcss/src/css/style.css b/wp-content/themes/twentynineteen-tailwindcss/src/css/style.css index e246756..8b8b887 100644 --- a/wp-content/themes/twentynineteen-tailwindcss/src/css/style.css +++ b/wp-content/themes/twentynineteen-tailwindcss/src/css/style.css @@ -25,8 +25,10 @@ h2:before { @apply absolute opacity-0 pointer-events-none; } -@import 'components/comments.css'; +@import 'components/avatars.css'; +@import 'components/comment-list.css'; @import 'components/content.css'; +@import 'components/discussion-avatar-list.css'; @import 'components/forms.css'; @import 'components/post.css'; @import 'components/widgets.css'; From c1720b90ec25a60c81f99f87c3fe6fcd4b969f29 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Wed, 17 Apr 2019 00:01:56 +0100 Subject: [PATCH 7/7] Style the comment form --- .../twentynineteen-tailwindcss/comments.php | 4 +-- .../src/css/components/comment-form.css | 29 +++++++++++++++++++ .../src/css/style.css | 1 + 3 files changed, 32 insertions(+), 2 deletions(-) create mode 100644 wp-content/themes/twentynineteen-tailwindcss/src/css/components/comment-form.css diff --git a/wp-content/themes/twentynineteen-tailwindcss/comments.php b/wp-content/themes/twentynineteen-tailwindcss/comments.php index 0100f71..1e8fb89 100644 --- a/wp-content/themes/twentynineteen-tailwindcss/comments.php +++ b/wp-content/themes/twentynineteen-tailwindcss/comments.php @@ -101,10 +101,10 @@ $discussion = twentynineteen_get_discussion_data(); // Show comment form at bottom if showing newest comments at the bottom. if ( comments_open() && 'asc' === strtolower( get_option( 'comment_order', 'asc' ) ) ) : ?> -
+
- +
* { + @apply mt-4; + } + + label { + @apply w-full block pb-2; + @apply text-sm text-gray-700; + } + + input, + textarea { + @apply w-full p-3 border border-gray-400; + + &:focus { + @apply bg-white outline-none border-blue-700; + } + } + + .form-submit { + @apply mt-6; + } + + input[type=submit] { + @apply w-auto; + } +} diff --git a/wp-content/themes/twentynineteen-tailwindcss/src/css/style.css b/wp-content/themes/twentynineteen-tailwindcss/src/css/style.css index 8b8b887..e177b3d 100644 --- a/wp-content/themes/twentynineteen-tailwindcss/src/css/style.css +++ b/wp-content/themes/twentynineteen-tailwindcss/src/css/style.css @@ -26,6 +26,7 @@ h2:before { } @import 'components/avatars.css'; +@import 'components/comment-form.css'; @import 'components/comment-list.css'; @import 'components/content.css'; @import 'components/discussion-avatar-list.css';