From e6736413a416622f117f27a5440b893b506be84c Mon Sep 17 00:00:00 2001
From: Fabiano Alencar <fabianocarvalho15@gmail.com>
Date: Wed, 7 Mar 2018 12:21:26 -0300
Subject: [PATCH] Children comments

---
 src/assets/js/js.js                |  5 +++
 src/assets/scss/_comments.scss     | 14 ++++++++
 src/comments.php                   | 58 +++++++++++++++---------------
 src/functions/single-functions.php | 40 ++++++++++++---------
 4 files changed, 72 insertions(+), 45 deletions(-)

diff --git a/src/assets/js/js.js b/src/assets/js/js.js
index c2658a9..f5151c3 100644
--- a/src/assets/js/js.js
+++ b/src/assets/js/js.js
@@ -19,4 +19,9 @@ jQuery(document).ready(function( $ ) {
             }
         }
     });
+
+    /**
+     * Align the comments childrens
+     */
+    $('#comments ul.children').addClass('align-children');
 });
\ No newline at end of file
diff --git a/src/assets/scss/_comments.scss b/src/assets/scss/_comments.scss
index 0209250..fbc5348 100644
--- a/src/assets/scss/_comments.scss
+++ b/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;
+                }
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/src/comments.php b/src/comments.php
index 2376bf1..846c144 100644
--- a/src/comments.php
+++ b/src/comments.php
@@ -19,42 +19,43 @@ 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 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">
-						<?php 
-							_e('Authenticated as', 'tainacan-theme'); echo ': '; 
-							echo '<a href="'. get_author_posts_url($current_user->ID) .'">' . $current_user->display_name . '</a>'; 
-						?>
-					</span>
-				</div>
-
-			    <form autocomplete="off" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="form-comment" class="form-inline px-sm-5">
-					<div class="row mx-sm-auto">
-						<div class="form-group">
-							<?php 
-								comment_id_fields(); 
-								$args = array('class' => 'img-fluid rounded-circle mr-sm-3', );
-								echo get_avatar( $current_user->ID, 60, '', $current_user->display_name, $args );
-							?>
-							<textarea name="comment" id="comment" tabindex="1" required class="form-control mr-sm-3" rows="2" placeholder="<?php _e('Enter your comment here.', 'tainacan-theme'); ?>"></textarea>
+					<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">
+								<?php 
+									_e('Authenticated as', 'tainacan-theme'); echo ': '; 
+									echo '<a href="'. get_author_posts_url($current_user->ID) .'">' . $current_user->display_name . '</a>'; 
+								?>
+							</span>
 						</div>
-						<button id="submit" class="btn btn-info bg-jungle-green align-self-center" type="submit" name="submit"><?php _e('Send', 'tainacan-theme') ?></button>
+
+						<form autocomplete="off" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="form-comment" class="form-inline px-sm-5">
+							<div class="row mx-sm-auto">
+								<div class="form-group">
+									<?php 
+										comment_id_fields(); 
+										$args = array('class' => 'img-fluid rounded-circle mr-sm-3', );
+										echo get_avatar( $current_user->ID, 60, '', $current_user->display_name, $args );
+									?>
+									<textarea name="comment" id="comment" tabindex="1" required class="form-control mr-sm-3" rows="2" placeholder="<?php _e('Enter your comment here.', 'tainacan-theme'); ?>"></textarea>
+								</div>
+								<button id="submit" class="btn btn-info bg-jungle-green align-self-center" type="submit" name="submit"><?php _e('Send', 'tainacan-theme') ?></button>
+							</div>
+							
+							<?php cancel_comment_reply_link('Cancel'); ?>
+							<?php do_action('comment_form', $post->ID); ?>
+						</form>
 					</div>
-					
-					<?php cancel_comment_reply_link('Cancel'); ?>
-					<?php do_action('comment_form', $post->ID); ?>
-			    </form>
 				<?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>
\ No newline at end of file
diff --git a/src/functions/single-functions.php b/src/functions/single-functions.php
index a1f3d52..9a0a346 100644
--- a/src/functions/single-functions.php
+++ b/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; ?>
-    <div <?php comment_class( $args['has_children'] ? ' has-children media' : ' media' ); ?>>
+    global $post; 
+    $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,24 +35,31 @@ 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,
-                            'max_depth'  => $args['max_depth'],
-                            'before'    => '<li class="reply-link list-inline-item">',
-                            'after'     => '<i class="material-icons text-jelly-bean align-middle pl-1" style="font-size: 15px">chat_bubble_outline</i></li>'
-                        )
-                    )); 
-                    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>' );
-                ?>
-            </p>
-
+            <?php comment_reply_link( array_merge($args, array(
+                        'reply_text' => __('Reply'),
+                        'depth'      => $depth,
+                        'max_depth'  => $args['max_depth'],
+                        'before'    => '<li class="reply-link list-inline-item">',
+                        'after'     => '<i class="material-icons text-jelly-bean align-middle pl-1" style="font-size: 15px">chat_bubble_outline</i></li>'
+                    )
+                )); 
+                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.
  */
 if ( ! function_exists( 'tainacan_post_date' ) ) {