JSFiddle - React, Tailwind, and code Playground

by Pete Fecteau

HTML

<script src="http://buttonpresser.com/CivicIdeas_BS/js/smartfeed.js"></script>
<div id="smart-feed"></div>
<div class="smart-feed-controls">
    <div class="smart-feed-play" style="display:none;"></div>
    <div class="smart-feed-stop"></div>
</div>

CSS

ul {list-style:none;margin:0;padding:0;position:relative;top:0;}
ul li {line-height:120%;margin:10px 0;}
ul li:first-child {margin-top:0;}
ul li a {color:#666;text-decoration:none;}
ul li a:before {
    display:block;
    float:left;
    content:"";
    height:0;
    width:0;
    border:5px solid transparent;
    border-left-color:#999;
    margin:3px 5px 0 0;
}
ul li a:hover {color:#000;text-decoration:underline;}

.smart-feed {
    width:220px;
    height:135px;
    overflow-x:hidden;
    overflow-y:scroll;
}
.smart-feed-controls {
    width:220px;
    height:20px;
}
.smart-feed-stop {
    height:10px;
    width:10px;
    margin-top:5px;
    background-color:#999;
    float:right;
    cursor:pointer;
}
.smart-feed-play {
    position:relative;
    top:3px;
    left:7px;
    content:"";
    height:0;
    width:0;
    border:7px solid transparent;
    border-left-color:#999;
    float:right;
    cursor:pointer;
}
.smart-feed-stop:hover {background-color:#666}
.smart-feed-play:hover {border-left-color:#666}
.smart-feed ul li.shrink

JavaScript

var feedRefresh = setInterval(runFeed, 6000);
function runFeed() {
  var feedList = $('#smart-feed ul');
  var feedListItem = $('#smart-feed ul li');
  var feedListLastItem = feedListItem[feedListItem.length-1];
  var lastItemHeight = (-Math.abs($(feedListLastItem).height())-10);
  $(feedListLastItem).addClass("shrink");
  $(feedList).prepend(feedListLastItem);
  $('.shrink').css('marginTop', lastItemHeight);
  $('.shrink').animate({
    marginTop: 0,
    marginBottom: 10
  }, 1000, function() {
      $('.shrink').removeClass('shrink');
            $('.shrink').css('marginTop', 0, 'margin')
  });
}

$('.smart-feed-stop').on('click', function() {
    clearInterval(feedRefresh);
    $(this).hide();
    $('.smart-feed-play').show();
});

$('.smart-feed-play').on('click', function() {
    setInterval(runFeed, 4000);
    $(this).hide();
    $('.smart-feed-stop').show();
});

$.getJSON('http://buttonpresser.com/CivicIdeas_BS/js/json/activity-feed.json', function(data) {
  var items = [];
  $.each(data.activity.item, function(index, val) {
        items.push('<li><a href="' + val.user.url + '">' + val.user.name + '</a> ' + val.type + 'ed a ' + val.id + ' on <a href="' + val.url +	'">' + val.parent + '</a></li>');
  });
  $('<ul/>', {
    html: items.join('')
  }).appendTo('#smart-feed');
});