Fixed "Add comment" layout when no comments exist

diff --git a/resources/assets/js/components/page-comments.js b/resources/assets/js/components/page-comments.js
index 0c8b32b7cc00f5503feb3d16ef1bce97eacf58a4..975ff5a824b080bb5924ea46d557b1167103d364 100644 (file)
--- 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();
             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';
     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);
     }
         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';
     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) {
     }
 
     setReply(commentElem) {

diff --git a/resources/views/comments/comments.blade.php b/resources/views/comments/comments.blade.php
index 71b7a2ef6b48fc22c3b1bfec0b7d8af8d027abea..4848977c9cd16c55a527c91354cc61c3c61c1fd0 100644 (file)
--- 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">
 <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)
 
     <div class="comment-container" comment-container>
         @foreach($page->comments as $comment)


@@ -11,4 +19,11 @@
         @include('comments.create')
     @endif
 
         @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
 </div>
\ No newline at end of file

diff --git a/resources/views/comments/create.blade.php b/resources/views/comments/create.blade.php
index 29d6f1974513ded484070437ddd7b6a97f5249af..abd95f008a1e5be44d550f7f1438f1890bdc54ea 100644 (file)
--- a/resources/views/comments/create.blade.php
+++ b/resources/views/comments/create.blade.php
@@ -26,9 +26,4 @@
             </div>
         </form>
     </div>
             </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
 </div>
\ No newline at end of file