Optimized Nested Comments for Mobile, Added IDs

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),

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,

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%;
 	}

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 %}
+				{% for reply1 in c.replies %}
-					{% call comment(reply) %}
+					{% call comment(reply1) %}
 					<div class="replies">
-						{% for response in reply.replies %}
+						{% for reply2 in reply1.replies %}
-							{% call comment(response) %}</details></div>
+							{% 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 %}