hyperzlib
/
nodebb-theme-persona
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

usercards init

Browse Source
main
psychobunny 10 years ago
parent c852b1ab53
commit 1d444614e3
6 changed files with 421 additions and 1 deletions
Show Stats Download Patch File Download Diff File

12
less/modules/fab.less
Unescape Escape View File

@ -0,0 +1,12 @@
.fab {
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.156863), 0px 2px 10px 0px rgba(0, 0, 0, 0.117647);
background-color: @brand-primary;
border: none;
border-radius: 50%;
cursor: pointer;
line-height: 55.5px;
vertical-align: middle;
height: 55.5px;
width: 55.5px;
}

269
less/modules/morph.less
Unescape Escape View File

@ -0,0 +1,269 @@
// modified from http://codepen.io/albebonv/pen/gIlrw
.btn-morph {
display: inline-block;
width: 2em;
height: 2em;
background-color: #FFF;
color: #9e9e9e;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
border-radius: 1em;
overflow: hidden;
transform: translateZ(0);
transition: all 0.5s ease;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.btn-morph:hover {
box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
.btn-morph:active {
transform: scale(1.1,1.1);
}
.btn-morph:focus {
outline: 0;
border:none;
color: rgba(0, 0, 0, 0);
}
.btn-morph > span {
display: block;
position: relative;
width: 1em;
height: 1em;
transition: transform 0.5s ease;
overflow: hidden;
margin: 0.5em;
}
.btn-morph > span > span {
display: block;
background-color: #9e9e9e;
position: absolute;
top: 0;
left: 0;
width: 1em;
height: 1em;
transition: all 0.5s ease;
border: 1px solid transparent;
}
header .btn-morph > span > span {
background-color: #e91e63;
}
.btn-morph.play > span {
transform: translate(1em,0) scale(1.6,1);
}
.btn-morph.play > span > span {
transform: rotate(-45deg) translate(-1em, -1em) scale(1,1);
}
.btn-morph.pause > span > span {
transform: scale(0.4,1) translate(-1.6em, 0);
}
.btn-morph.pause > span > span.s3 {
transform: scale(0.4,1) translate(1.6em, 0);
}
.btn-morph.stop > span {
transform: scale(0.8,0.8);
}
.btn-morph.menu > span > span {
transform: scale(1,0.2) translate(0,-3em);
}
.btn-morph.menu > span > span.s2 {
transform: scale(1,0.2) translate(0,0);
}
.btn-morph.menu > span > span.s3 {
transform: scale(1,0.2) translate(0,3em);
}
.btn-morph.close > span {
transform: rotate(45deg);
}
.btn-morph.close > span > span , .btn-morph.plus > span > span {
transform: scale(0.8,0.1);
}
.btn-morph.close > span > span.s3 , .btn-morph.plus > span > span.s3 {
transform: scale(0.1,0.8);
}
.btn-morph.minus > span > span {
transform: scale(1,0.2);
}
.btn-morph.more > span > span {
transform: scale(0.2,0.2) translate(-3em,0);
border-radius: 2em;
}
.btn-morph.more > span > span.s2 {
transform: scale(0.2,0.2) translate(0,0);
}
.btn-morph.more > span > span.s3 {
transform: scale(0.2,0.2) translate(3em,0);
}
.btn-morph.topArrow > span > span {
width: 0.4em;
height: 1.8em;
transform: translate(0.8em,0.2em);
}
.btn-morph.topArrow > span > span.s2 {
transform-origin: 0 0;
height: 1.4em;
transform: translate(1em,0) rotate(45deg);
}
.btn-morph.topArrow > span > span.s3 {
transform-origin: 100% 0;
height: 1.4em;
transform: translate(0.6em,0) rotate(-45deg);
}
.btn-morph.bottomArrow > span > span {
width: 0.4em;
height: 1.8em;
transform: translate(0.8em,0);
}
.btn-morph.bottomArrow > span > span.s2 {
transform-origin: 100% 100%;
height: 1.4em;
transform: translate(0.6em,0.6em) rotate(45deg);
}
.btn-morph.bottomArrow > span > span.s3 {
transform-origin: 0 100%;
height: 1.4em;
transform: translate(1em,0.6em) rotate(-45deg);
}
.btn-morph.rightArrow > span > span {
width: 1.8em;
height: 0.4em;
transform: translate(0,0.8em);
}
.btn-morph.rightArrow > span > span.s2 {
transform-origin: 100% 0;
width: 1.4em;
transform: translate(0.6em,1em) rotate(45deg);
}
.btn-morph.rightArrow > span > span.s3 {
transform-origin: 100% 100%;
width: 1.4em;
transform: translate(0.6em,0.6em) rotate(-45deg);
}
.btn-morph.leftArrow > span > span {
width: 1.8em;
height: 0.4em;
transform: translate(0.2em,0.8em);
}
.btn-morph.leftArrow > span > span.s2 {
transform-origin: 0 100%;
width: 1.4em;
transform: translate(0,0.6em) rotate(45deg);
}
.btn-morph.leftArrow > span > span.s3 {
transform-origin: 0 0;
width: 1.4em;
transform: translate(0,1em) rotate(-45deg);
}
.btn-morph.checked > span > span {
width: 1em;
height: 0.4em;
transform-origin: 100% 100%;
transform: translate(-0.3em,1.4em) rotate(45deg);
}
.btn-morph.checked > span > span.s3 {
width: 1.8em;
transform-origin: 0 100%;
transform: translate(0.7em,1.4em) rotate(-45deg);
}
.btn-morph.heart > span > span {
width: 0.5em;
height: 0.85em;
top: 0.1em;
left: 0.5em;
transform-origin: 0 100%;
transform: rotate(-45deg);
border-radius: 0.5em 0.5em 0 0;
}
.btn-morph.heart > span > span.s3 {
transform-origin: 100% 100%;
left: 0em;
transform: rotate(45deg);
}
.drop {
display: block;
position: absolute;
background: #CCC;
border-radius: 100%;
transform: scale(0);
pointer-events: none;
width: 100%;
height: 100%;
}
.drop:before {
display: block;
position: absolute;
content: "";
background-color: #EEE;
border-radius: 100%;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: scale(0);
}
.drop.animate {
animation: drop 1s ease-out;
}
.drop.animate:before {
animation: drop2 1s ease-out;
}
@keyframes drop {
100% {
opacity: 0;
transform: scale(1.25);
}
}
@keyframes drop2 {
30% {
opacity: 1;
transform: scale(0);
}
100% {
opacity: 0;
transform: scale(1.25);
}
}

73
less/modules/usercard.less
Unescape Escape View File

@ -0,0 +1,73 @@
.persona-usercard {
position: absolute;
background: #333;
top: -50%;
left: 0px;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.156863), 0px 2px 10px 0px rgba(0, 0, 0, 0.117647);
height: 150px;
z-index: 1;
a, a:hover, a:visited, a:active {
text-decoration: none;
color: white;
}
.usercard-picture {
width: 150px;
height: 150px;
float: left;
background-size: cover;
background-repeat: no-repeat;
}
.usercard-body {
padding: 5px 15px;
float: left;
height: 150px;
width: 300px;
color: white;
}
.usercard-name {
font-size: 28px;
}
.usercard-username {
text-transform: uppercase;
font-size: 13px;
}
.usercard-info {
text-align: center;
font-size: 30px;
font-weight: 300;
small {
text-transform: uppercase;
font-size: 10px;
display: block;
margin-top: 10px;
font-weight: 400;
}
}
.fab.btn-morph {
top: 70px;
position: absolute;
right: 15px;
padding: 0;
&.heart {
> span > span {
background-color: #E91E63;
}
}
&.plus {
> span > span {
background-color: @brand-primary;
}
}
}
}

4
less/persona.less
Unescape Escape View File

@ -27,4 +27,6 @@
@import "modules/nprogress";
@import "modules/usercard";
@import "modules/taskbar";
@import "modules/alerts";
@import "modules/alerts";
@import "modules/fab";
@import "modules/morph";

34
lib/persona.js
Unescape Escape View File

@ -23,6 +23,7 @@ $(document).ready(function() {
$(window).on('action:ajaxify.end', function() {
NProgress.done();
setupHoverCards();
});
}
@ -161,4 +162,37 @@ $(document).ready(function() {
$('#menu [data-section="profile"] ul').html($('#user-control-list').html())
.find('[component="user/status"]').remove();
}
function setupHoverCards() {
require(['components'], function(components) {
components.get('user/picture')
.on('mouseover', function() {
var avatar = $(this),
index = avatar.parents('[data-index]').attr('data-index');
templates.parse('modules/usercard', ajaxify.data.topics[index].user, function(html) {
var card = $(html);
avatar.parents('a').after(card);
card.find('.btn-morph').click(function(event){
$(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 = event.pageX - drop.width()/2 - $(this).offset().left;
y = event.pageY - drop.height()/2 - $(this).offset().top;
drop.css({top: y+'px', left: x+'px'}).addClass("animate");
});
card.on('mouseout', function() {
//card.remove();
});
});
})
});
}
});

30
templates/modules/usercard.tpl
Unescape Escape View File

@ -0,0 +1,30 @@
<div class="persona-usercard">
<!-- IF picture -->
<div class="usercard-picture" style="background-image:url({picture})"></div>
<!-- ELSE -->
<div class="usercard-picture" style="background-color: {icon:bgColor};">{icon:text}</div>
<!-- ENDIF picture -->
<div class="usercard-body">
<span class="usercard-name"><!-- IF fullname -->{fullname}<!-- ELSE -->{username}<!-- ENDIF fullname --></span><br />
<span class="usercard-username">@{username}</span><br />
<div class="row usercard-info">
<div class="col-xs-4">
<small>Posts</small>
{postcount}
</div>
<div class="col-xs-4">
<small>Reputation</small>
{reputation}
</div>
<button class="btn-morph fab plus">
<span>
<span class="s1"></span>
<span class="s2"></span>
<span class="s3"></span>
</span>
</button>
</div>
</div>
</div>
Write Preview
Loading…
Cancel
Save