Merge pull request #5 from espncreativeworks/projects-detail-footer

Adding Projects detail footer

client/app/projects/detail/projects.detail.controller.js

@@ -13,15 +13,17 @@ angular.module('espnCreativeworksShowcaseApp')
     };
 
     $scope.project = Project.get({ id: $stateParams.id });
-
+    
     $scope.project.$promise.then(function (project){
       Page.meta.title = project.meta.title || (project.title + ' Project Details');
       Page.meta.description = project.meta.description || fullDescriptionFilter(project.description, { plaintext: true });
       $scope.project.hero.file.transformedUrl = $.cloudinary.url($scope.project.hero.file.public_id, { secure: true, transformation: 'project_detail_hero' });
-      $scope.project.$executions = Project.executions({ id: project._id });
+
+      $scope.project.$executions = Project.executions({ id: project._id }); 
       return $scope.project.$executions.$promise;
+
     }).then(function (executions){
-      $scope.project.$tags = []; 
+      $scope.project.$tags = [];
 
       angular.forEach(executions, function (execution){
         angular.forEach(execution.tags, function (tag){
@@ -34,9 +36,20 @@ angular.module('espnCreativeworksShowcaseApp')
 
         angular.forEach(execution.videos, function (video){
           video.embed.trustedHtml = $sce.trustAsHtml(video.embed.html)
-        });
-
+        });   
       });
+
+      $scope.project.$related = $scope.project.related;
+      return $scope.project.$related.$promise;
+
+    }).then(function(){
+    	$scope.project.$related = [];
+
+    	for(var i = 0; i < $scope.project.related.length; i++){
+    	   $scope.project.$rel = Project.get({ id: $scope.project.related[i] });
+    	   $scope.project.$related.push($scope.project.$rel);
+    	}
+
     });
 
   }]);

client/app/projects/detail/projects.detail.html

@@ -68,4 +68,52 @@ <h4 class="video-title espn-title"><a class="video-detail-link" ui-sref="videos.
       </div>
     </div>
   </div>
+  <div class="footer">
+  	<div class="container">
+  		<div class="row">
+  			<div class="col-xs-3 footer-tags">
+  				<div class="row title">
+  					<div class="col-xs-12 text-center">Tags</div>
+  				</div>
+  				<div class="row tags">
+  					<ul class="col-xs-12 active-filter-tag-list list-unstyled list-inline">
+  					  <!-- platform filter tags -->
+  					  <li class="active-filter-tag-container" ng-repeat="tag in project.$tags">
+  					    <tag text="tag.name"></tag>
+  					  </li>
+  					</ul>  				
+  				</div>
+  			</div>
+  			<div class="col-xs-6 related-projects">
+  				<div class="row title">
+  					<div class="col-xs-12 text-center">Related Projects</div>
+  				</div>
+  				<div class="row project">
+  					<div class="col-xs-6" ng-repeat="project in project.$related">
+	  					<div class="image">
+	  					  <a 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>
+	  					  </a>
+	  					</div>
+	 						<div class="card-body">
+	 						  <h4 class="card-header">{{project.tagline}}</h4>
+  						  <p class="card-desc">{{project.title}}</p>	
+  						</div>
+	  				</div>
+   				</div>
+  			</div>
+  			<div class="col-xs-3 footer-view-all">
+  				<div class="row title">
+  					<div class="col-xs-12 text-center">View All Projects</div>
+  					<div class="col-xs-12 center-block icon">
+  						<a ui-sref="projects.list">
+  							<img class="center-block" src="assets/images/icon_view_all_projects.png" />
+  						</a>
+  					</div>
+  				</div>
+  			</div>
+  		</div>
+  	</div>
+  </div>
 </div>

client/app/projects/detail/projects.detail.scss

@@ -86,6 +86,58 @@ body.project-detail {
     font-style: italic;
     font-weight: 300;
   }
+
+  .footer {
+  	background-color: #fff;
+  	color: #000;
+  	padding: 20px 0px;
+
+  	.title {
+  		text-transform: uppercase;
+  		font-size: 11px;
+  		font-weight: bold;
+  	}
+
+  	.footer-tags {
+  		.tags {
+  			padding-top: 20px;
+  		}
+  		.tag-text {
+  			font-style: italic;
+  		}
+  	}
+  	.related-projects {
+  		border-left: 1px solid rgb(0, 0, 0);
+  		border-left: 1px solid rgba(0, 0, 0, 0.3);
+  		border-right: 1px solid rgb(0, 0, 0);
+  		border-right: 1px solid rgba(0, 0, 0, 0.3);
+
+  		.project {
+  			padding: 20px 20px 0 20px;
+  		}
+  	}
+  	.footer-view-all {
+  		.icon {
+  			padding-top: 20px;
+  		}
+  		img {
+  			height: 35px;
+  		}
+  	}
+
+  	.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;
+  		font-style: italic;
+  		font-size: 12px;
+  	}
+  }
 }
 
 @media (min-width: $screen-md-min){

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

@@ -96,6 +96,9 @@ angular.module('espnCreativeworksShowcaseApp')
         if ($scope.filters.active[key] && project[key]){
           var filterIds = _.map($scope.filters.active[key], function (item){ return item._id; })
             , projectKeyIds = _.map(project[key], function (item){ return item._id; });
+
+          console.log("filterIds: " + filterIds);
+          console.log("projectKeyIds: " + projectKeyIds);
 
           // check each project keyId against those in the filter
           // if found, set result to true

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

@@ -9,7 +9,7 @@ <h1 class="espn-title">Work</h1>
   </div>
   <scroll-down></scroll-down>
 </div>
-<div class="projects section">
+<div class="projects project-list-search section">
   <ng-include src="'app/projects/filter/projects.filter.html'"></ng-include>
   <div class="container">
     <div class="row">