improved threaded view design

less/topic.less

@@ -142,13 +142,63 @@
 		font-size: 10px;
 	}
 
-	[component="post/reply-count"] {
+	.threaded-replies {
 		margin-left: 61px;
+		text-decoration: none;
+		margin-left: 60px;
+		font-size: 11px;
+
+
+		img, .user-icon {
+			.user-icon-style(15px, 10px, 50%);
+			vertical-align: 1px;
+		}
+
+		img {
+			vertical-align: -3px;
+		}
+
+		.replies-count {
+			margin-left: 3px;
+		}
+
+		.replies-last {
+			color: @gray-light;
+		}
+
+		.fa {
+			font-size: 80%;
+		}
+
+		.avatars {
+			position: relative;
+
+			&.hasMore > *:last-child:after {
+				content: "\2022\2022\2022";
+				width: 16px;
+				height: 16px;
+				line-height: 16px;
+				background: #000;
+				opacity: .5;
+				position: absolute;
+				right: 2px;
+				border-radius: 50%;
+				bottom: -1px;
+				text-align: center;
+				font-size: 12px;
+			}
+		}
 	}
 
 	[component="post/replies"] {
 		margin-left: 61px;
 		margin-top: 20px;
+		border-left: 4px solid #eee;
+		padding-left: 20px;
+
+		[component="post"]:last-child > hr {
+			display: none;
+		}
 	}
 
 	.stats {
@@ -247,6 +297,8 @@
 		display: inline-block;
 		font-style: italic;
 		margin-left: 61px;
+		max-width: 100%;
+		word-wrap: break-word;
 	}
 
 	@media (max-width: @screen-sm-max) {
@@ -272,6 +324,10 @@
 		[component="post/reply-count"] {
 			margin-left: 0;
 		}
+
+		[component="post/replies"] {
+			margin-left: 15px;
+		}
 	}
 	
 	.quick-reply {

templates/partials/topic/post.tpl

@@ -84,11 +84,23 @@
 	</small>
 
 	<!-- IF !hideReplies -->
-	<a component="post/reply-count" href="#" class="no-select <!-- IF !posts.replies -->hidden<!-- ENDIF !posts.replies -->">
+	<a component="post/reply-count" href="#" class="threaded-replies no-select <!-- IF !posts.replies.count -->hidden<!-- ENDIF !posts.replies.count -->">
+		<span component="post/reply-count/avatars" class="avatars <!-- IF posts.replies.hasMore -->hasMore<!-- ENDIF posts.replies.hasMore -->">
+			<!-- BEGIN posts.replies.users -->
+			<!-- IF posts.replies.users.picture -->
+			<span><img component="user/picture" data-uid="{posts.replies.users.uid}" title="{posts.replies.users.username}" src="{posts.replies.users.picture}"  itemprop="image" /></span>
+			<!-- ELSE -->
+			<div component="user/picture" data-uid="{posts.replies.users.uid}" title="{posts.replies.users.username}" class="user-icon" style="background-color: {posts.replies.users.icon:bgColor};">{posts.replies.users.icon:text}</div>
+			<!-- ENDIF posts.replies.users.picture -->
+			<!-- END posts.replies.users -->
+		</span>
+
+		<span class="replies-count" component="post/reply-count/text" data-replies="{posts.replies.count}">[[topic:replies_to_this_post, {posts.replies.count}]]</span>
+		<span class="replies-last hidden-xs">[[topic:last_reply_time]] <span class="timeago" title="{posts.replies.timestampISO}"></span></span>
+
 		<i class="fa fa-fw fa-chevron-right" component="post/replies/open"></i>
 		<i class="fa fa-fw fa-chevron-down hidden" component="post/replies/close"></i>
 		<i class="fa fa-fw fa-spin fa-spinner hidden" component="post/replies/loading"></i>
-		<span component="post/reply-count/text" data-replies="{posts.replies}">[[topic:replies_to_this_post, {posts.replies}]]</span>
 	</a>
 	<!-- ENDIF !hideReplies -->
 </div>