more comment fixes

resources/assets/less/yuuno/bem/comment.less

@@ -1,5 +1,9 @@
 .comment-container {
     list-style: none;
+
+    &--reply {
+        margin-left: 40px;
+    }
 }
 
 .comments {
@@ -51,7 +55,6 @@
     &__content {
         border-radius: 5px;
         border: 0;
-        min-height: 50px;
         flex-grow: 2;
         padding: 5px;
         margin: 2px;
@@ -116,8 +119,4 @@
             background: linear-gradient(90deg, #f6f6f6 0%, #b6b6b6 100%);
         }
     }
-
-    &__replies {
-        margin-left: 40px;
-    }
 }

resources/views/yuuno/elements/comment.twig

@@ -1,4 +1,4 @@
-<li id="comment-{{ comment.id }}" class="comment-container">
+<li id="comment-{{ comment.id }}" class="comment-container{% if comment_depth > 0 and comment_depth < 6 %} comment-container--reply{% endif %}">
     <div class="comment">
         <a class="avatar avatar--border comment__avatar{% if comment_depth == 0 %} comment__avatar--big{% endif %}" href="{{ route('user.profile', comment.userData.id) }}" style="background-image: url('{{ route('user.avatar', comment.userData.id) }}');">
             <span class="comment__username" style="color: {{ comment.userData.colour }};">

resources/views/yuuno/elements/comments.twig

@@ -8,7 +8,7 @@
                     </span>
                 </div>
                 <div class="comment__pointer"></div>
-                <textarea class="comment__content comment__content--create" name="text" placeholder="Join the conversation..."></textarea>
+                <textarea class="comment__content comment__content--create comment__content--parent" name="text" placeholder="Join the conversation..."></textarea>
                 <button
                     class="comment__submit comment__submit--new"
                     name="session"
@@ -155,7 +155,7 @@
             var discussion = document.getElementById('comments').querySelector('.comments__list');
 
             if (obj.reply) {
-                discussion = document.getElementById('comment-' + obj.reply).querySelector('.comment-replies');
+                discussion = document.getElementById('comment-' + obj.reply).querySelector('.comment__replies');
             }
 
             if (discussion.children.length > 0) {
@@ -183,13 +183,14 @@
 
             // Remove it if it already exists
             if (replyBox) {
-                Sakura.DOM.Remove('comment-reply-container-' + id);
+                Sakura.DOM.Remove(replyBox);
                 return;
             }
 
             // Container
             var replyContainer = document.createElement('li');
             replyContainer.id = 'comment-reply-container-' + id;
+            replyContainer.className = 'comment-container';
 
             // Comment container
             var replyDiv = document.createElement('div');
@@ -198,24 +199,25 @@
 
             // Avatar
             var replyAvatar = document.createElement('div');
-            replyAvatar.className = 'comment-avatar';
+            replyAvatar.className = 'avatar avatar--border comment__avatar';
             replyAvatar.style.backgroundImage = 'url(' + avatar + ')';
             replyDiv.appendChild(replyAvatar);
 
             // Pointer
             var replyPoint = document.createElement('div');
-            replyPoint.className = 'comment-pointer';
+            replyPoint.className = 'comment__pointer';
             replyDiv.appendChild(replyPoint);
 
             // Textarea
             var replyText = document.createElement('textarea');
-            replyText.className = 'comment-content';
+            replyText.className = 'comment__content comment__content--create';
+            replyText.placeholder = 'Type your reply here...';
             replyText.name = 'text';
             replyDiv.appendChild(replyText);
 
             // Submit
             var replySubmit = document.createElement('button');
-            replySubmit.className = 'comment-submit';
+            replySubmit.className = 'comment__submit';
             replySubmit.name = 'session';
             replySubmit.value = session;
             replySubmit.setAttribute('onclick', 'commentPost(this.parentNode, "' + url + '"); commentReply(' + id + ');');
@@ -237,14 +239,13 @@
             var url = "{{ route('comments.comment.delete', 1) }}".replace(1, id);
 
             commentClient.SetUrl(url);
-
             commentClient.AddCallback(200, function () {
                 var resp = JSON.parse(commentClient.Response());
 
                 if (resp.error) {
                     Yuuno.Busy.Show(Yuuno.BusyMode.FAIL, resp.error, 1500);
                 } else {
-                    Sakura.DOM.Remove('comment-' + id);
+                    Sakura.DOM.Remove(Sakura.DOM.ID('comment-' + id));
                 }
             });
 
@@ -257,9 +258,7 @@
                 downvotes = document.getElementById("comment-" + id + "-dislikes");
 
             commentClient.SetSend({"vote":vote});
-
             commentClient.SetUrl(url);
-
             commentClient.AddCallback(200, function () {
                 var resp = JSON.parse(commentClient.Response());