From d6d80dfe7bd5051e929735158dd3d205ca063c08 Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@nodebb.org>
Date: Thu, 25 Aug 2016 14:23:39 -0400
Subject: [PATCH] more fixes to chats list

---
 less/chats.less                         | 13 +++++++++++-
 templates/partials/chat_recent_room.tpl | 28 ++++++++++++++-----------
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/less/chats.less b/less/chats.less
index d9eedcd..e989732 100644
--- a/less/chats.less
+++ b/less/chats.less
@@ -4,7 +4,7 @@
 	overflow-y: auto;
 	border-top: 1px solid @gray-lighter;
 
-	li {
+	> li {
 		position: relative;
 		clear: both;
 		list-style-type: none;
@@ -81,6 +81,17 @@
 				opacity: 1.0;
 			}
 		}
+
+		.members {
+			padding-left: 1rem;
+
+			li {
+				display: inline-block;
+				width: 16px;
+				padding: 0;
+				margin: 0;
+			}
+		}
 	}
 }
 
diff --git a/templates/partials/chat_recent_room.tpl b/templates/partials/chat_recent_room.tpl
index 62d718e..035cc7b 100644
--- a/templates/partials/chat_recent_room.tpl
+++ b/templates/partials/chat_recent_room.tpl
@@ -2,18 +2,22 @@
 	<i class="fa fa-times pull-right leave" component="chat/leave"></i>
 	<div>
 		<p>{rooms.roomName}</p>
-		<!-- BEGIN rooms.users -->
-		<a href="{config.relative_path}/user/{rooms.users.userslug}">
-			<!-- IF rooms.users.picture -->
-			<img class="user-img avatar avatar-sm avatar-rounded" src="{rooms.users.picture}" title="{rooms.users.username}">
-			<!-- ELSE -->
-			<div class="user-img avatar avatar-sm avatar-rounded" title="{rooms.users.username}" style="background-color: {rooms.users.icon:bgColor};">{rooms.users.icon:text}</div>
-			<!-- ENDIF rooms.users.picture -->
-		</a>
-		<!-- END rooms.users -->
-		<!-- IF !rooms.lastUser.uid -->
-		[[modules:chat.no-users-in-room]]
-		<!-- ENDIF !rooms.lastUser.uid -->
+		<ul class="members">
+			<!-- BEGIN rooms.users -->
+			<li>
+				<a href="{config.relative_path}/user/{rooms.users.userslug}">
+					<!-- IF rooms.users.picture -->
+					<img class="user-img avatar avatar-sm avatar-rounded" src="{rooms.users.picture}" title="{rooms.users.username}">
+					<!-- ELSE -->
+					<div class="user-img avatar avatar-sm avatar-rounded" title="{rooms.users.username}" style="background-color: {rooms.users.icon:bgColor};">{rooms.users.icon:text}</div>
+					<!-- ENDIF rooms.users.picture -->
+				</a>
+			</li>
+			<!-- END rooms.users -->
+			<!-- IF !rooms.lastUser.uid -->
+			<li>[[modules:chat.no-users-in-room]]</li>
+			<!-- ENDIF !rooms.lastUser.uid -->
+		</ul>
 	</div>
 
 	<span class="teaser-content">{rooms.teaser.content}</span>