From d3cc2613203e8bd435910ca5362fbe8b27bba539 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sat, 13 Apr 2019 12:58:57 +0100
Subject: [PATCH] Fixed "Add comment" layout when no comments exist

---
 resources/assets/js/components/page-comments.js | 16 ++++++++++++++--
 resources/views/comments/comments.blade.php     | 17 ++++++++++++++++-
 resources/views/comments/create.blade.php       |  5 -----
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/resources/assets/js/components/page-comments.js b/resources/assets/js/components/page-comments.js
index 0c8b32b7c..975ff5a82 100644
--- a/resources/assets/js/components/page-comments.js
+++ b/resources/assets/js/components/page-comments.js
@@ -88,6 +88,7 @@ class PageComments {
             commentElem.parentNode.removeChild(commentElem);
             window.$events.emit('success', window.trans('entities.comment_deleted_success'));
             this.updateCount();
+            this.hideForm();
         });
     }
 
@@ -129,7 +130,7 @@ class PageComments {
     showForm() {
         this.formContainer.style.display = 'block';
         this.formContainer.parentNode.style.display = 'block';
-        this.elem.querySelector('[comment-add-button]').style.display = 'none';
+        this.elem.querySelector('[comment-add-button-container]').style.display = 'none';
         this.formInput.focus();
         window.scrollToElement(this.formInput);
     }
@@ -137,7 +138,18 @@ class PageComments {
     hideForm() {
         this.formContainer.style.display = 'none';
         this.formContainer.parentNode.style.display = 'none';
-        this.elem.querySelector('[comment-add-button]').style.display = 'block';
+        const addButtonContainer = this.elem.querySelector('[comment-add-button-container]');
+        if (this.getCommentCount() > 0) {
+            this.elem.appendChild(addButtonContainer)
+        } else {
+            const countBar = this.elem.querySelector('[comment-count-bar]');
+            countBar.appendChild(addButtonContainer);
+        }
+        addButtonContainer.style.display = 'block';
+    }
+
+    getCommentCount() {
+        return this.elem.querySelectorAll('.comment-box[comment]').length;
     }
 
     setReply(commentElem) {
diff --git a/resources/views/comments/comments.blade.php b/resources/views/comments/comments.blade.php
index 71b7a2ef6..4848977c9 100644
--- a/resources/views/comments/comments.blade.php
+++ b/resources/views/comments/comments.blade.php
@@ -1,5 +1,13 @@
 <div page-comments page-id="{{ $page->id }}" class="comments-list">
-    <h5 comments-title>{{ trans_choice('entities.comment_count', count($page->comments), ['count' => count($page->comments)]) }}</h5>
+    <div comment-count-bar class="grid half left-focus v-center">
+        <h5 comments-title>{{ trans_choice('entities.comment_count', count($page->comments), ['count' => count($page->comments)]) }}</h5>
+        @if (count($page->comments) === 0)
+            <div class="text-right" comment-add-button-container>
+                <button type="button" action="addComment"
+                        class="button outline">{{ trans('entities.comment_add') }}</button>
+            </div>
+        @endif
+    </div>
 
     <div class="comment-container" comment-container>
         @foreach($page->comments as $comment)
@@ -11,4 +19,11 @@
         @include('comments.create')
     @endif
 
+    @if (count($page->comments) > 0)
+        <div class="text-right" comment-add-button-container>
+            <button type="button" action="addComment"
+                    class="button outline">{{ trans('entities.comment_add') }}</button>
+        </div>
+    @endif
+
 </div>
\ No newline at end of file
diff --git a/resources/views/comments/create.blade.php b/resources/views/comments/create.blade.php
index 29d6f1974..abd95f008 100644
--- a/resources/views/comments/create.blade.php
+++ b/resources/views/comments/create.blade.php
@@ -26,9 +26,4 @@
             </div>
         </form>
     </div>
-</div>
-
-<div class="form-group text-right" comment-add-button>
-    <button type="button" action="addComment"
-            class="button outline">{{ trans('entities.comment_add') }}</button>
 </div>
\ No newline at end of file