closed #83

public/css/category.less

@@ -152,7 +152,14 @@
 			padding: 5px 5px 5px 0px;
 			
 			li {
+				clear: both;
 				line-height: 16px;
+				margin-bottom: 1em;
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+
 				img {
 					display: block;
 					float: left;
@@ -162,8 +169,10 @@
 					padding-left:5px;
 					overflow: hidden;
 					height: 32px;
+					margin-bottom: 0.5em;
 				}
 				span {
+					font-size: 12px;
 					display: block;
 					overflow: hidden;
 					height: 16px;

public/src/forum/category.js

@@ -71,20 +71,20 @@
 
 		recent_replies.innerHTML = '';
 		
-		for (var i=0, ii=posts.length; i<ii; i++) {
+		var	frag = document.createDocumentFragment(),
+			li = document.createElement('li');
+		for (var i=0,numPosts=posts.length; i<numPosts; i++) {
+			var dateString = utils.relativeTime(posts[i].timestamp);
+			li.setAttribute('data-pid', posts[i].pid);
+			li.innerHTML =	'<img title="' + posts[i].username + '" style="width: 48px; height: 48px; /*temporary*/" class="img-polaroid" src="' + posts[i].picture + '" class="" />' +
+								'<p>' +
+									'<strong>' + posts[i].username + '</strong>: ' + posts[i].content +
+								'</p>' +
+								'<span>posted ' + utils.relativeTime(posts[i].timestamp) + ' ago</span>';
 
-			var a = document.createElement('a'),
-				ul = document.createElement('ul'),
-				username = posts[i].username,
-				picture = posts[i].picture;
-
-			ul.innerHTML = '<li><img title="' + username + '" style="width: 48px; height: 48px; /*temporary*/" class="img-polaroid" src="' + picture + '" class="" />'
-							+ '<p><strong>' + username + '</strong>: ' + posts[i].content + '</p><span>posted ' + utils.relativeTime(posts[i].timestamp) + ' ago</span></li>';
-			
-			a.appendChild(ul);
-			recent_replies.appendChild(a);
+			frag.appendChild(li.cloneNode(true));
+			recent_replies.appendChild(frag);
 		}
-		
 	});
 
 })();

public/templates/category.tpl

@@ -63,8 +63,8 @@
 			<div class="block-header">
 				Recent Replies
 			</div>
-			<div class="block-content recent-replies" id="category_recent_replies">
-				
+			<div class="block-content recent-replies">
+				<ul id="category_recent_replies"></ul>
 			</div>
 		</div>
 		<div class="sidebar-block img-polaroid">