[nodebb-plugin-cards] Show cards when hovering over user links!

[Schamper]

@tedr56 That should be fixed with https://github.com/Schamper/nodebb-plugin-mentions-cards/commit/cd215d07167907bc0b847f2f3fbfef0b56dbf097, but I'm holding off on publishing another update, incase more bugs are found If there won't be any other reports by tonight I'll publish that fix.

[tedr56]

@Schamper No problem. Thanks

[trevor]

Gonna implement this nao! LOL

[trevor]

Okay so, I have it installed and it works but I hover over anyones name, avatar, etc. it doesn't remove the popover from the dom so its a bunch of cards everywhere.

Card city...

EDIT: I fixed it by changing;
$('.container').off(events, selector).on(events, selector, function(e){
to what I have it all wrapped in which is ._ob

Actually I can just put body and it works just fine too.

[trevor]

Noticed a bug when you hover over the card and leave it on hover and backspace it doesn't remove itself.

[baris]

The issue where the card remains on screen on page navigation is fixed, @Schamper just didn't push a new version yet.

[trevor]

@baris said:

The issue where the card remains on screen on page navigation is fixed, @Schamper just didn't push a new version yet.

Ohh okay, thanks! Yup, I just pulled the latest, looks better and works good now. Example below...

[psychobunny]

wow that card looks awesome @trevor ... such a show off haha

btw 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

[trevor]

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.

[psychobunny]

That's a good question, right now we have some stuff like this, might be better to use Modernizr instead

[Schamper]

@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?

[trevor]

@Schamper Yeah, I didn't have to touch JS.

[Steve]

@Schamper said:

npm install nodebb-plugin-mentions-cards

Great stuff, thanks for creating this!

[meetdilip]

I am yet to install this. Am I to believe that there are custom titles / group titles available. Or only in @trevor 's theme ?

[trevor]

@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 the profile.tpl like age and etc.

[meetdilip]

@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 the profile.tpl like age and etc.

Thanks. Could you please explain to steps please. Not as good as you guys

[trevor]

You can edit the template called card.tpl located in node_modules/nodebb-plugin-mentions-cards/templates/mentions/card.tpl
Somewhere in there you can place the {signature} variable.

[meetdilip]

Sorry to bother you further. I use Digital Ocean's VPS. Debian 7 Wheezy. Care to share the commands I should use to achieve this ?

[a_5mith]

This post is deleted!

[meetdilip]

<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>