Created Packery and Draggabilly directives.

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

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

@@ -0,0 +1,16 @@
+module.exports = function angularDraggabillyDirective(DraggabillyService) {
+  return {
+    restrict: 'AE',
+    link: function (scope, element, attrs) {
+      var parsedAttrs = $parse(attrs.angularDraggabilly)()
+      if (typeof parsedAttrs !== 'object') {
+        parsedAttrs = {}
+      }
+
+      var options = angular.extend({
+      }, parsedAttrs)
+
+      var draggie = new DraggabillyService(element[0], options)
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+describe('angularDraggabilly', function () {
+
+  beforeEach(module('stf.angular-draggabilly'));
+
+  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-draggabilly name="name">hi</div>')(scope);
+     expect(element.text()).toBe('hello, world');
+     */
+
+  });
+});

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

@@ -0,0 +1,9 @@
+var draggabilly = require('draggabilly')
+
+module.exports = angular.module('stf.angular-draggabilly', [
+
+])
+  .factory('DraggabillyService', function () {
+    return draggabilly
+  })
+  .directive('angularDraggabilly', require('./angular-draggabilly-directive'))