diff --git a/app/directives/challenge-tile/challenge-tile.directive.js b/app/directives/challenge-tile/challenge-tile.directive.js
index 02a4f3bd3..90053a5b9 100644
--- a/app/directives/challenge-tile/challenge-tile.directive.js
+++ b/app/directives/challenge-tile/challenge-tile.directive.js
@@ -23,6 +23,11 @@
if ($scope.challenge.status.trim().toUpperCase() === 'PAST' && $scope.challenge.subTrack === 'MARATHON_MATCH') {
ChallengeService.processPastMarathonMatch($scope.challenge);
}
+
+ if ($scope.challenge.status.trim().toUpperCase() === 'COMPLETED' && $scope.challenge.track === 'DESIGN') {
+ ChallengeService.formatPastDesignChallenge($scope.challenge);
+ console.log($scope.challenge.plain());
+ }
}
function openLightbox() {
diff --git a/app/directives/challenge-user-place/challenge-user-place.directive.js b/app/directives/challenge-user-place/challenge-user-place.directive.js
index 4cf4d3592..bfd886a2d 100644
--- a/app/directives/challenge-user-place/challenge-user-place.directive.js
+++ b/app/directives/challenge-user-place/challenge-user-place.directive.js
@@ -33,15 +33,21 @@
challenge: '=',
view: '='
},
- controller: ['$scope', 'CONSTANTS', '$attrs', 'ChallengeService',
- function($scope, CONSTANTS, $attrs, ChallengeService) {
+ controller: ['$scope', 'CONSTANTS', '$attrs', 'ChallengeService', 'ngDialog',
+ function($scope, CONSTANTS, $attrs, ChallengeService, ngDialog) {
$scope.DOMAIN = CONSTANTS.domain;
+ $scope.openLightbox = openLightbox;
+ $scope.updateSelected = updateSelected;
+ $scope.incrementIndex = incrementIndex;
activate();
function activate() {
- if ($scope.challenge.userDetails.submissions && $scope.challenge.userDetails.submissions.length > 0) {
+ if (!$scope.challenge.isPrivate && $scope.challenge.userDetails.submissions && $scope.challenge.userDetails.submissions.length > 0) {
+ $scope.selectedIndex = 0;
$scope.challenge.thumbnailId = $scope.challenge.userDetails.submissions[0].id;
+ $scope.imageURL = $scope.challenge.userDetails.submissions[0].fullImage;
+ $scope.selectedImage = $scope.imageURL;
$scope.challenge.highestPlacement = _.max($scope.challenge.userDetails.submissions, 'placement').placement;
@@ -50,6 +56,27 @@
}
}
}
+
+ function updateSelected(newImage, index) {
+ $scope.selectedImage = newImage;
+ $scope.selectedIndex = index;
+ }
+
+ function incrementIndex(x) {
+ $scope.selectedIndex += x;
+ if ($scope.selectedIndex < 0) $scope.selectedIndex = $scope.challenge.userDetails.submissions.length - 1;
+ if ($scope.selectedIndex == $scope.challenge.userDetails.submissions.length) $scope.selectedIndex = 0;
+ $scope.selectedImage = $scope.challenge.userDetails.submissions[$scope.selectedIndex].fullImage;
+ }
+
+ function openLightbox() {
+ ngDialog.open({
+ template: 'directives/challenge-user-place/design-lightbox/design-lightbox.html',
+ className: 'design-lightbox',
+ scope: $scope
+ });
+ }
+
}]
};
}
diff --git a/app/directives/challenge-user-place/design-challenge-user-place.directive.jade b/app/directives/challenge-user-place/design-challenge-user-place.directive.jade
index 91b40956a..59425d384 100644
--- a/app/directives/challenge-user-place/design-challenge-user-place.directive.jade
+++ b/app/directives/challenge-user-place/design-challenge-user-place.directive.jade
@@ -4,9 +4,9 @@
p.place(ng-show="challenge.userStatus === 'PASSED_SCREENING'") Passed Screening
.thumbnail(ng-click="openLightbox()", ng-class="{hidden: challenge.userStatus !== 'PASSED_REVIEW'}")
- img(ng-src="http://studio.{{DOMAIN}}/studio.jpg?module=DownloadSubmission&sbmid={{challenge.thumbnailId}}&sbt=full", fallback-src="/images/ico-picture.svg")
+ img(ng-src="{{imageURL}}", fallback-src="/images/ico-picture.svg")
- .thumbnail-gallery(ng-click="challenge.showLightbox()")
+ .thumbnail-gallery(ng-click="openLightbox()")
.gallery-icon
.num-images 1 image
@@ -26,4 +26,4 @@
.thumbnail-gallery(ng-click="challenge.showLightbox()")
.gallery-icon
- .num-images 1 image
\ No newline at end of file
+ .num-images 1 image
diff --git a/app/directives/challenge-user-place/design-lightbox/design-lightbox.jade b/app/directives/challenge-user-place/design-lightbox/design-lightbox.jade
new file mode 100644
index 000000000..d0d578c82
--- /dev/null
+++ b/app/directives/challenge-user-place/design-lightbox/design-lightbox.jade
@@ -0,0 +1,26 @@
+.lightbox-container
+ .left-nav
+ img(src="/images/ico-arrow-big-left.svg", ng-click="incrementIndex(-1)")
+
+ .selector
+ .title {{challenge.name}}
+
+
+ img(ng-src="{{selectedImage}}")
+
+
+ .info
+ | {{selectedIndex + 1}} of {{challenge.userDetails.submissions.length}}
+
+ .selections
+ img.selection(
+ ng-repeat="submission in challenge.userDetails.submissions",
+ ng-src="{{submission.fullImage}}",
+ ng-click="updateSelected(submission.fullImage, $index)",
+ ng-class="{'current': submission.fullImage == selectedImage}"
+ )
+
+ .right-nav
+ img(src="/images/ico-arrow-big-right.svg", ng-click="incrementIndex(1)")
+
+// img(ng-src="http://studio.{{DOMAIN}}/studio.jpg?module=DownloadSubmission&sbmid={{challenge.thumbnailId}}&sbt=full", fallback-src="/images/ico-picture.svg")
diff --git a/app/services/challenge.service.js b/app/services/challenge.service.js
index 096c2e670..3e2e194b1 100644
--- a/app/services/challenge.service.js
+++ b/app/services/challenge.service.js
@@ -11,6 +11,7 @@
var service = {
getChallenges: getChallenges,
getUserChallenges: getUserChallenges,
+ formatPastDesignChallenge: formatPastDesignChallenge,
getUserMarathonMatches: getUserMarathonMatches,
getReviewEndDate: getReviewEndDate,
getChallengeDetails: getChallengeDetails,
@@ -31,6 +32,18 @@
return api.one('members', handle.toLowerCase()).all('challenges').getList(params);
}
+ function formatPastDesignChallenge(challenge) {
+ if (!challenge.isPrivate && challenge.userDetails && challenge.userDetails.submissions && challenge.userDetails.submissions.length) {
+ challenge.userDetails.submissions.forEach(function(submission) {
+ var images = submission.images.filter(function(image) {
+ return image.match('full') || image.match('thumb');
+ });
+ submission.fullImage = images[0];
+ submission.thumbnailImage = images[1];
+ });
+ }
+ }
+
function getUserMarathonMatches(handle, params) {
return api.one('members', handle.toLowerCase()).all('mms').getList(params);
}
diff --git a/assets/css/directives/design-lightbox.scss b/assets/css/directives/design-lightbox.scss
index 3df1b79b2..a05224873 100644
--- a/assets/css/directives/design-lightbox.scss
+++ b/assets/css/directives/design-lightbox.scss
@@ -1,10 +1,76 @@
.lightbox-container {
+ font-family: 'Sofia Pro';
display: flex;
width: 100%;
margin: auto;
overflow: hidden;
+ flex-direction: row;
- img {
- margin: 0 auto;
+ .left-nav, .right-nav {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 80px;
+ img {
+ width: 20px;
+ &:hover {
+ cursor: pointer;
+ }
+ }
+ }
+
+
+ .selector {
+
+ .title {
+ font-size: 24px;
+ margin: 30px auto;
+ text-align: center;
+ }
+
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+
+ img {
+ height: 550px;
+ }
+
+ .info {
+ color: #a3a3ae;
+ text-align: right;
+ }
+
+ .selections {
+ img.selection {
+ height: 60px;
+ opacity: .6;
+ &.current {
+ border: solid 2px #0096ff;
+ height: 62px;
+ opacity: 1;
+ }
+ &:hover {
+ cursor: pointer;
+ opacity: 1;
+ }
+ }
+ }
+ }
+
+
+}
+
+.design-lightbox {
+ display: flex;
+ justify-content: center;
+ z-index: 10000;
+ .ngdialog-content {
+ .ngdialog-close { display: none; }
+ opacity: .95;
+ height: 742px;
+ width: 768px;
+ align-self: center;
}
}