Skip to content

Commit

Permalink
Merge pull request #6 from espncreativeworks/feature-project-card
Browse files Browse the repository at this point in the history
Re-implement cards without packery; revisit when ng-packery supports auto-reloading packery elements SunGard-Labs/angular-packery#10
montmanu committed Mar 18, 2015
2 parents cb46a57 + 04efb67 commit 94c6dd3
Showing 8 changed files with 52 additions and 32 deletions.
1 change: 0 additions & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -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": {
1 change: 0 additions & 1 deletion client/app/app.js
Original file line number Diff line number Diff line change
@@ -9,7 +9,6 @@ angular.module('espnCreativeworksShowcaseApp', [
'ui.bootstrap',
'cloudinary',
'angular-momentjs',
'angular-packery',
'ngUnderscore'
])
.constant('jQuery', window.jQuery)
1 change: 1 addition & 0 deletions client/app/app.scss
Original file line number Diff line number Diff line change
@@ -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";

41 changes: 32 additions & 9 deletions client/app/projects/card/projects.card.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
2 changes: 0 additions & 2 deletions client/app/projects/list/projects.list.controller.js
Original file line number Diff line number Diff line change
@@ -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);
21 changes: 18 additions & 3 deletions client/app/projects/list/projects.list.html
Original file line number Diff line number Diff line change
@@ -11,9 +11,24 @@ <h1 class="espn-title">Work</h1>
</div>
<div class="projects project-list-search 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>
15 changes: 0 additions & 15 deletions client/index.html
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion server/config/environment/development.js
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@ module.exports = {
},

cms: {
uri: 'https://showcase-cms-stg.herokuapp.com/api'
uri: process.env.CMS_URI || 'http://localhost:3000/api'
},

seedDB: true

0 comments on commit 94c6dd3

Please sign in to comment.