differentiation between the main post and rplies including preliminary duhsign

public/css/style.less

@@ -289,6 +289,7 @@ footer.footer {
 		.post-buttons {
 			font-size: 12px;
 			float: right;
+			margin-right: 5px;
 
 			div {
 				display: inline-block;
@@ -313,6 +314,41 @@ footer.footer {
 		-moz-opacity: 0.30;
 		opacity: 0.30;
 	}
+
+
+	.main-post {
+		.profile-block {
+			//height: 100px;
+		}
+		.main-avatar {
+			float: left;
+			margin-right: 15px;
+			margin-bottom: 5px;
+			padding-bottom: 3px;
+			text-align: center
+		}
+		.post-content {
+			min-height: 80px;
+		}
+		hr {
+			margin-top: 0;
+			margin-right: 10px;
+		}
+		.post-block {
+			.post-buttons {
+				div {
+					border: 0;
+				}
+			}
+		}
+		.favourite {
+			cursor: pointer;
+		}
+		.btn {
+			display: inline-block;
+		}
+
+	}
 }
 
 #user_label {

public/templates/topic.tpl

@@ -8,31 +8,43 @@
 </div>
 
 <ul id="post-container" class="post-container container">
-	<li class="row" data-pid="{posts.pid}" data-deleted="{posts.deleted}">
+	
-		<div class="span1 profile-image-block visible-desktop">
+
-			<!--<i class="icon-spinner icon-spin icon-2x pull-left"></i>-->
+
-			<a href="/users/{posts.username}">
+	<!-- BEGIN main_posts -->
-				<img src="http://www.gravatar.com/avatar/5af32f56c02e59591f0d0c1e6941977c?s=80" align="left" />
+		<li class="row main-post" data-pid="{main_posts.pid}" data-deleted="{main_posts.deleted}">
-			</a>
+			<div class="span12">
-			<i class="icon-star"></i><span class="user_rep_{posts.uid}">100</span>
-		</div>
-		<div class="span11">
 				<div class="post-block">
-				<div id="content_{posts.pid}" class="post-content">This is the main post blah blah </div>
+					<a class="main-avatar img-polaroid" href="/users/{main_posts.username}">
-				<div class="profile-block">
+						<img src="{main_posts.gravatar}?s=120" align="left" /><br />
-					<span class="post-buttons">
+						<i class="icon-star"></i><span class="user_rep_{main_posts.uid}">{main_posts.user_rep}</span>
-						<div id="ids_{posts.pid}_{posts.uid}" class="edit {posts.display_moderator_tools} hidden-phone"><i class="icon-pencil"></i></div>
+						<i class="icon-pencil"></i><span class="user_posts_{main_posts.uid}">8</span>
-						<div id="ids_{posts.pid}_{posts.uid}" class="delete {posts.display_moderator_tools} hidden-phone"><i class="icon-trash"></i></div>
+					</a>
-						<div id="quote_{posts.pid}_{posts.uid}" class="quote hidden-phone"><i class="icon-quote-left"></i></div>
+					<h3>{topic_name} 
-						<div id="favs_{posts.pid}_{posts.uid}" class="favourite hidden-phone"><span class="post_rep_{posts.pid}">50</span><i class="{posts.fav_star_class}"></i></div>
+						<small>
-						<div class="post_reply">Reply <i class="icon-reply"></i></div>
+							posted {main_posts.relativeTime} ago by <strong><a href="/users/{main_posts.username}">{main_posts.username}</a></strong>
-					</span>
+							<span class="{main_posts.edited-class}"><i class="icon-edit visible-phone" title="edited by {main_posts.editor} {main_posts.relativeEditTime} ago"></i></span>
-					<img class="hidden-desktop" src="{posts.gravatar}?s=10" align="left" /> posted by <strong><a href="/users/{posts.username}">psychobunny</a></strong> 1 hour ago
+						</small>
+						<div class="pull-right" style="margin-right: 10px;">
+							<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn edit {main_posts.display_moderator_tools} hidden-phone"><i class="icon-pencil"></i></button>
+							<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn delete {main_posts.display_moderator_tools} hidden-phone"><i class="icon-trash"></i></button>
+							<button id="quote_{main_posts.pid}_{main_posts.uid}" class="btn quote hidden-phone"><i class="icon-quote-left"></i></button>
+							
+							<button id="favs_{main_posts.pid}_{main_posts.uid}" class="favourite hidden-phone btn"><span class="post_rep_{main_posts.pid}">Favourite {main_posts.post_rep} </span><i class="{main_posts.fav_star_class}"></i></button>
+							<button id="post_reply" class="btn btn-primary btn post_reply">Reply <i class="icon-reply"></i></button>
 						</div>
+					</h3>
+
+
+					<hr />
+					<span class="{main_posts.edited-class} hidden-phone"> last edited by <strong><a href="/users/{main_posts.editor}">{main_posts.editor}</a></strong> {main_posts.relativeEditTime} ago</span>
+
+					<div id="content_{main_posts.pid}" class="post-content">{main_posts.content}</div>
+					<div class="profile-block"></div>
 				</div>
 			</div>
 		</li>
-
+	<!-- END main_posts -->
 
 	<!-- BEGIN posts -->
 		<li class="row" data-pid="{posts.pid}" data-deleted="{posts.deleted}">
@@ -52,7 +64,7 @@
 							<div id="ids_{posts.pid}_{posts.uid}" class="delete {posts.display_moderator_tools} hidden-phone"><i class="icon-trash"></i></div>
 							<div id="quote_{posts.pid}_{posts.uid}" class="quote hidden-phone"><i class="icon-quote-left"></i></div>
 							<div id="favs_{posts.pid}_{posts.uid}" class="favourite hidden-phone"><span class="post_rep_{posts.pid}">{posts.post_rep}</span><i class="{posts.fav_star_class}"></i></div>
-						<div class="post_reply">Reply <i class="icon-reply"></i></div>
+							<div class="post_reply"><i class="icon-reply"></i></div>
 						</span>
 						<img class="hidden-desktop" src="{posts.gravatar}?s=10" align="left" /> posted by <strong><a href="/users/{posts.username}">{posts.username}</a></strong> {posts.relativeTime} ago
 						<span class="{posts.edited-class} hidden-phone">| last edited by <strong><a href="/users/{posts.editor}">{posts.editor}</a></strong> {posts.relativeEditTime} ago</span>

src/posts.js

@@ -24,14 +24,16 @@ marked.setOptions({
 			if (!post_data || !user_data || !thread_data || !vote_data || !viewer_data) return;
 
 			var	posts = [],
+				main_posts = [],
 				manage_content = viewer_data.reputation >= config.privilege_thresholds.manage_content;
 
+
 			for (var i=0, ii= post_data.pid.length; i<ii; i++) {
 				var uid = post_data.uid[i],
 					pid = post_data.pid[i];
 					
 				if (post_data.deleted[i] === null || (post_data.deleted[i] === '1' && manage_content)) {
-					posts.push({
+					var post_obj = {
 						'pid' : pid,
 						'uid' : uid,
 						'content' : marked(post_data.content[i] || ''),
@@ -47,7 +49,10 @@ marked.setOptions({
 						'editor': post_data.editor[i] !== null ? user_data[post_data.editor[i]].username : '',
 						'relativeEditTime': post_data.editTime !== null ? utils.relativeTime(post_data.editTime[i]) : '',
 						'deleted': post_data.deleted[i] || '0'
-					});
+					};
+
+					if (i == 0) main_posts.push(post_obj);
+					else posts.push(post_obj);
 				}
 			}
 
@@ -60,7 +65,8 @@ marked.setOptions({
 				'pinned': parseInt(thread_data.pinned) || 0,
 				'topic_id': tid,
 				'expose_tools': viewer_data.reputation >= config.privilege_thresholds.manage_thread ? 1 : 0,
-				'posts': posts
+				'posts': posts,
+				'main_posts': main_posts
 			});
 		}