From c00b138bf2e20b32f7c645b5dc08703f4735a3ad Mon Sep 17 00:00:00 2001
From: Baris Usakli <barisusakli@gmail.com>
Date: Fri, 4 Oct 2013 16:03:03 -0400
Subject: [PATCH] some fixes to online page

---
 public/src/forum/users.js  |  8 ++++----
 public/templates/users.tpl | 34 ++++++++++++++++++----------------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/public/src/forum/users.js b/public/src/forum/users.js
index 5d7994cf97..9135416c92 100644
--- a/public/src/forum/users.js
+++ b/public/src/forum/users.js
@@ -60,7 +60,7 @@ define(function() {
 			var html = templates.prepare(templates['users'].blocks['users']).parse({
 				users: data
 			}),
-				userListEl = document.querySelector('#users-container');
+				userListEl = document.querySelector('#users-inner-container');
 
 			userListEl.innerHTML = html;
 
@@ -77,7 +77,7 @@ define(function() {
 
 		socket.on('api:user.isOnline', function(data) {
 			if(active == 'online' && !loadingMoreUsers) {
-				$('#users-container .registered-user').remove();
+				$('#users-inner-container').empty();
 				startLoading('users:online', 0);
 				socket.emit('api:user.getOnlineAnonCount', {} , function(anonCount) {
 					$('#online_anon_count').html(anonCount);
@@ -89,7 +89,7 @@ define(function() {
 			var html = templates.prepare(templates['users'].blocks['users']).parse({
 				users: users
 			});
-			$('#users-container').prepend(html);
+			$('#users-inner-container').append(html);
 		}
 
 		function loadMoreUsers() {
@@ -105,7 +105,7 @@ define(function() {
 			}
 
 			if (set) {
-				startLoading(set, $('#users-container').children().length);
+				startLoading(set, $('#users-inner-container').children().length);
 			}
 		}
 
diff --git a/public/templates/users.tpl b/public/templates/users.tpl
index ce43feb591..a223ad2b82 100644
--- a/public/templates/users.tpl
+++ b/public/templates/users.tpl
@@ -19,26 +19,28 @@
 	</div>
 
 	<ul id="users-container" class="users-container">
-		<!-- BEGIN users -->
-		<div class="users-box registered-user">
-			<a href="/user/{users.userslug}">
-				<img src="{users.picture}" class="img-thumbnail"/>
-			</a>
-			<br/>
-			<div class="user-info">
-				<a href="/user/{users.userslug}">{users.username}</a>
+		<div id="users-inner-container" class="inline-block">
+			<!-- BEGIN users -->
+			<div class="users-box registered-user">
+				<a href="/user/{users.userslug}">
+					<img src="{users.picture}" class="img-thumbnail"/>
+				</a>
 				<br/>
-				<div title="reputation" class="reputation">
-					<span class='formatted-number'>{users.reputation}</span>
-					<i class='icon-star'></i>
-				</div>
-				<div title="post count" class="post-count">
-					<span class='formatted-number'>{users.postcount}</span>
-					<i class='icon-pencil'></i>
+				<div class="user-info">
+					<a href="/user/{users.userslug}">{users.username}</a>
+					<br/>
+					<div title="reputation" class="reputation">
+						<span class='formatted-number'>{users.reputation}</span>
+						<i class='icon-star'></i>
+					</div>
+					<div title="post count" class="post-count">
+						<span class='formatted-number'>{users.postcount}</span>
+						<i class='icon-pencil'></i>
+					</div>
 				</div>
 			</div>
+			<!-- END users -->
 		</div>
-		<!-- END users -->
 		<div class="users-box {show_anon}">
 			<a href="#">
 				<img src="" class="img-thumbnail"/>