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

  • Plugin & Theme Dev Anime Lovers GNU/Linux

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

    Screen Shot 2014-05-23 at 3.53.47 PM.png

  • Admin

    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

    usercards.png

  • Plugin & Theme Dev Anime Lovers GNU/Linux

    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.

  • Admin

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

  • Plugin & Theme Dev

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

  • Plugin & Theme Dev Anime Lovers GNU/Linux

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


  • @Schamper said:

    npm install nodebb-plugin-mentions-cards

    Great stuff, thanks for creating this!

  • GNU/Linux

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

  • Plugin & Theme Dev Anime Lovers GNU/Linux

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

  • GNU/Linux

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

  • Plugin & Theme Dev Anime Lovers GNU/Linux

    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.

  • GNU/Linux

    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 ?


  • This post is deleted!
  • GNU/Linux

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


  • @meetdilip

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

  • Plugin & Theme Dev Anime Lovers GNU/Linux

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

  • Plugin & Theme Dev Anime Lovers GNU/Linux

    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.

  • GNU/Linux

    Thanks @a_5mith , @trevor

  • Plugin & Theme Dev Anime Lovers GNU/Linux

    @meetdilip No probs. 😉

  • Plugin & Theme Dev

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


Suggested Topics

| | |

© 2014 – 2022 NodeBB, Inc. — Made in Canada.