remove packery; update project list, cards

bower.json

@@ -22,7 +22,6 @@
     "moment-timezone": "~0.3.0",
     "angular-momentjs": "~0.1.9",
     "animate.css": "~3.2.3",
-    "angular-packery": "~1.0.3",
     "ng-underscore": "~0.1.0"
   },
   "devDependencies": {

client/app/app.js

@@ -9,7 +9,6 @@ angular.module('espnCreativeworksShowcaseApp', [
   'ui.bootstrap',
   'cloudinary',
   'angular-momentjs',
-  'angular-packery',
   'ngUnderscore'
 ])
   .constant('jQuery', window.jQuery)

client/app/app.scss

@@ -5,6 +5,7 @@ $fa-font-path: "/bower_components/font-awesome/fonts";
 $espn-red: #f14237;
 $espn-light: #fff;
 $espn-dark: #000000;
+$espn-neutral: #b7b7b7;
 $espn-font-family-sans-serif: "proxima-nova";
 $espn-font-family-headings: "octin-college";
 

client/app/projects/card/projects.card.scss

@@ -1,21 +1,44 @@
-.packery-sizer, .packery-object{
-	width: 100%;
-  max-width: 467px;
-  height: auto; 
+.project-card-container {
+	$card-min-height: 300px;
+	$card-image-min-height: 208px;
+
+	min-height: $card-min-height;
   padding: 10px;
-}
+
+	.card {
+		width: 100%;
+		margin: 0 auto;
+	}
+
+	.card-image-link {
+		display: block;
+		width: 100%;
+		min-height: $card-image-min-height;
+	}
+
+	.card-image.fallback .card-image-link {
+		line-height: $card-image-min-height;
+		background-color: darken($espn-light, 15%);
+		background-image: url($image-path + 'bg_project_execution.png');
+		background-size: 32px 32px;
+	}
 
-.card {
 	.card-header {
 		font-family: $espn-font-family-headings;
-		color: #000;
 		text-transform: uppercase;
 		margin: 5px 0 0 0 !important;
 	}	
+
 	.card-desc {
-		font-family: $font-family-sans-serif;
-		color: #b7b7b7;
+		color: $espn-neutral;
 		font-style: italic;
 		font-size: 12px;
+		margin-bottom: 0;
+	}
+}
+
+@media (min-width: $screen-sm-min){
+	.project-card-container .card {
+		max-width: 467px;
 	}
 }

client/app/projects/list/projects.list.controller.js

@@ -11,8 +11,6 @@ angular.module('espnCreativeworksShowcaseApp')
 
     $scope.$watch('filteredProjects', function (newProjects, oldProjects){
       if ($scope.projects.$resolved && angular.isDefined(newProjects) && angular.isDefined(oldProjects) && !_.isEqual(newProjects, oldProjects) ){
-        console.log('New Projects', newProjects);
-        console.log('New Old Projects', newProjects);
         $scope.$broadcast('projects:filtered', newProjects);  
       }
     }, true);

client/app/projects/list/projects.list.html

@@ -11,9 +11,24 @@ <h1 class="espn-title">Work</h1>
 </div>
 <div class="projects section">
   <ng-include src="'app/projects/filter/projects.filter.html'"></ng-include>
-  <div class="container">
+  <div class="container gutterless">
     <div class="row">
-      <packery class="col-xs-12" item-selector=".card">
+      <div class="project-card-container col-xs-12 col-sm-6 col-md-4" ng-class="{ featured: project.isFeatured }" ng-repeat="project in projects | filter:platformsFilter | filter:sportsFilter | filter:industriesFilter | filter:tagsFilter | filter:filters.term | as:this:'filteredProjects'">
+        <div class="card">
+          <div class="card-image text-center" ng-class="{ fallback: !project.hero.file.public_id }">
+            <a class="card-image-link" ui-sref="projects.detail({ id: project.slug })" title="{{project.tagline}}">
+              <cl-image public-id="{{project.hero.file.public_id}}" class="img-responsive center-block">
+              </cl-image ng-if="project.hero.file.public_id">
+              <i class="fa fa-picture-o fa-4x" ng-if="!project.hero.file.public_id"></i>
+            </a>
+          </div>
+          <div class="card-body">
+            <h4 class="card-header">{{project.tagline}}</h4>
+            <p class="card-desc">{{project.title}}</p>
+          </div>
+        </div>
+      </div>
+<!--       <packery class="col-xs-12" item-selector=".card">
       	<packery-object class="card" ng-repeat="project in projects | filter:platformsFilter | filter:sportsFilter | filter:industriesFilter | filter:tagsFilter | filter:filters.term | as:this:'filteredProjects'">
       	    <div class="image">
       	      <a ui-sref="projects.detail({ id: project.slug })" title="{{project.tagline}}">
@@ -26,7 +41,7 @@ <h4 class="card-header">{{project.tagline}}</h4>
       	      <p class="card-desc">{{project.title}}</p>
       	    </div>
       	</packery-object>
-      </packery>
+      </packery> -->
     </div>
   </div>  
 </div>

client/index.html

@@ -87,21 +87,6 @@
       <script src="bower_components/moment/moment.js"></script>
       <script src="bower_components/moment-timezone/builds/moment-timezone-with-data-2010-2020.js"></script>
       <script src="bower_components/angular-momentjs/angular-momentjs.js"></script>
-      <script src="bower_components/classie/classie.js"></script>
-      <script src="bower_components/get-style-property/get-style-property.js"></script>
-      <script src="bower_components/get-size/get-size.js"></script>
-      <script src="bower_components/eventie/eventie.js"></script>
-      <script src="bower_components/doc-ready/doc-ready.js"></script>
-      <script src="bower_components/eventEmitter/EventEmitter.js"></script>
-      <script src="bower_components/matches-selector/matches-selector.js"></script>
-      <script src="bower_components/outlayer/item.js"></script>
-      <script src="bower_components/outlayer/outlayer.js"></script>
-      <script src="bower_components/packery/js/rect.js"></script>
-      <script src="bower_components/packery/js/packer.js"></script>
-      <script src="bower_components/packery/js/item.js"></script>
-      <script src="bower_components/packery/js/packery.js"></script>
-      <script src="bower_components/draggabilly/draggabilly.js"></script>
-      <script src="bower_components/angular-packery/dist/packery.js"></script>
       <script src="bower_components/ng-underscore/build/ng-underscore.js"></script>
       <!-- endbower -->
       <script src="socket.io-client/socket.io.js"></script>