more chat styling

less/chats.less

@@ -8,10 +8,11 @@
 		clear: both;
 		list-style-type: none;
 		padding: 0.5em;
+		height: 70px;
 		.pointer;
 
 		&.typing {
-			span:after {
+			.username:after {
 				visibility: visible;
 			}
 		}
@@ -20,7 +21,9 @@
 			.bg-variant(@state-warning-bg);
 		}
 
-		span {
+		.username {
+			font-size: 18px;
+
 			&:after {
 				display: inline-block;
 				font-family: "FontAwesome";
@@ -30,6 +33,13 @@
 			}
 		}
 
+		.teaser-timestamp {
+			font-size: 10px;
+			position: absolute;
+			top: 8px;
+			right: 24px;
+		}
+
 		a {
 			display: block;
 			.text-ellipsis;
@@ -40,11 +50,21 @@
 		}
 
 		.user-img {
-			width:24px;
-			height:24px;
+			width: 50px;
+			height: 50px;
+			float: left;
+			margin-top: 4px;
+			margin-right: 13px;
 			margin-left: 0.5em;
 			border-radius: 50%;
 		}
+
+		.status {
+			position: absolute;
+			left: 65px;
+			font-size: 20px;
+			top: 11px;
+		}
 	}
 }
 

templates/chats.tpl

@@ -1,5 +1,5 @@
 <div class="row">
-	<div class="col-sm-3">
+	<div class="col-sm-4">
 	<!--
 		<div class="panel panel-default">
 			<div class="panel-heading">
@@ -22,18 +22,18 @@
 		<ul class="chats-list recent-chats" data-nextstart="{nextStart}">
 			<!-- BEGIN chats -->
 			<li data-username="{chats.username}" data-uid="{chats.uid}" class="<!-- IF chats.unread -->unread<!-- ENDIF chats.unread -->">
-				<i component="user/status" title="[[global:{chats.status}]]" class="fa fa-circle status {chats.status}"></i>
 				<img class="user-img" src="{chats.picture}">
-				<span>{chats.username}</span>
+				<i component="user/status" title="[[global:{chats.status}]]" class="fa fa-circle status {chats.status}"></i>
+				<span class="username">{chats.username}</span>
 				<span class="teaser-content">{chats.teaser.content}</span>
-				<span class="teaser-time timeago" title="{messages.timestampISO}"></span>
+				<span class="teaser-timestamp timeago" title="{chats.teaser.timestampISO}"></span>
 			</li>
 			<!-- END chats -->
 		</ul>
 		
 	</div>
 
-	<div class="col-sm-9">
+	<div class="col-sm-8">
 		<!-- IF !allowed -->
 		<div class="alert alert-warning">
 			[[error:chat-restricted]]