cmskit comment ui improvements

modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/en.json

@@ -4,6 +4,7 @@
     "PickYourReaction": "Pick your reaction",
     "YourComment": "Your comment",
     "YourReply": "Your reply",
+    "Comments": "Comments",
     "Send": "Send",
     "Delete": "Delete",
     "Reply": "Reply",

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml

@@ -88,55 +88,58 @@
 
 <div class="cms-comment-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">
 
-    @foreach (var comment in Model.Comments)
+    <div  class="pl-5 pt-3">
-    {
+        <h4>
-        <div class="comment pt-2 pl-5 mt-1 mb-1">
+            <i class="fa fa-comment-o"></i>
-            <div class="border-bottom">
+            @L["Comments"]
-                <h5>
+         </h4>
-                    <i class="fa fa-comment-o"></i>
+        @foreach (var comment in Model.Comments)
-                    @GetCommentTitle(comment.Author, comment.CreationTime).Invoke(null)
+        {
-                </h5>
+            <div class="comment pt-2 mt-1 mb-1">
-
+                <div class="border-bottom">
-                @GetCommentContentArea(comment.Id, comment.Author.Id, false, comment.Text).Invoke(null)
+                    <h5>
+                        @GetCommentTitle(comment.Author, comment.CreationTime).Invoke(null)
+                    </h5>
 
-                @if (CurrentUser.IsAuthenticated)
+                    @GetCommentContentArea(comment.Id, comment.Author.Id, false, comment.Text).Invoke(null)
-                {
-                    @GetCommentArea(comment.Id, true).Invoke(null)
-                }
 
-                @if (comment.Replies.Any())
+                    @if (CurrentUser.IsAuthenticated)
-                {
+                    {
-                    <div class="pl-5">
+                        @GetCommentArea(comment.Id, true).Invoke(null)
-                        @foreach (var reply in comment.Replies)
+                    }
-                        {
-                            <div class="comment pt-3 mt-1">
-                                <div class="border-top">
 
-                                <h6>
+                    @if (comment.Replies.Any())
-                                    <i class="fa fa-comment-o"></i>
+                    {
-                                    @GetCommentTitle(reply.Author, reply.CreationTime).Invoke(null)
+                        <div class="pl-5">
-                                </h6>
+                            @foreach (var reply in comment.Replies)
+                            {
+                                <div class="comment pt-3">
+                                    <div class="border-bottom">
 
-                                @GetCommentContentArea(reply.Id, reply.Author.Id, true, reply.Text).Invoke(null)
+                                        <h6>
+                                            @GetCommentTitle(reply.Author, reply.CreationTime).Invoke(null)
+                                        </h6>
 
+                                        @GetCommentContentArea(reply.Id, reply.Author.Id, true, reply.Text).Invoke(null)
+                                    </div>
                                 </div>
-                            </div>
+                            }
-                        }
+                        </div>
-                    </div>
+                    }
-                }
+                </div>
-            </div>
-        </div>
-    }
-    <div class="p-3 pl-5">
-        @if (CurrentUser.IsAuthenticated)
-        {
-            @GetCommentArea(null).Invoke(null)
-        }
-        else if (!string.IsNullOrWhiteSpace(Model.LoginUrl))
-        {
-            <div class="float-right mb-2">
-                <a href="@Model.LoginUrl" class="btn btn-primary"> @L["LoginToAddComment"]</a>
             </div>
         }
+        <div class="p-3 pl-5">
+            @if (CurrentUser.IsAuthenticated)
+            {
+                @GetCommentArea(null).Invoke(null)
+            }
+            else if (!string.IsNullOrWhiteSpace(Model.LoginUrl))
+            {
+                <div class="float-right mb-2">
+                    <a href="@Model.LoginUrl" class="btn btn-primary"> @L["LoginToAddComment"]</a>
+                </div>
+            }
+        </div>
     </div>
 </div>