diff --git a/less/account.less b/less/account.less index 59cbdd1..8994dbe 100644 --- a/less/account.less +++ b/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; diff --git a/less/modules/fab.less b/less/modules/fab.less index d7f69ff..4afcdd1 100644 --- a/less/modules/fab.less +++ b/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; + } + } } \ No newline at end of file diff --git a/less/modules/usercard.less b/less/modules/usercard.less index 9241cc0..da7b72b 100644 --- a/less/modules/usercard.less +++ b/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; } } \ No newline at end of file diff --git a/lib/persona.js b/lib/persona.js index 8d518b1..aec7c3b 100644 --- a/lib/persona.js +++ b/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(''); - } - - 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(''); + } + + 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'); + }); + } }); \ No newline at end of file diff --git a/templates/partials/account/header.tpl b/templates/partials/account/header.tpl index b57f0f9..f0feee5 100644 --- a/templates/partials/account/header.tpl +++ b/templates/partials/account/header.tpl @@ -8,6 +8,16 @@
+ + + +