From 1d444614e3ab462aabd38c0f6c582d8cc915844f Mon Sep 17 00:00:00 2001 From: psychobunny Date: Thu, 29 Oct 2015 21:29:58 -0400 Subject: [PATCH] usercards init --- less/modules/fab.less | 12 ++ less/modules/morph.less | 269 +++++++++++++++++++++++++++++++++ less/modules/usercard.less | 73 +++++++++ less/persona.less | 4 +- lib/persona.js | 34 +++++ templates/modules/usercard.tpl | 30 ++++ 6 files changed, 421 insertions(+), 1 deletion(-) create mode 100644 less/modules/fab.less create mode 100644 less/modules/morph.less create mode 100644 less/modules/usercard.less create mode 100644 templates/modules/usercard.tpl diff --git a/less/modules/fab.less b/less/modules/fab.less new file mode 100644 index 0000000..de86d72 --- /dev/null +++ b/less/modules/fab.less @@ -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; +} \ No newline at end of file diff --git a/less/modules/morph.less b/less/modules/morph.less new file mode 100644 index 0000000..0357cf8 --- /dev/null +++ b/less/modules/morph.less @@ -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); + } +} \ No newline at end of file diff --git a/less/modules/usercard.less b/less/modules/usercard.less new file mode 100644 index 0000000..413494d --- /dev/null +++ b/less/modules/usercard.less @@ -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; + } + } + } +} \ No newline at end of file diff --git a/less/persona.less b/less/persona.less index d39f2b0..ef8ad4d 100644 --- a/less/persona.less +++ b/less/persona.less @@ -27,4 +27,6 @@ @import "modules/nprogress"; @import "modules/usercard"; @import "modules/taskbar"; -@import "modules/alerts"; \ No newline at end of file +@import "modules/alerts"; +@import "modules/fab"; +@import "modules/morph"; \ No newline at end of file diff --git a/lib/persona.js b/lib/persona.js index b41eeeb..654c187 100644 --- a/lib/persona.js +++ b/lib/persona.js @@ -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(""); + } + + 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(); + }); + }); + }) + }); + + } }); \ No newline at end of file diff --git a/templates/modules/usercard.tpl b/templates/modules/usercard.tpl new file mode 100644 index 0000000..4cb6b3e --- /dev/null +++ b/templates/modules/usercard.tpl @@ -0,0 +1,30 @@ +
+ +
+ +
{icon:text}
+ +
+ {fullname}{username}
+ @{username}
+ +
+
+ Posts + {postcount} +
+
+ Reputation + {reputation} +
+ + +
+
+
\ No newline at end of file