[nodebb-plugin-cards] Show cards when hovering over user links!
-
-
wow that card looks awesome @trevor ... such a show off
hahabtw these cards seem to get stuck open on mobile, after opening the composer, I can't remove the card. Maybe the cards shouldn't be activated at all on mobile
-
So you're saying they should either be disabled at a certain viewport, OR, as you've said for mobile devices using mobile detection which leads me to ask this question. Why doesn't NodeBB use Modernizr or some type of browser detection in the core?
I agree with either direction. -
That's a good question, right now we have some stuff like this, might be better to use Modernizr instead
-
@psychobunny either that or destroy it on any "click" not on the card. Also is it just on Android or on Chrome in general that the info is under the profile image, instead of next to it?
@trevor oooh that looks very nice! Is that with just a template override and some styling?
-
@Schamper Yeah, I didn't have to touch JS.
-
@meetdilip said:
I am yet to install this. Am I to believe that there are custom titles / group titles available. Or only in @trevor 's theme ?
Its not a custom title/group title, its just a signature.
{signature}
I suppose it uses the variables from the profiles so you can add anything you want thats on theprofile.tpllike age and etc. -
@trevor said:
@meetdilip said:
I am yet to install this. Am I to believe that there are custom titles / group titles available. Or only in @trevor 's theme ?
Its not a custom title/group title, its just a signature.
{signature}
I suppose it uses the variables from the profiles so you can add anything you want thats on theprofile.tpllike age and etc.Thanks. Could you please explain to steps please. Not as good as you guys
-
You can edit the template called
card.tpllocated innode_modules/nodebb-plugin-mentions-cards/templates/mentions/card.tpl
Somewhere in there you can place the{signature}variable. -
<div class="mentions-card" data-username="{username}" data-uid="{uid}">
<div class="mentions-card-img-container">
<a href="/user/{userslug}"><img src="{picture}" /></a>
</div><ul class="mentions-card-stats"> <h1> {signature}</hi> <li title="Reputation"><i class="fa fa-star"></i><span title="{reputation}"></span></li> <li title="Posts"><i class="fa fa-pencil"></i><span title="{postcount}"></span></li> <li title="Followers"><i class="fa fa-users"></i><span title="{followerCount}"></span></li> <li title="Profile views"><i class="fa fa-eye"></i><span title="{profileviews}"></span></li> </ul> <div class="mentions-card-main"> <h4>{name}</h4> <ul> <li><i title="{statusTitle}" class="account-online-status fa fa-circle status {status}"></i></li> <li><a class="mentions-card-chat" href="#"><i class="fa fa-comment-o"></i></a></li> </ul> </div></div>
-
@a_5mith said:
You've put
<h1> {signature}</hi>, should be<h1> {signature}</h1>Right, bad tag. And yes it's as easy as that, fix the tag, save it and you're done!
I do however recommend you set a max-width because depending on what you've set your signature length to. I used max-width with an ellipse. -
So here's what mine looks like as an example, maybe you can copy it or get some ideas. I'll leave this here for everyone else as well.
###HTML
<div class="mentions-card" data-username="{username}" data-uid="{uid}"> <a class="mentions-logo" href="//convoe.com/" target="_blank"> <span class="logo-mentions"> <span class="mentions-sr">Convoe site navigation</span> </span> </a> <div class="mentions-hero-image mentions-image-cover"></div> <div class="mentions-card-img-container"> <a href="/user/{userslug}"><img class="img-circle" src="{picture}" /></a> <i title="{statusTitle}" class="account-online-status fa fa-circle status {status}"></i></li> </div> <h4 class="mentions-title">{name}</h4> <div class="mentions-description">{signature}</div> <ul class="mentions-card-stats mentions-stats"> <li class="mentions-counter"><span title="{reputation}"></span> <small class="mentions-counter-is">Rep</small></li> <li class="mentions-counter"><span title="{postcount}"></span> <small class="mentions-counter-is">Posts</small></li> <li class="mentions-counter"><span title="{followerCount}"></span> <small class="mentions-counter-is">Followers</small></li> <li class="mentions-counter"><span title="{profileviews}"></span> <small class="mentions-counter-is">Views</small></li> </ul> </div>###CSS
.mentions-card { display: inline-block; text-align: center; overflow: hidden; border-radius: 4px; -webkit-border-radius: 4px; -webkit-backface-visibility: hidden; .mentions-logo { position: absolute; left: 10px; width: 30px; height: 30px; line-height: 34px; background: rgba(0, 0, 0, 0.8); color: #FFF; text-decoration: none; top: 10px; outline: 0; text-align: center; .logo-mentions { // OPTIONAL BRAND IMG //background-image: url(YOURLOGO); //background-color: #4B4276; background-repeat: no-repeat; background-position: 0 0; background-size: cover; height: 30px; width: 30px; display: block; } } .mentions-sr { position: absolute; top: -9999px; left: -9999px; } .mentions-hero-image { height: 60px; } .mentions-image-cover { //NOT IMPLEMENTED YET } .mentions-card-img-container { margin-top: -30px; display: inline-block; overflow: hidden; border: 3px solid #FFF; background-color: #FFF; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; .status { position: absolute; right: 74px; top: 30px; font-size: 10px; } img { width: 50px; display: block; } } .mentions-title { letter-spacing: -0.04em; margin: 4px 0 2px; padding: 0 40px; line-height: 1; .mentions-at { font-weight: 100; margin-right: 2px; } } .mentions-description { display: block; color: rgba(0, 0, 0, 0.6); word-break: break-word; letter-spacing: -.02em; font-size: 13px; margin: 0; padding: 0 40px; line-height: 1.4; width: 220px; margin: 0 auto; p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; } } .mentions-stats { letter-spacing: -.04em; margin: 6px 0 10px; padding: 0 10px; line-height: 1; .mentions-counter { font-size: 18px; font-weight: 700; display: inline-block; margin: 0 6px; .mentions-counter-is { font-size: 10px; font-weight: 500; color: rgba(0, 0, 0, 0.3); display: block; text-transform: uppercase; margin-top: 2px; } } } }###RESULT
One thing to note is my Bootstrap is extremely customized and much of it has been stripped out to save from loading unnecessary stuff I'd prob never use. so your popovers won't really look like mines unless you're willing to go that extra mile. But, still, this should be a pretty good example nevertheless. Last but not least theres NO CHAT BUTTON on this! Add your own if you want.
-
@meetdilip No probs.
-
@trevor very nice! If see any improvements you can make to the default card, feel free to do so
I've renamed the plugin to
nodebb-plugin-cards(who knows what it'll extend to, amirite?) and published the latest version with the latest fixes.
To upgrade you first have to remove the old plugin, and install the new one:npm uninstall nodebb-plugin-mentions-cards npm install nodebb-plugin-cardsBe sure to first disable it in the ACP!
For the people with custom cards, template has been changed to
cards/profile.
