Created Packery and Draggabilly directives.

Applied the Packery directive to Info layout based on media queries.

res/app/components/stf/angular-packery/angular-packery-directive.js

@@ -0,0 +1,61 @@
+var _ = require('lodash')
+
+module.exports = function angularPackeryDirective(PackeryService, DraggabillyService, $timeout, $parse) {
+  return {
+    restrict: 'AE',
+    link: function (scope, element, attrs) {
+      var container = element[0]
+      var pckry
+      var parsedAttrs = $parse(attrs.angularPackery)()
+      if (typeof parsedAttrs !== 'object') {
+        parsedAttrs = {}
+      }
+
+      var options = angular.extend({
+        itemSelector: '.packery-item',
+        columnWidth: '.packery-item',
+        transitionDuration: '300ms'
+      }, parsedAttrs)
+
+      $timeout(function () {
+        pckry = new PackeryService(container, options)
+        pckry.on('layoutComplete', onLayoutComplete)
+        pckry.layout()
+        pckry.bindResize()
+        bindDraggable()
+      }, 50)
+
+      function bindDraggable() {
+        if (options.draggable) {
+          var draggableOptions = {}
+          if (options.draggableHandle) {
+            draggableOptions.handle = options.draggableHandle
+          }
+          var itemElems = pckry.getItemElements()
+          for (var i = 0, len = itemElems.length; i < len; ++i) {
+            var elem = itemElems[i]
+            var draggie = new DraggabillyService(elem, draggableOptions)
+            pckry.bindDraggabillyEvents(draggie)
+          }
+        }
+      }
+
+      function onLayoutComplete() {
+        return true
+      }
+
+      function onPanelsResized() {
+        pckry.layout()
+      }
+
+      scope.$on('panelsResized', _.throttle(onPanelsResized, 300))
+
+      scope.$on('$destroy', function () {
+        if (pckry) {
+          pckry.unbindResize()
+          pckry.off('layoutComplete', onLayoutComplete)
+        }
+      })
+    }
+  }
+}

res/app/components/stf/angular-packery/angular-packery-spec.js

@@ -0,0 +1,23 @@
+describe('angularPackery', function () {
+
+  beforeEach(module('stf.angular-packery'));
+
+  var scope, compile;
+
+  beforeEach(inject(function ($rootScope, $compile) {
+    scope = $rootScope.$new();
+    compile = $compile;
+  }));
+
+  it('should ...', function () {
+
+    /* 
+     To test your directive, you need to create some html that would use your directive,
+     send that through compile() then compare the results.
+
+     var element = compile('<div angular-packery name="name">hi</div>')(scope);
+     expect(element.text()).toBe('hello, world');
+     */
+
+  });
+});

res/app/components/stf/angular-packery/angular-packery.css

@@ -0,0 +1,36 @@
+/*
+  Screen Breakpoints:
+
+  screen-xs: 480px
+  screen-sm: 768px
+  screen-md: 992px
+  screen-lg: 1200px
+  screen-xl: 1500px
+*/
+
+div[angular-packery] {
+  overflow-y: hidden;
+  overflow-x: hidden;
+}
+
+.col-md-4-x.packery-item {
+  width: 33.33333333333333%;
+}
+
+@media screen and (min-width: 1500px) {
+  .col-md-4-x.packery-item {
+    width: 25%;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .col-md-4-x.packery-item {
+    width: 50%;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .col-md-4-x.packery-item {
+    width: 100%;
+  }
+}

res/app/components/stf/angular-packery/index.js

@@ -0,0 +1,14 @@
+require('./angular-packery.css')
+
+require('packery/js/rect.js')
+require('packery/js/packer.js')
+require('packery/js/item.js')
+var packery = require('packery/js/packery.js')
+
+module.exports = angular.module('stf.angular-packery', [
+  require('stf/angular-draggabilly').name
+])
+  .factory('PackeryService', function () {
+    return packery
+  })
+  .directive('angularPackery', require('./angular-packery-directive'))