The next part I got ready for the keynote was people search. But I wanted to move away from the typical search results list. I wanted something more visual and easier to digest. I wanted results to be more visual, maybe like a slideshow of people cards that I could flip through.
After doing a bit of searching, I landed on another jQuery plugin, this time the Baraja plugin and it got me something like this:
So what's the magic here? Let's walk through the parts:
1. As usual, include the right JavaScript:
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="Baraja/js/modernizr.custom.79639.js"></script>
<script type="text/javascript" src="Baraja/js/jquery.baraja.js"></script>
2. Then the CSS for styling
<style type="text/css">
.homepage {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
font-weight: 300;
color: #444;
line-height: 1.2;
background-color: #f0f0f0;
}
a {
color: #1c8aae !important;
text-decoration: none !important;
}
.photo {
width: 100px;
height: 100px;
border-radius: 55px;
-webkit-border-radius: 55px;
-moz-border-radius: 55px;
border-color: #fff;
border-style: solid;
box-shadow: 0 0 3px rgba(0, 0, 0, .4);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .4);
}
.fn
{
font-family: "HelveticaNeue-Bold", "Helvetica Neue Bold","Helvetica Neue", sans-serif;
font-weight: 600;
text-decoration: none;
color: #444 !important;
font-size: 18pt;
}
.inputForm
{
border: solid 1px #e9ecef;
width: 280px;
height: 30px;
padding: 8px;
-webkit-border-radius: 15px; //For Safari, etc.
-moz-border-radius: 15px; //For Mozilla, etc.
border-radius: 15px; //CSS3 Feature
box-shadow: 0 0 4px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
}
.searchEntry {
text-align: center;
margin: auto;
padding-top: 20px;
}
.searchResults {
padding-top: 20px;
width: 260px;
height: 600px;
margin: 30px auto;
}
ul.baraja-container li {
border-radius: 10px;
padding: 5px;
box-shadow: 0 0 4px rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .1);
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 250px;
height: 250px;
margin: 0;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
background: #f0f0f0;
font-size: 12pt;
text-align: center;
pointer-events: auto;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
ul.baraja-container li img {
margin-top: 20px;
}
ul.baraja-container li p {
line-height: 1.0px;
}
ul.baraja-container li div {
text-align: center;
}
ul.baraja-container {
list-style-type: none;
width: 260px;
height: 310px;
margin: 0 auto 30px;
position: relative;
padding: 0;
}
.score {
font-size: 18pt;
color: #1c8aae !important;
text-decoration: none !important;
}
.bullet {
font-size: 8pt;
color: #666;
}
</style>
3. The placeholder where things will show up:
<body style="margin: 0;">
<div class="homepage">
<div class="searchEntry">
<input type="text" class="inputForm" id="searchBox" />
</div>
<div class="searchResults" id="searchResults">
<ul id="baraja-el" class="baraja-container">
</ul>
</div>
...
4. Call the API!
<script>
var $el = $( '#baraja-el' ),
baraja = $el.baraja();
baraja.add( searchResults ) );
baraja.fan( {
speed : 500,
easing : 'ease-out',
range : 100,
direction : 'right',
origin : { x : 50, y : 200 },
center : true
} );
</script>
The missing piece here is the call to the People Search API of IBM Connections to generate searchResults. I'll leave that as an exercise to the reader. Once I gathered all the data, I created a searchResult which would look like this (so that it matches the CSS I shared above):
<li><img class="photo" src="http://connections.demolotus.com/profiles/photo.do?userid=3123a1db-21f9-466f-b19e-1a49383fa2db" alt="image1"/><br/><br/><div><span class="fn">Bill Ranney</span> <span class="bullet">•</span> <span class="score">10</span></div><p>Sr. Business Manager</p><p>10 followers</p></li>In terms of the score, that was work that we did based on the work with Marie Wallace. Check out her blog for more details.