Update styling and templates for nodebb/nodebb@60a6775, and also added better chat styling in general

less/chats.less

@@ -56,7 +56,12 @@
 			font-weight: bold;
 
 			i {
-				font-size: 1rem;
+				font-size: 14px;
+				vertical-align: center;
+
+				&.fa-keyboard-o {
+					.animation(topic-reply-pulse 2s ease-in infinite);
+				}
 			}
 		}
 
@@ -65,32 +70,63 @@
 		}
 	}
 
-	ul.well {
+	ul {
 		height: 250px;
 		overflow-y: auto;
 		resize: none;
 		word-wrap: break-word;
+		padding: 0;
+		margin: 0;
 
-		li {
+		li.chat-message {
 			list-style-type: none;
-			margin-bottom: 10px;
 			font-weight: 300;
+			padding: 0 1.428rem;
+
+			&:first-child {
+				padding-top: 1.428rem;
+			}
 
-			.chat-user-image {
-				width: 20px;
-				height: 20px;
+			&:last-child {
+				padding-bottom: 1.428rem;
+			}
+
+			&[data-break="true"] {
+				padding-top: 1rem;
+				margin-top: 1rem;
+				border-top: 1px solid @gray-lighter;
+			}
+
+			a {
+				display: block;
+				float: left;
+
+				.chat-user-image {
+					width: 32px;
+					height: 32px;
+				}
+			}
+
+			.chat-user {
+				display: inline-block;
+				margin-left: 13px;
 			}
 
 			.chat-timestamp {
-				color: darkgrey;
-				min-width: 60px;
+				color: @gray-light;
+				font-size: 1rem;
 				display: inline-block;
-				text-align: right;
+				margin-left: 10px;
 				.user-select(none);
 			}
 
 			.message-body {
-				clear: both;
+				margin-left: 45px;
+
+				p {
+					margin: 7px 0 0 0;
+					line-height: 2rem;
+				}
 			}
 
 			&[data-self="0"] + [data-self="0"], &[data-self="1"] + [data-self="1"] {
@@ -104,8 +140,8 @@
 	}
 
 	.user-typing {
-		margin-top: -1.5em;
-		.opacity(0.5);
+		color: @gray-light;
+		margin: 1.428rem 0;
 	}
 
 	.selected[data-since] {

templates/chat.tpl

@@ -5,18 +5,18 @@
 			<div class="modal-header">
 				<button id="chat-close-btn" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 				<button type="button" class="close" data-action="maximize"><span aria-hidden="true"><i class="fa fa-expand"></i></span><span class="sr-only">[[modules:chat.maximize]]</span></button>
-				<h4>[[modules:chat.chatting_with]] <i component="user/status" class="fa fa-circle status offline" title="[[global:offline]]"></i></h4>
+				<h4>
+					<i component="user/status" class="fa fa-circle status offline" title="[[global:offline]]"></i>
+					[[modules:chat.chatting_with]]
+					<span class="user-typing hide"><i class="fa fa-keyboard-o fa-fw"></i></span>
+				</h4>
 			</div>
 			<div class="modal-body">
 				<span class="since-bar">
 				<a href="#" class="selected" data-since="recent">[[recent:title]]</a> &bull; <a href="#" data-since="week">[[modules:chat.seven_days]]</a> &bull; <a href="#" data-since="month">[[modules:chat.thirty_days]]</a> &bull; <a href="#" data-since="threemonths">[[modules:chat.three_months]]</a></span>
-				<ul id="chat-content" class="well well-sm">
-
-					<span class="user-typing hide"><i class="fa fa-pencil"></i> <span class="text"></span></span>
-				</ul>
+				<ul id="chat-content"></ul>
 
 				<div class="input-group">
-
 					<textarea component="chat/input" id="chat-message-input" rows="1" placeholder="[[modules:chat.placeholder]]" name="chat-message" class="form-control"></textarea>
 					<span class="input-group-btn">
 						<button id="chat-message-send-btn" class="btn btn-primary" href="#" type="button">[[modules:chat.send]]</button>

templates/chats.tpl

@@ -12,9 +12,8 @@
 		</div>
 		<div class="panel-body">
 			<span class="since-bar"><a href="#" class="selected" data-since="recent">[[recent:title]]</a> &bull; <a href="#" data-since="week">[[modules:chat.seven_days]]</a> &bull; <a href="#" data-since="month">[[modules:chat.thirty_days]]</a> &bull; <a href="#" data-since="threemonths">[[modules:chat.three_months]]</a></span>
-			<ul class="chat-content well well-sm">
+			<ul class="chat-content">
 				<!-- IMPORT partials/chat_messages.tpl -->
-				<span class="user-typing pull-right hide"><i class="fa fa-pencil"></i> [[modules:chat.user_typing, {meta.username}]]</span>
 			</ul>
 			<div class="input-group">
 				<textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input" rows="1"></textarea>

templates/partials/chat_message.tpl

@@ -1,8 +1,8 @@
 				<li class="chat-message clear" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="{messages.newSet}">
 					<div class="message-header">
-						<span class="chat-timestamp pull-right timeago" title="{messages.timestampISO}"></span>
-						<a href="{config.relative_path}/user/{messages.fromUser.userslug}"><img class="chat-user-image" src="{messages.fromUser.picture}"></a>
+						<a href="{config.relative_path}/user/{messages.fromUser.userslug}"><img class="chat-user-image img-circle" src="{messages.fromUser.picture}"></a>
 						<strong><span class="chat-user">{messages.fromUser.username}</span></strong>
+						<span class="chat-timestamp timeago" title="{messages.timestampISO}"></span>
 					</div>
 					<div class="message-body">{messages.content}</div>
 				</li>