closes #831, user profile changes

public/language/en_GB/user.json

@@ -9,6 +9,7 @@
 	"age": "Age",
 	"joined": "Joined",
 	"lastonline": "Last Online",
+	"profile": "Profile",
 	"profile_views": "Profile views",
 	"reputation": "Reputation",
 	"posts": "Posts",

public/src/forum/account.js

@@ -88,11 +88,7 @@ define(['forum/accountheader'], function(header) {
 			return;
 		}
 
-		translator.get('global:' + data.status, function(translated) {
+		onlineStatus.attr('class', 'account-online-status fa fa-circle status ' + data.status);
-			onlineStatus.find('span span').text(translated);
-			onlineStatus.find('i').attr('class', 'fa fa-circle status ' + data.status);
-		});
-
 	};
 
 	return Account;

public/src/forum/accountedit.js

@@ -42,7 +42,7 @@ define(['forum/accountheader', 'uploader'], function(header, uploader) {
 						$('.account-username-box a').each(function(index) {
 							$(this).attr('href', $(this).attr('href').replace(oldslug, data.userslug));
 						});
-						$('.account-username a:first-child').html(userData.username);
+
 						$('.account-username-box').attr('data-userslug', data.userslug);
 
 						$('#user-profile-link').attr('href', config.relative_path + '/user/' + data.userslug);

public/src/forum/accountheader.js

@@ -2,43 +2,58 @@ define(function() {
 	var	AccountHeader = {};
 
 	AccountHeader.init = function() {
-		var yourid = templates.get('yourid'),
+
-			theirid = templates.get('theirid');
 
 		AccountHeader.createMenu();
 
-		var editLink = $('#editLink');
+		hideLinks();
-		var settingsLink = $('#settingsLink');
-		var favouritesLink = $('#favouritesLink');
 
-		if (yourid === "0" || yourid !== theirid) {
+		selectActivePill();
-			editLink.hide();
-			settingsLink.hide();
-			favouritesLink.hide();
-		}
-
-		jQuery('.account-sub-links span a').removeClass('bold').each(function() {
-			var href = this.getAttribute('href');
-			if (window.location.href.indexOf(href) !== -1) {
-				jQuery(this).addClass('bold');
-				return false;
-			}
-		});
 	}
 
 	AccountHeader.createMenu = function() {
 		var userslug = $('.account-username-box').attr('data-userslug');
 
-		var html = '<div class="account-sub-links inline-block pull-right">\
+		var html ='<ul class="nav nav-tabs account-sub-links">\
-			<span id="settingsLink" class="pull-right"><a href="' + RELATIVE_PATH + '/user/' + userslug + '/settings">[[user:settings]]</a></span>\
+					<li id="settingsLink"><a href="' + RELATIVE_PATH + '/user/' + userslug + '/settings">[[user:settings]]</a></li>\
-			<span id="favouritesLink" class="pull-right"><a href="' + RELATIVE_PATH + '/user/' + userslug + '/favourites">[[user:favourites]]</a></span>\
+					<li id="favouritesLink"><a href="' + RELATIVE_PATH + '/user/' + userslug + '/favourites">[[user:favourites]]</a></li>\
-			<span class="pull-right"><a href="' + RELATIVE_PATH + '/user/' + userslug + '/followers">[[user:followers]]</a></span>\
+					<li><a href="' + RELATIVE_PATH + '/user/' + userslug + '/posts">[[global:posts]]</a></li>\
-			<span class="pull-right"><a href="' + RELATIVE_PATH + '/user/' + userslug + '/following">[[user:following]]</a></span>\
+					<li><a href="' + RELATIVE_PATH + '/user/' + userslug + '/followers">[[user:followers]]</a></li>\
-			<span id="editLink" class="pull-right"><a href="' + RELATIVE_PATH + '/user/' + userslug + '/edit">[[user:edit]]</a></span>\
+					<li><a href="' + RELATIVE_PATH + '/user/' + userslug + '/following">[[user:following]]</a></li>\
-		</div>'
+					<li id="editLink"><a href="' + RELATIVE_PATH + '/user/' + userslug + '/edit">[[user:edit]]</a></li>\
+					<li id="profile"><a href="' + RELATIVE_PATH + '/user/' + userslug + '">[[user:profile]]</a></li>\
+				</ul>';
+
 
 		translator.translate(html, function(translatedHtml) {
 			$('.account-username-box').append(translatedHtml);
+			selectActivePill();
+			hideLinks();
+		});
+	}
+
+	function hideLinks() {
+		var yourid = templates.get('yourid'),
+			theirid = templates.get('theirid');
+
+		var editLink = $('#editLink');
+		var settingsLink = $('#settingsLink');
+		var favouritesLink = $('#favouritesLink');
+
+		if (parseInt(yourid, 10) === 0 || parseInt(yourid, 10) !== parseInt(theirid, 10)) {
+			editLink.hide();
+			settingsLink.hide();
+			favouritesLink.hide();
+		}
+	}
+
+	function selectActivePill() {
+		$('.account-sub-links li').removeClass('active').each(function() {
+			var href = $(this).find('a').attr('href');
+			if (window.location.href.indexOf(href) !== -1) {
+				$(this).addClass('active');
+				return false;
+			}
 		});
 	}
 

public/src/forum/accountposts.js

@@ -0,0 +1,52 @@
+define(['forum/accountheader'], function(header) {
+	var AccountPosts = {},
+		loadingMore = false;
+
+	AccountPosts.init = function() {
+		header.init();
+
+		app.enableInfiniteLoading(function() {
+			if(!loadingMore) {
+				loadMore();
+			}
+		});
+	};
+
+	function loadMore() {
+		loadingMore = true;
+		socket.emit('posts.loadMoreUserPosts', {
+			uid: $('.account-username-box').attr('data-uid'),
+			after: $('.user-favourite-posts').attr('data-nextstart')
+		}, function(err, data) {
+			if(err) {
+				return app.alertError(err.message);
+			}
+
+			if (data.posts && data.posts.length) {
+				onTopicsLoaded(data.posts);
+				$('.user-favourite-posts').attr('data-nextstart', data.nextStart);
+			}
+
+			loadingMore = false;
+		});
+	}
+
+	function onTopicsLoaded(posts) {
+		var html = templates.prepare(templates['accountposts'].blocks['posts']).parse({
+			posts: posts
+		});
+
+		translator.translate(html, function(translatedHTML) {
+
+			$('#category-no-topics').remove();
+
+			html = $(translatedHTML);
+			$('.user-favourite-posts').append(html);
+			$('span.timeago').timeago();
+			app.createUserTooltips();
+			app.makeNumbersHumanReadable(html.find('.human-readable-number'));
+		});
+	}
+
+	return AccountPosts;
+});

public/templates/account.tpl

@@ -2,112 +2,119 @@
 <div class="well account">
 
 	<div class="account-username-box" data-userslug="{userslug}">
-		<span class="account-username">
+
-			<a href="{relative_path}/user/{userslug}">{username}</a>
-		</span>
 	</div>
 
 	<div class="row">
-		<div class="col-md-2 account-block" style="text-align: center; margin-bottom:20px;">
+		<div class="col-md-5 account-block">
-			<div class="account-picture-block">
-				<img src="{picture}" class="user-profile-picture img-thumbnail"/>
-			</div>
-			<div class="account-online-status">
-				<span><i class="fa fa-circle status offline"></i> <span>[[user:offline]]</span></span>
-			</div>
-			<!-- IF banned -->
-			<div>
-				<span class="label label-danger">[[user:banned]]</span>
-			</div>
-			<!-- ENDIF banned -->
-			<div>
-				<a id="chat-btn" href="#" class="btn btn-default hide">Chat</a>
-			</div>
-			<div id="user-actions">
-				<a id="follow-btn" href="#" class="btn btn-default hide">Follow</a>
-				<a id="unfollow-btn" href="#" class="btn btn-default hide">Unfollow</a>
-			</div>
-		</div>
 
-		<div class="col-md-4">
+			<div class="text-center account-picture-block">
-			<div class="inline-block">
+				<div>
-				<div class="account-bio-block">
+					<a href="{relative_path}/user/{userslug}"><img src="{picture}" class="user-profile-picture img-thumbnail"/></a>
-					<span class="account-bio-label">[[user:email]]</span><i class="fa fa-eye-slash {emailClass}" title="[[user:email_hidden]]"></i>
+				</div>
+
+				<div>
+					<div>
+						<span>
+							<i class="account-online-status fa fa-circle status offline"></i>
+							<span class="account-username"> {username}</span>
+						</span>
+					</div>
+
+					<!-- IF banned -->
+					<div>
+						<span class="label label-danger">[[user:banned]]</span>
+					</div>
+					<!-- ENDIF banned -->
+					<div>
+						<a id="chat-btn" href="#" class="btn btn-primary hide">Chat</a>
+						<a id="follow-btn" href="#" class="btn btn-success hide">Follow</a>
+						<a id="unfollow-btn" href="#" class="btn btn-warning hide">Unfollow</a>
+					</div>
+				</div>
+
+			</div>
+
+			<div class="text-center account-stats panel panel-default">
+				<div class="panel-body">
+					<div class="inline-block text-center">
+						<div class="formatted-number">{postcount}</div>
+						<div class="account-bio-label">[[user:posts]]</div>
+					</div>
+
+					<div class="inline-block text-center">
+						<div class="formatted-number">{followerCount}</div>
+						<div class="account-bio-label">[[user:followers]]</div>
+					</div>
+
+					<div class="inline-block text-center">
+						<div class="formatted-number">{followingCount}</div>
+						<div class="account-bio-label">[[user:following]]</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="panel panel-default">
+				<div class="panel-body">
+					<span class="account-bio-label">[[user:email]]</span>
 					<!-- IF email -->
-					<span>{email}</span>
+					<span class="account-bio-value"><i class="fa fa-eye-slash {emailClass}" title="[[user:email_hidden]]"></i> {email}</span>
 					<!-- ELSE -->
 					<i class="fa fa-eye-slash" title="[[user:email_hidden]]"></i> [[user:hidden]]
 					<!-- ENDIF email -->
-					<br/>
-
 
 					<!-- IF fullname -->
 					<span class="account-bio-label">[[user:fullname]]</span>
-					<span>{fullname}</span>
+					<span class="account-bio-value">{fullname}</span>
-					<br/>
 					<!-- ENDIF fullname -->
 
 					<!-- IF website -->
 					<span class="account-bio-label">[[user:website]]</span>
-					<span><a href="{website}">{websiteName}</a></span>
+					<span class="account-bio-value"><a href="{website}">{websiteName}</a></span>
-					<br/>
 					<!-- ENDIF website -->
 
 					<!-- IF location -->
 					<span class="account-bio-label">[[user:location]]</span>
-					<span>{location}</span>
+					<span class="account-bio-value">{location}</span>
-					<br/>
 					<!-- ENDIF location -->
 
 					<!-- IF age -->
 					<span class="account-bio-label">[[user:age]]</span>
-					<span>{age}</span>
+					<span class="account-bio-value">{age}</span>
-					<br/>
+
 					<!-- ENDIF age -->
 
 					<hr/>
-					<span class="account-bio-label">[[user:joined]]</span>
-					<span class="timeago" title="{joindate}"></span>
-					<br/>
-
-					<span class="account-bio-label">[[user:lastonline]]</span>
-					<span class="timeago" title="{lastonline}"></span>
-					<br/>
 
 					<span class="account-bio-label">[[user:profile_views]]</span>
-					<span class="formatted-number">{profileviews}</span>
+					<span class="formatted-number account-bio-value">{profileviews}</span>
-					<br/>
 
 					<span class="account-bio-label">[[user:reputation]]</span>
-					<span class="formatted-number">{reputation}</span>
+					<span class="formatted-number account-bio-value">{reputation}</span>
-					<br/>
 
-					<span class="account-bio-label">[[user:posts]]</span>
+					<span class="account-bio-label">[[user:joined]]</span>
-					<span class="formatted-number">{postcount}</span>
+					<span class="timeago account-bio-value" title="{joindate}"></span>
-					<br/>
 
-					<span class="account-bio-label">[[user:followers]]</span>
+					<span class="account-bio-label">[[user:lastonline]]</span>
-					<span class="formatted-number">{followerCount}</span>
+					<span class="timeago account-bio-value" title="{lastonline}"></span>
-					<br/>
 
-					<span class="account-bio-label">[[user:following]]</span>
-					<span class="formatted-number">{followingCount}</span>
-					<br/>
-
-					<hr/>
 					<!-- IF !disableSignatures -->
 					<!-- IF signature -->
+					<hr/>
 					<span class="account-bio-label">[[user:signature]]</span>
-					<div class="post-signature">
+					<div class="post-signature account-bio-value">
 						<span id='signature'>{signature}</span>
 					</div>
 					<!-- ENDIF signature -->
 					<!-- ENDIF !disableSignatures -->
 				</div>
 			</div>
+
+
 		</div>
 
-		<div class="col-md-6 user-recent-posts">
+
+		<div class="col-md-7 user-recent-posts">
 			<div class="topic-row panel panel-default clearfix">
 				<div class="panel-heading">
 					<h3 class="panel-title">[[global:recentposts]]</h3>

public/templates/accountedit.tpl

@@ -30,11 +30,8 @@
 		</div><!-- /.modal-dialog -->
 	</div><!-- /.modal -->
 
-	<div class="account-username-box" data-userslug="{userslug}">
+	<div class="account-username-box clearfix" data-userslug="{userslug}">
-		<span class="account-username">
+
-			<a href="{relative_path}/user/{userslug}">{username}</a> <i class="fa fa-chevron-right"></i>
-			<a href="{relative_path}/user/{userslug}/edit">[[user:edit]]</a>
-		</span>
 	</div>
 
 	<div class="row">

public/templates/accountposts.tpl

@@ -0,0 +1,41 @@
+<div class="well favourites">
+	<div class="account-username-box clearfix" data-userslug="{userslug}" data-uid="{uid}">
+
+	</div>
+
+	<!-- IF !posts.length -->
+		<div class="alert alert-warning">[[topic:favourites.has_no_favourites]]</div>
+	<!-- ENDIF !posts.length -->
+
+	<div class="row">
+		<div class="col-md-12 user-favourite-posts" data-nextstart="{nextStart}">
+			<!-- BEGIN posts -->
+			<div class="topic-row panel panel-default clearfix">
+				<div class="panel-body">
+					<a href="../../user/{posts.userslug}">
+						<img title="{posts.username}" class="img-rounded user-img" src="{posts.picture}">
+					</a>
+
+					<a href="../../user/{posts.userslug}">
+						<strong><span>{posts.username}</span></strong>
+					</a>
+					<p>{posts.content}</p>
+
+					<div>
+						<small>
+							<span class="pull-right">
+								<a href="../../topic/{posts.tid}/#{posts.pid}">posted</a>
+								in
+								<a href="../../category/{posts.categorySlug}">
+									<i class="fa {posts.categoryIcon}"></i> {posts.categoryName}
+								</a>
+								<span class="timeago" title="{posts.relativeTime}"></span>
+							</span>
+						</small>
+					</div>
+				</div>
+			</div>
+			<!-- END posts -->
+		</div>
+	</div>
+</div>

public/templates/accountsettings.tpl

@@ -1,10 +1,7 @@
 <div class="well account">
 
-	<div class="account-username-box" data-userslug="{userslug}">
+	<div class="account-username-box clearfix" data-userslug="{userslug}">
-		<span class="account-username">
+
-			<a href="{relative_path}/user/{userslug}">{username}</a> <i class="fa fa-chevron-right"></i>
-			<a href="{relative_path}/user/{userslug}/settings">[[user:settings]]</a>
-		</span>
 	</div>
 
 	<div class="row">

public/templates/config.json

@@ -23,6 +23,7 @@
 		"^user.*followers": "followers",
 		"^user.*settings": "accountsettings",
 		"^user.*favourites": "favourites",
+		"^user.*posts": "accountposts",
 		"^user/.*": "account",
 
 		"^recent/.*": "recent",

public/templates/favourites.tpl

@@ -1,13 +1,10 @@
 <div class="well favourites">
-	<div class="account-username-box" data-userslug="{userslug}">
+	<div class="account-username-box clearfix" data-userslug="{userslug}">
-		<span class="account-username">
+
-			<a href="{relative_path}/user/{userslug}">{username}</a> <i class="fa fa-chevron-right"></i>
-			<a href="{relative_path}/user/{userslug}/favourites">[[topic:favourites]]</a>
-		</span>
 	</div>
 
 	<!-- IF !posts.length -->
-		<div id="no-favourites-notice" class="alert alert-warning">[[topic:favourites.has_no_favourites]]</div>
+		<div class="alert alert-warning">[[topic:favourites.has_no_favourites]]</div>
 	<!-- ENDIF !posts.length -->
 
 	<div class="row">

public/templates/followers.tpl

@@ -1,10 +1,7 @@
 <div class="well users account">
 
-	<div class="account-username-box" data-userslug="{userslug}">
+	<div class="account-username-box clearfix" data-userslug="{userslug}">
-		<span class="account-username">
+
-			<a href="../../user/{userslug}">{username}</a> <i class="fa fa-chevron-right"></i>
-			<a href="../../user/{userslug}/followers">[[user:followers]]</a>
-		</span>
 	</div>
 
 	<div>

public/templates/following.tpl

@@ -1,10 +1,7 @@
 <div class="well users account">
 
-	<div class="account-username-box" data-userslug="{userslug}">
+	<div class="account-username-box clearfix" data-userslug="{userslug}">
-		<span class="account-username">
+
-			<a href="../../user/{userslug}">{username}</a> <i class="fa fa-chevron-right"></i>
-			<a href="../../user/{userslug}/following">[[user:following]]</a>
-		</span>
 	</div>
 
 	<div>

src/posts.js

@@ -169,11 +169,30 @@ var db = require('./database'),
 				});
 			}, function(pids) {
 				if (!(pids && pids.length)) {
-					return callback(null, []);
+					return callback(null, { posts: [], nextStart: 0});
 				}
 
 
-				Posts.getPostSummaryByPids(pids, false, callback);
+				Posts.getPostSummaryByPids(pids, false, function(err, posts) {
+					if(err) {
+						return callback(err);
+					}
+
+					if(!posts || !posts.length) {
+						return callback(null, { posts: [], nextStart: 0});
+					}
+
+					db.sortedSetRevRank('uid:' + uid + ':posts', posts[posts.length - 1].pid, function(err, rank) {
+						if(err) {
+							return calllback(err);
+						}
+						var userPosts = {
+							posts: posts,
+							nextStart: parseInt(rank, 10) + 1
+						};
+						callback(null, userPosts);
+					});
+				});
 			});
 		});
 	}

