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

meetdilip

<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

@meetdilip

You've put <h1> {signature}</hi>, should be <h1> {signature}</h1>

trevor

@a_5mith said:

@meetdilip

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.

trevor

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

Screen Shot 2014-05-24 at 12.00.14 PM.png

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

Thanks @a_5mith , @trevor

trevor

@meetdilip No probs.

Schamper

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

Be sure to first disable it in the ACP!

For the people with custom cards, template has been changed to cards/profile.

julian

@Schamper Installed cards instead of mentions-cards, but now the CSS is gone Let me know

Schamper

@julian Right, I'm an idiot I've updated the styles.less in the repo but I can't push a new version until I get home tonight.

Schamper

@julian published new version, should be fixed now!

julian

Lookin' good @Schamper !!

julian

Eh... something got left over when I navigated away...

[Guide] Override the home page on a NodeBB | NodeBB - Google Chrome_007.png

Schamper

@julian but... how? That should prevent that from happening, right? It also should be impossible to happen in the split second between the AJAX call finishing and you navigating away because the currentCard variable is set after it has finished...

<baris>

Haha didn't I predict this? I think you need to make sure currentCard isn't changed before it is destroyed. It should always point to a single instance of card and it needs to be destroyed before another one is assigned to it.

Schamper

@baris @julian alright this should fix it in theory: https://github.com/Schamper/nodebb-plugin-cards/commit/007f3a65d3c9943d5623ca55056552e64b0f082a

I've published a new version because why not See if you can reproduce it now.

trevor

@Schamper said:

@baris @julian alright this should fix it in theory: https://github.com/Schamper/nodebb-plugin-cards/commit/007f3a65d3c9943d5623ca55056552e64b0f082a

I've published a new version because why not See if you can reproduce it now.

Great, you've destroyed my progress loader.

Schamper

@trevor I don't understand?

psychobunny

you sure it wasn't this commit instead?

trevor

@psychobunny thanks, how did I miss this?? WTF.

julian

Why do @Schamper's topics always generate so many replies ;_;

Such popularity, much wow.