Updated comments UI/UX

NotJustSid · Nov 20, 2023 · dc03de6 · dc03de6
1 parent c11d4b2
commit dc03de6
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 17 deletions.
diff --git a/_includes/add-comment-panel.html b/_includes/add-comment-panel.html
@@ -0,0 +1,4 @@
+<div id="add-comment-panel">
+    <p>{{ include.notif_content }}</p>
+    <button class="btn btn-inverse" onclick="showCommentDialog()">{{ include.btn_content }}</button>
+</div>
diff --git a/_includes/comment-dialog.html b/_includes/comment-dialog.html
@@ -1,4 +1,5 @@
 <dialog class="comment-dialog">
+	<div class="comment-dialog-title">Add a comment</div>
 	<form class="comment-dialog-form" method="POST" action="https://api.staticman.net/v3/entry/github/sid200/blog/master/comments">
 
 		<input name="options[redirect]" type="hidden" value="htpps://sid200.github.io/blog{{ page.url }}">
@@ -10,13 +11,18 @@
 		<input name="fields[email]" placeholder="Email (optional)" type="email" class="comment-input"></input>
 		<textarea name="fields[message]" placeholder="Add a comment" class="comment-input" rows="4" required></textarea>
 
-		<button class="btn comment-form-btn" onclick="cancelDialog()">Cancel</span>
+		<button class="btn comment-form-btn" onclick="cancelCommentDialog()">Cancel</span>
 		<button type="submit" class="btn comment-form-btn">Send</button>
 	</form>
+	<div class="notice">All comments need to be approved before they are displayed. Thank you for your patience!</div>
 </dialog>
 
 <script>
-	function cancelDialog() {
+	function cancelCommentDialog() {
 		document.querySelector('.comment-dialog').close();
 	}
+
+	function showCommentDialog() {
+		document.querySelector('.comment-dialog').show();
+	}
 </script>
diff --git a/_includes/comments.html b/_includes/comments.html
@@ -17,7 +17,7 @@
 
         	&nbsp;
 
-        	<a class="comment-reply-option" onclick="reply()">
+        	<a class="comment-reply-option" onclick="reply(`{{comment.name}}`, `{{comment._id}}`)">
           		<small>Reply</small>
         	</a>
 
@@ -73,8 +73,8 @@
 		}
 	}
 
-	function reply() {
-		// `Reply To {{ commentData.name }}`;
+	function reply(parentName, parentId) {
+		document.querySelector('.comment-dialog-title').textContent = `Reply to ${parentName}`;
 		// document.getElementById('comment-parent').value = '{{ commentData._id }}';
 
 		const dialog = document.querySelector('.comment-dialog');

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -65,15 +65,28 @@ <h2><span class="entry-date date published"><time datetime="{{ page.date | date_
   </article>
 </div><!-- /#main -->
 
-{% include comment-dialog.html %}
+{% if page.comments != false%}
+  {% include comment-dialog.html %}
 
-{% assign comments = site.data.comments | where: "page", page.url %}
-{% if comments.size > 0 %}
+  {% assign comments = site.data.comments | where: "page", page.url %}
   <div id="comments">
     <div id="comment-feed">
-      {% include comments.html %}
+      {% if comments.size > 0 %}
+        {% capture comment_panel_content %}
+          {% if comments.size == 1 %}
+            1 comment as of now.
+          {% else %}
+            {{ comments.size }} comments as of now.
+          {% endif %}
+        {% endcapture %}
+        {% include add-comment-panel.html notif_content=comment_panel_content btn_content="Add yours!"%}
+        {% include comments.html %}
+      {% else %}
+        {% include add-comment-panel.html notif_content="There are no comments yet." btn_content="Be the first to comment!"%}
+      {% endif %}
     </div>
   </div>
+
 {% endif %}
 
 <div class="footer-wrapper">

diff --git a/_sass/_comments.scss b/_sass/_comments.scss
@@ -1,31 +1,37 @@
 .comment-dialog {
 	position: relative;
 	margin: 40px 2px 20px 2px;
-	padding: 20px;
-  padding-bottom: 25px;
+	padding: 25px 20px;
 	background-color: $background-secondary;
 	box-shadow: 0 0 0 1px rgba($border-color,0.1), 0 6px 12px rgba(#000,0.1);
   border: none;
 	border-radius: 3px;
 
 	@media #{$medium} {
 		margin: 50px 10px 20px 10px;
-		padding: 50px 20px 25px;
 	}
 
 	@media #{$large} {
 		max-width: 800px;
-		padding: 50px 20px;
-    padding-bottom: 25px;
 		margin: 60px auto;
 	}
 }
 
+.comment-dialog-title {
+  margin: 0px;
+  margin-bottom: 10px;
+  font-size: 1.8em;
+  font-weight: bold;
+  color: $text-primary;
+}
+
 .comment-input {
-  background-color: transparent;
+  background-color: #323232;
   border: none;
-  border-bottom: 2px solid $white-3;
   margin: 10px;
+  margin-left: 0px;
+  padding: 9px;
+  border-radius: 7px;
   color: $text-primary;
 }
 
@@ -37,11 +43,11 @@ textarea.comment-input {
 
 .comment-input:focus {
   outline: none;
-  border-bottom: 2px solid $primary;
 }
 
 .comment-form-btn {
   margin: 10px;
+  margin-left: 0px;
 }
 
 #comment-feed {
@@ -55,6 +61,11 @@ textarea.comment-input {
 	text-align: left;
 }
 
+#add-comment-panel {
+  font-size: 1.4em;
+  text-align: center;
+}
+
 .comment-element{
   padding: 10px;
   padding-top: 5px;