src/routes/user.js

@@ -72,6 +72,7 @@ var fs = require('fs'),
 			createRoute('/:userslug/following', '/following', 'following');
 			createRoute('/:userslug/followers', '/followers', 'followers');
 			createRoute('/:userslug/favourites', '/favourites', 'favourites');
+			createRoute('/:userslug/posts', '/posts', 'accountposts');
 
 			app.get('/:userslug/edit', function (req, res) {
 
@@ -363,6 +364,42 @@ var fs = require('fs'),
 			});
 		});
 
+		app.get('/api/user/:userslug/posts', function (req, res, next) {
+			var callerUID = req.user ? req.user.uid : '0';
+
+			user.getUidByUserslug(req.params.userslug, function (err, uid) {
+				if (!uid) {
+					res.json(404, {
+						error: 'User not found!'
+					});
+					return;
+				}
+
+				user.getUserFields(uid, ['username', 'userslug'], function (err, userData) {
+					if (err) {
+						return next(err);
+					}
+
+					if (userData) {
+						posts.getPostsByUid(callerUID, uid, 0, 19, function (err, userPosts) {
+							if (err) {
+								return next(err);
+							}
+							userData.uid = uid;
+							userData.posts = userPosts.posts;
+							userData.nextStart = userPosts.nextStart;
+
+							res.json(userData);
+						});
+					} else {
+						res.json(404, {
+							error: 'User not found!'
+						});
+					}
+				});
+			});
+		});
+
 		app.get('/api/user/:userslug', function (req, res, next) {
 			var callerUID = req.user ? req.user.uid : '0';
 
@@ -375,13 +412,13 @@ var fs = require('fs'),
 
 				user.isFollowing(callerUID, userData.theirid, function (isFollowing) {
 
-					posts.getPostsByUid(callerUID, userData.theirid, 0, 9, function (err, posts) {
+					posts.getPostsByUid(callerUID, userData.theirid, 0, 9, function (err, userPosts) {
 
 						if(err) {
 							return next(err);
 						}
 
-						userData.posts = posts.filter(function (p) {
+						userData.posts = userPosts.posts.filter(function (p) {
 							return p && parseInt(p.deleted, 10) !== 1;
 						});
 

src/socket.io/posts.js

@@ -258,4 +258,15 @@ SocketPosts.loadMoreFavourites = function(socket, data, callback) {
 	posts.getFavourites(socket.uid, start, end, callback);
 };
 
+SocketPosts.loadMoreUserPosts = function(socket, data, callback) {
+	if(!data || !data.after || !data.uid) {
+		return callback(new Error('invalid data'));
+	}
+
+	var start = parseInt(data.after, 10),
+		end = start + 9;
+
+	posts.getPostsByUid(socket.uid, data.uid, start, end, callback);
+};
+
 module.exports = SocketPosts;