Merge pull request #446 from bootscore/Improve-comments-section

Improve comments section
bootscore · Apr 9, 2023 · f3429db · f3429db
2 parents 8d781df + 02932ba
commit f3429db
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 17 deletions.
diff --git a/comments.php b/comments.php
@@ -27,7 +27,7 @@
   // You can start editing here -- including this comment!
   if (have_comments()) : ?>
 
-    <h2 class="comments-title">
+    <h2 class="comments-title mb-4">
       <?php
       $comments_number = get_comments_number();
       if ('1' === $comments_number) {

diff --git a/inc/comment-list.php b/inc/comment-list.php
@@ -22,7 +22,7 @@ function bootscore_comment($comment, $args, $depth) {
 
     if ('pingback' == $comment->comment_type || 'trackback' == $comment->comment_type) : ?>
 
-      <li class="bg-danger" id="comment-<?php comment_ID(); ?>" <?php comment_class('media'); ?>>
+      <li class="alert alert-info" id="comment-<?php comment_ID(); ?>" <?php comment_class('media'); ?>>
         <div class="comment-body">
           <?php _e('Pingback:', 'bootscore'); ?> <?php comment_author_link(); ?> <?php edit_comment_link(__('Edit', 'bootscore'), '<span class="edit-link">', '</span>'); ?>
         </div>
@@ -31,7 +31,7 @@ function bootscore_comment($comment, $args, $depth) {
 
       <li id="comment-<?php comment_ID(); ?>" <?php comment_class(empty($args['has_children']) ? '' : 'parent'); ?>>
 
-        <article id="div-comment-<?php comment_ID(); ?>" class="comment-body mt-4 d-flex">
+        <article id="div-comment-<?php comment_ID(); ?>" class="comment-body mb-4 d-flex">
 
           <div class="flex-shrink-0 me-3">
             <?php if (0 != $args['avatar_size']) echo get_avatar($comment, $args['avatar_size'], '', '', array('class' => 'img-thumbnail rounded-circle')); ?>
@@ -44,7 +44,7 @@ function bootscore_comment($comment, $args, $depth) {
                 <div class="mt-0"><?php printf(__('%s <span class="says d-none">says:</span>', 'bootscore'), sprintf('<h3 class="h5">%s</h3>', get_comment_author_link())); ?>
                 </div>
 
-                <p class="small comment-meta text-muted">
+                <p class="small comment-meta text-secondary">
                   <time datetime="<?php comment_time('c'); ?>">
                     <?php printf(_x('%1$s at %2$s', '1: date, 2: time', 'bootscore'), get_comment_date(), get_comment_time()); ?>
                   </time>
@@ -53,12 +53,10 @@ function bootscore_comment($comment, $args, $depth) {
 
 
                 <?php if ('0' == $comment->comment_approved) : ?>
-                  <p class="comment-awaiting-moderation"><?php _e('Your comment is awaiting moderation.', 'bootscore'); ?></p>
+                  <p class="comment-awaiting-moderation alert alert-info"><?php _e('Your comment is awaiting moderation.', 'bootscore'); ?></p>
                 <?php endif; ?>
 
-                <div class="card-block">
-                  <?php comment_text(); ?>
-                </div><!-- .comment-content -->
+                <?php comment_text(); ?>
 
                 <?php comment_reply_link(
                   array_merge(
@@ -67,8 +65,8 @@ function bootscore_comment($comment, $args, $depth) {
                       'add_below' => 'div-comment',
                       'depth'     => $depth,
                       'max_depth' => $args['max_depth'],
-                      'before'     => '<footer class="reply comment-reply">',
-                      'after'     => '</footer><!-- .reply -->'
+                      'before'     => '<p class="reply comment-reply">',
+                      'after'     => '</p>'
                     )
                   )
                 ); ?>
@@ -89,7 +87,7 @@ function bootscore_comment($comment, $args, $depth) {
 // h2 Reply Title
 add_filter('comment_form_defaults', 'custom_reply_title');
 function custom_reply_title($defaults) {
-  $defaults['title_reply_before'] = '<h2 id="reply-title" class="mt-4">';
+  $defaults['title_reply_before'] = '<h2 id="reply-title" class="h4">';
   $defaults['title_reply_after'] = '</h2>';
   return $defaults;
 }

diff --git a/scss/bootscore/_comments.scss b/scss/bootscore/_comments.scss
@@ -44,7 +44,7 @@ ul.comment-list {
 }
 
 #cancel-comment-reply-link {
-  margin-left: 1rem;
+  margin-left: $spacer * .5;
 }
 
 // Adding width to comment. When using <pre> in comment, comment-content will not crashed
@@ -59,3 +59,12 @@ ul.comment-list {
 .bypostauthor {
   display: block;
 }
+
+// Last p bottom margin in comment card
+.comment-content .card p:last-child {
+  margin-bottom: 0;
+}
+
+.comment-respond {
+  margin-bottom: $spacer * 1.5;
+}
diff --git a/scss/bootscore_woocommerce/_wc_alerts.scss b/scss/bootscore_woocommerce/_wc_alerts.scss
@@ -18,7 +18,8 @@ WooCommerce Alerts
   @extend .alert-danger-icon;
 }
 
-.woocommerce-info {
+.woocommerce-info,
+.woocommerce-noreviews {
   @extend .alert;
   @extend .alert-info;
   @extend .alert-icon;

diff --git a/scss/bootscore_woocommerce/_wc_comments.scss b/scss/bootscore_woocommerce/_wc_comments.scss
@@ -13,7 +13,6 @@ WooCommerce Comments
   padding-left: 65px;
 }
 
-// Last p bottom margin in comment card
-#woo-comments .comment-content p:last-child {
-  margin-bottom: 0;
-}
+.woocommerce #reviews h3 {
+  margin-bottom: $spacer * .5,;
+}