added back follow button to profile page

less/account.less

@@ -45,6 +45,12 @@
 			border: 4px solid white;
 			border-radius: 50%;
 
+			.fab.btn-morph {
+				top: 93px;
+				right: 4px;
+				position: absolute;
+			}
+
 			.status {
 				position: absolute;
 				font-size: 23px;

less/modules/fab.less

@@ -13,4 +13,21 @@
 
 .btn-group.open .dropdown-toggle.fab {
 	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.156863), 0px 2px 10px 0px rgba(0, 0, 0, 0.117647);
+}
+
+.fab.btn-morph {
+	padding: 0;
+
+	&.heart {
+		> span > span {
+			background-color: #E91E63;
+		}
+	}
+
+	&.plus {
+		background-color: @material-success;
+		> span > span {
+			background-color: white;
+		}
+	}
 }

less/modules/usercard.less

@@ -59,21 +59,7 @@
 
 	.fab.btn-morph {
 		top: 75px;
-		position: absolute;
 		right: 15px;
-		padding: 0;
-
-		&.heart {
-			> span > span {
-				background-color: #E91E63;
-			}
-		}
-
-		&.plus {
-			background-color: @brand-primary;
-			> span > span {
-				background-color: white;
-			}
-		}
+		position: absolute;
 	}
 }

lib/persona.js

@@ -21,9 +21,13 @@ $(document).ready(function() {
 			NProgress.set(0.7);
 		});
 
-		$(window).on('action:ajaxify.end', function() {
+		$(window).on('action:ajaxify.end', function(ev, data) {
 			NProgress.done();
 			setupHoverCards();
+
+			if (data.url.match('user/')) {
+				setupFavouriteButtonOnProfile();
+			}
 		});
 	}
 
@@ -198,29 +202,7 @@ $(document).ready(function() {
 				if (parseInt(app.user.uid, 10) === parseInt(data.uid, 10) || !app.user.uid) {
 					card.find('.btn-morph').hide();
 				} else {							
-					card.find('.btn-morph').click(function(ev) {
-						var type = $(this).hasClass('plus') ? 'follow' : 'unfollow';
-
-						socket.emit('user.' + type, {uid: data.uid}, function(err) {
-							if (err) {
-								return app.alertError(err.message);
-							}
-
-							app.alertSuccess('[[global:alert.' + type + ', ' + data.username + ']]');
-						});
-
-						$(this).toggleClass('plus').toggleClass('heart');
-
-						if ($(this).find('b.drop').length === 0) {
-							$(this).prepend('<b class="drop"></b>');
-						}
-
-						var drop = $(this).find('b.drop').removeClass('animate'),
-							x = ev.pageX - drop.width() / 2 - $(this).offset().left,
-							y = ev.pageY - drop.height() / 2 - $(this).offset().top;
-
-						drop.css({top: y + 'px', left: x + 'px'}).addClass('animate');
-					});
+					setupFavouriteMorph(card, data.uid, data.username);
 
 					if (isFollowing) {
 						$('.btn-morph').addClass('heart');
@@ -239,6 +221,10 @@ $(document).ready(function() {
 		return false;
 	}
 
+	function setupFavouriteButtonOnProfile() {
+		setupFavouriteMorph($('[component="account/cover"]'), ajaxify.data.uid, ajaxify.data.username);
+	}
+
 	function setupCardRemoval(card) {
 		function removeCard(ev) {
 			if ($(ev.target).closest('.persona-usercard').length === 0) {
@@ -252,4 +238,30 @@ $(document).ready(function() {
 				
 		$(document).on('click', removeCard);
 	}
+
+	function setupFavouriteMorph(parent, uid, username) {
+		parent.find('.btn-morph').click(function(ev) {
+			var type = $(this).hasClass('plus') ? 'follow' : 'unfollow';
+
+			socket.emit('user.' + type, {uid: uid}, function(err) {
+				if (err) {
+					return app.alertError(err.message);
+				}
+
+				app.alertSuccess('[[global:alert.' + type + ', ' + username + ']]');
+			});
+
+			$(this).toggleClass('plus').toggleClass('heart');
+
+			if ($(this).find('b.drop').length === 0) {
+				$(this).prepend('<b class="drop"></b>');
+			}
+
+			var drop = $(this).find('b.drop').removeClass('animate'),
+				x = ev.pageX - drop.width() / 2 - $(this).offset().left,
+				y = ev.pageY - drop.height() / 2 - $(this).offset().top;
+
+			drop.css({top: y + 'px', left: x + 'px'}).addClass('animate');
+		});
+	}
 });

templates/partials/account/header.tpl

@@ -8,6 +8,16 @@
 		<div class="user-icon user-profile-picture" style="background-color: {icon:bgColor};" title="{username}">{icon:text}</div>
 		<!-- ENDIF picture -->
 		<i component="user/status" class="fa fa-circle status {status}" title="[[global:{status}]]"></i>
+
+		<!-- IF !isSelf -->
+		<button class="btn-morph fab <!-- IF isFollowing -->heart<!-- ELSE -->plus<!-- ENDIF isFollowing -->">
+			<span>
+				<span class="s1"></span>
+				<span class="s2"></span>
+				<span class="s3"></span>
+			</span>
+		</button>
+		<!-- ENDIF !isSelf -->
 	</div>
 
 	<div class="container">