Children comments

src/assets/js/js.js

@@ -19,4 +19,9 @@ jQuery(document).ready(function( $ ) {
             }
         }
     });
+
+    /**
+     * Align the comments childrens
+     */
+    $('#comments ul.children').addClass('align-children');
 });

src/assets/scss/_comments.scss

@@ -42,6 +42,20 @@
                     font-size: 0.7rem;
                 }
             }
+            .comment-text{
+                p{
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+    ul{
+        &.children{
+            &.align-children{
+                @media only screen and (min-width: 576px){
+                    margin-left: 2.3rem;
+                }
+            }
         }
     }
 }

src/comments.php

@@ -19,12 +19,12 @@ if (post_password_required()) {
 	<div class="col mt-3 mx-auto" id="comments">
 		<!--show the form-->
 		<?php if('open' == $post->comment_status) : ?>
-			<div id="respond" class="clearfix">        
 			    <?php if(get_option('comment_registration') && !$user_ID) : ?>
 					<p>
 					<?php printf( __( 'You must be %slogged%s in to post a comment.', 'tainacan-theme'), "<a href='" . get_option('home') . "/wp-login.php'>", "</a>" ); ?>
 					</p>        
 			    <?php else : ?>
+					<div id="respond" class="clearfix">        
 						<div for="comment" class="d-block">
 							<span class="text-jelly-bean"><?php _e('Leave your comment', 'tainacan-theme'); ?></span>
 							<span class="text-oslo-gray authenticated ml-sm-3">
@@ -51,10 +51,11 @@ if (post_password_required()) {
 							<?php cancel_comment_reply_link('Cancel'); ?>
 							<?php do_action('comment_form', $post->ID); ?>
 						</form>
+					</div>
 				<?php endif; ?>
 				<?php if (have_comments()) : ?>
 					<div class="row">
-						<div class="col col-sm-9 mx-sm-auto pl-sm-2 mt-4">
+						<div class="col col-sm-9 mx-sm-auto pl-sm-2 mt-4 list-comments">
 							<?php wp_list_comments('callback=tainacan_Comments_Callback'); ?>
 						</div>
 					</div>
@@ -62,10 +63,10 @@ if (post_password_required()) {
 					<?php if (get_comment_pages_count() > 1 && get_option('page_comments')) : ?>
 						<nav id="comment-nav-below" class="navigation" role="navigation">
 							<div class="nav-previous">
-								<?php previous_comments_link( _e('&larr; Newer', 'tainacan-theme')); ?>
+								<?php echo '&larr; '; previous_comments_link( _e('Newer', 'tainacan-theme')); ?>
 							</div>
 							<div class="nav-next">
-								<?php next_comments_link(_e('Older &rarr;', 'tainacan-theme')); ?>
+								<?php next_comments_link(_e('Older', 'tainacan-theme')); echo ' &rarr;'; ?>
 							</div>
 						</nav>
 					<?php endif; // check for comment navigation ?>
@@ -73,7 +74,6 @@ if (post_password_required()) {
 					<?php elseif (!comments_open() && '0' != get_comments_number() && post_type_supports(get_post_type(), 'comments')) : ?>
 						<p class="nocomments"><?php _e('Comments are closed.', 'tainacan-theme'); ?></p>
 				<?php endif; ?>
-			</div>
 		<?php endif; ?>
 	</div>
 </div>

src/functions/single-functions.php

@@ -8,8 +8,9 @@
 function tainacan_Comments_Callback($comment, $args, $depth) {
     //get comment to determine type
     $GLOBALS['comment'] = $comment;
-    global $post; ?>
+    global $post; 
-    <div <?php comment_class( $args['has_children'] ? ' has-children media' : ' media' ); ?>>
+    $class_has = "has-children media comment-". $comment->comment_ID; ?>
+    <div <?php comment_class( $args['has_children'] ? $class_has : ' media' ); ?>>
         <?php 
             $arg = array('class' => 'img-fluid rounded-circle mr-sm-3', );
             echo get_avatar($comment, 60, '', '', $arg);
@@ -34,7 +35,6 @@ function tainacan_Comments_Callback($comment, $args, $depth) {
                 </p>
             <?php endif; ?>
             <?php comment_text(); ?>
-            <p class="reply">
             <?php comment_reply_link( array_merge($args, array(
                         'reply_text' => __('Reply'),
                         'depth'      => $depth,
@@ -45,12 +45,20 @@ function tainacan_Comments_Callback($comment, $args, $depth) {
                 )); 
                 edit_comment_link( __( 'Edit' ), '<li class="edit-link list-inline-item">', '<i class="material-icons text-jelly-bean align-middle pl-1" style="font-size: 15px">mode_edit</i></li>' );
             ?>
+            <?php if($args['has_children']) : ?>
+                <p>
+                    <a href="#comments" class="hideChild-comments"><i class="material-icons align-top text-jelly-bean">arrow_drop_up</i><?php _e('Hide reply', 'tainacan-theme'); ?></a>
                 </p>
-
+            <?php endif; ?>
         </div>
     </div>
 <?php }
 
+function wrap_Comment($content){
+    return "<div class='comment-text'>". $content ."</div>";
+}
+add_filter( 'comment_text', 'wrap_Comment', 99);
+
 /**
  * Display date of post.
  */