As I explained yesterday, I wanted to get a Pinterest-like layout for the activity stream within the portal, and that's what I showed yesterday. I then wanted to take that example and also add that to the landing page of a community. That way, as a community manager I can not only see the latest updates but I can also share and direct my team to the content I want them to see. Here's a snapshot of the community landing page I showed:
Notice that in this layout, the stream shows up in a multi-column view, and the profile photo is under each card (instead of inside the card as in yesterday's post).
The trick? Just some minor tweaks to the code from yesterday. I still used jQuery, the Waterfall plugin, and some CSS magic. Here's the code:
1. Include the right JavaScript:
<script src="jquery-1.9.1.min.js"></script>
<script src="waterfall-master/demos/js/libs/handlebars/handlebars.js"></script>
<script src="waterfall-master/demos/js/waterfall.min.js"></script>
<script src="jquery.timeago.js" type="text/javascript"></script>
2. The CSS magic
<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;
margin: auto;
width: 740px;
background-color: #f0f0f0;
}
.newsfeed {
margin: auto;
width: 740px;
background-color: #f0f0f0;
padding-top: 20px;
}
.columnHeader {
font-family: "HelveticaNeue-Bold", "Helvetica Neue Bold","Helvetica Neue", sans-serif;
font-weight: 600;
font-size: 90%;
}
a {
color: #1c8aae !important;
text-decoration: none !important;
}
.date {
color: #d9d9d9 !important;
text-decoration: none !important;
}
.timeago {
color: gray !important;
border-bottom: none !important;
}
.card {
border: 2px solid #FAFAFA;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
padding: 5px;
background-color: #fff;
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
opacity: 1;
width: 330px;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.leftColumn {
float: left;
}
.rightColumn {
float: left;
padding-top:29px;
padding-left: 10px;
}
.photo {
width: 65px;
height: 65px;
border-radius: 35px;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
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);
}
.attachment {
max-width: 290px;
max-height: 290px;
}
.signature {
font-size: 75%;
color: gray;
padding-top: 10px;
}
.div {
float:left;
padding-top: 10px;
}
.asentry {
width: 345px;
}
.sharkfin {
margin-top:-13px;
margin-left:25px;
}
.message {
padding: 20px 10px 20px 10px;
}
.attachDiv {
width: 299px;
height: 299px;
}
</style>
3. Create the HTML placeholder where the content will be rendered asynchronously
<body style="margin: 0;">
<div class="homepage">
<div class="newsfeed">
<div id="container" class="container"></div>
</div>
</div>
....
4. The template for how the activity stream will be rendered:
<!-- This controls how the Activity stream is rendered -->
<script type="text/x-handlebars-template" id="waterfall-tpl">
{{#list}}
<div class="asentry">
<div class="card">
<div class="message">
{{{title}}} {{#if object.summary}} "<i>{{{object.summary}}}</i>" {{/if}}
<br/>
{{#each object.attachments}}
<div class="attachDiv">
<img class="attachment" src="{{this.url}}" >
</div>
{{/each}}
</div>
</div>
<img class="sharkfin" src="sharkfin-2.png">
<div class="signature">
<div class="leftColumn">
<img class="photo" src="{{photoId actor}}" />
</div>
<div class="rightColumn">
<a class="date" href="{{object.url}}">
<abbr class="timeago" title="{{published}}">{{makeDatePretty published}}</abbr>
</a>
• <span class="action">Like ( {{object.likes.totalItems}} )</span> •
<span class="action">Comment ( {{object.replies.totalItems}} )</span>
</div>
</div>
</div>
{{/list}}
</script>
5. Call the Waterfall plug-in
<script>
// Now call the activity stream API and load the stream
$('#container').waterfall({
itemCls: 'asentry',
colWidth: 345,
gutterWidth: 20,
gutterHeight: 20,
maxPage: 1,
isAnimated: true,
maxCol: 2,
isFadeIn: true,
debug: false,
checkImagesLoaded: false,
path: function(page) {
return 'http://connections.demolotus.com/connections/opensocial/basic/rest/activitystreams/urn:lsid:lconn.ibm.com:communities.community:' + params.communityId + '/@all/@all?rollup=true&shortStrings=true&&format=json&page=' + page;
}
});
</script>
And there you have it! You can now render the IBM Connections activity stream in a grid format with resizable cards.
The big changes between yesterday's post and today are mostly in step 2 (the CSS required for the rendering), step 4 (the template for the rendering of each activity stream entry) and step 5 (we now call the community stream API instead of the overall activity stream API).
Fun !!