From da971f86803fd88af9a3df2ed9a9cafe5a3f837f Mon Sep 17 00:00:00 2001
From: spikecodes <19519553+spikecodes@users.noreply.github.com>
Date: Sun, 20 Dec 2020 20:52:15 -0800
Subject: [PATCH] Optimized Nested Comments for Mobile, Added IDs

---
 src/post.rs         |  1 +
 src/utils.rs        |  1 +
 static/style.css    |  5 +++++
 templates/post.html | 15 ++++++++++-----
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/post.rs b/src/post.rs
index ab7835d..5df1d60 100644
--- a/src/post.rs
+++ b/src/post.rs
@@ -164,6 +164,7 @@ async fn parse_comments(json: serde_json::Value) -> Result<Vec<Comment>, &'stati
 		};
 
 		comments.push(Comment {
+			id: val(comment, "id").await,
 			body: body,
 			author: val(comment, "author").await,
 			score: format_num(score),
diff --git a/src/utils.rs b/src/utils.rs
index 17b228b..148f2e1 100644
--- a/src/utils.rs
+++ b/src/utils.rs
@@ -34,6 +34,7 @@ pub struct Post {
 #[allow(dead_code)]
 // Comment with content, post, score and data/time that it was posted
 pub struct Comment {
+	pub id: String,
 	pub body: String,
 	pub author: String,
 	pub flair: Flair,
diff --git a/static/style.css b/static/style.css
index 118b3ae..85b0265 100644
--- a/static/style.css
+++ b/static/style.css
@@ -435,6 +435,11 @@ td, th {
 		max-width: initial;
 	}
 
+	.replies > .comment {
+		margin-left: -25px;
+		padding: 10px 10px 10px 5px;
+	}
+
 	.datetime {
 		width: 100%;
 	}
diff --git a/templates/post.html b/templates/post.html
index b9b09c1..278c790 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -7,7 +7,7 @@
 
 {% macro comment(item) -%}
 
-<div class="comment">
+<div id="{{ item.id }}" class="comment">
 	<div class="comment_left">
 		<h3 class="comment_score">{{ item.score }}</h3>
 		<div class="line"></div>
@@ -67,11 +67,16 @@
 		<div class="thread">
 			{% call comment(c) %}
 			<div class="replies">
-				{% for reply in c.replies %}
-					{% call comment(reply) %}
+				{% for reply1 in c.replies %}
+					{% call comment(reply1) %}
 					<div class="replies">
-						{% for response in reply.replies %}
-							{% call comment(response) %}</details></div>
+						{% for reply2 in reply1.replies %}
+							{% call comment(reply2) %}
+							<div class="replies">
+								{% for reply3 in reply2.replies %}
+									{% call comment(reply3) %}</details></div>
+								{% endfor %}
+							</div></details></div>
 						{% endfor %}
 					</div></details></div>
 				{% endfor %}