Merge branch 'master' of https://github.com/NodeBB/nodebb-theme-persona

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,65 @@
 		}
 	}
 
-	ul.well {
+	.chat-content {
+		.fix-lists;
 		height: 250px;
 		overflow-y: auto;
+		overflow-x: hidden;
 		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 {
+			&:last-child {
-				width: 20px;
+				padding-bottom: 1.428rem;
-				height: 20px;
+			}
+
+			&[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;
+				color: @gray-light;
-				min-width: 60px;
+				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 +142,8 @@
 	}
 
 	.user-typing {
-		margin-top: -1.5em;
+		color: @gray-light;
-		.opacity(0.5);
+		margin: 1.428rem 0;
 	}
 
 	.selected[data-since] {

less/mixins.less

@@ -47,3 +47,21 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
+
+.fix-lists {
+	ul {
+		> li {
+			list-style-type: disc;
+
+			ul > li {
+				list-style-type: circle;
+
+				ul > li {
+					list-style-type: square;
+				}
+			}
+		}
+
+		margin-bottom: 10px;
+	}
+}

less/topic.less

@@ -239,21 +239,7 @@
 		}
 
 		.content {
-			ul {
+			.fix-lists;
-				> li {
-					list-style-type: disc;
-
-					ul > li {
-						list-style-type: circle;
-
-						ul > li {
-							list-style-type: square;
-						}
-					}
-				}
-
-				margin-bottom: 10px;
-			}
 
 			blockquote {
 				font-size: 85%;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "1.0.19",
+  "version": "1.0.26",
   "nbbpm": {
     "compatibility": "^0.7.1"
   },

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">
+				<ul class="chat-content"></ul>
-
-					<span class="user-typing hide"><i class="fa fa-pencil"></i> <span class="text"></span></span>
-				</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/notifications.tpl

@@ -29,7 +29,7 @@
 			<!-- ENDIF notifications.image -->
 
 			<p>
-				<a href="{notifications.path}">{notifications.bodyShort}</a>
+				<a component="notifications/item/link" href="{notifications.path}">{notifications.bodyShort}</a>
 			</p>
 			<p class="timestamp">
 				<span class="timeago" title="{notifications.datetimeISO}"></span>

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 img-circle" src="{messages.fromUser.picture}"></a>
-						<a href="{config.relative_path}/user/{messages.fromUser.userslug}"><img class="chat-user-image" 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>

templates/partials/topic/post.tpl

@@ -54,10 +54,10 @@
 <br />
 <div class="content" component="post/content" itemprop="text">
 	{posts.content}
-	<!-- IF posts.user.signature -->
-	<div class="post-signature">{posts.user.signature}</div>
-	<!-- ENDIF posts.user.signature -->
 </div>
+<!-- IF posts.user.signature -->
+<div component="post/signature" data-uid="{posts.user.uid}" class="post-signature">{posts.user.signature}</div>
+<!-- ENDIF posts.user.signature -->
 
 
 <small data-editor="{posts.editor.userslug}" component="post/editor" class="hidden">[[global:last_edited_by_ago, <strong>{posts.editor.username}</strong>, <span class="timeago" title="{posts.relativeEditTime}"></span>]]</small>