Basic tile view of past design challenges

Author: Nick Litwin

app/directives/challenge-tile/challenge-tile.directive.jade

@@ -53,14 +53,27 @@
 
       .winner-ribbon(ng-show="challenge.wonFirst")
 
-    .challenge-details
+    .challenge-details(ng-hide="challenge.track === 'DESIGN'")
       p.place(ng-class="{ 'first-place': challenge.wonFirst }") {{challenge.highestPlacement}}#[span {{challenge.highestPlacement | ordinal:true}}] Place
 
       .challenge-score
         p.score {{challenge.userDetails.submissionReviewScore/100 | percentage}}
 
         p Review Score
 
+    .challenge-details(ng-show="challenge.track === 'DESIGN'")
+      p.place(ng-class="{ 'first-place': challenge.wonFirst }") {{challenge.highestPlacement}}#[span {{challenge.highestPlacement | ordinal:true}}] Place
+
+      .thumbnail
+        img(ng-src="http://studio.{{DOMAIN}}/studio.jpg?module=DownloadSubmission&sbmid={{challenge.thumbnailId}}&sbt=thumb", fallback-src="/images/ico-picture.svg")
+
+        .thumbnail-gallery(ng-click="challenge.showLightbox()")
+          .gallery-icon
+
+          .num-images {{3}} images
+
+
+
 .challenge.list-view(ng-show="view=='list'", ng-class="challenge.track")
   .challenge-track
 

app/directives/challenge-tile/challenge-tile.directive.js

@@ -17,10 +17,16 @@
         activate();
 
         function activate() {
-          // console.log($scope.challenge.plain());
-          // if (challenge.track == 'DESIGN' && challenge.userDetails.submissions && challenge.userDetails.submissions.length > 0) {
-          //   challenge.thumbnailId = challenge.userDetails.submissions[0].id;
-          // }
+          // move to service helper, called from controller
+          if ($scope.challenge.track == 'DESIGN' && $scope.challenge.userDetails.submissions && $scope.challenge.userDetails.submissions.length > 0) {
+            $scope.challenge.thumbnailId = $scope.challenge.userDetails.submissions[0].id;
+
+            $scope.challenge.highestPlacement = _.max($scope.challenge.userDetails.submissions, 'placement').placement;
+
+            if ($scope.challenge.highestPlacement == 1) {
+              $scope.challenge.wonFirst = true;
+            }
+          }
         }
       }]
     };

assets/css/directives/challenge-tile.scss

@@ -270,6 +270,7 @@ challenge-tile .challenge.tile-view {
         @include sofia-pro-regular;
         font-size: 20px;
         color: $gray-darkest;
+        text-transform: uppercase;
 
         &.first-place {
           font-weight: bold;
@@ -278,6 +279,7 @@ challenge-tile .challenge.tile-view {
 
         span {
           @include superscript;
+          text-transform: lowercase;
         }
       }
 
@@ -305,6 +307,46 @@ challenge-tile .challenge.tile-view {
           text-transform: uppercase;
         }
       }
+
+      .thumbnail {
+        position: relative;
+        width: 268px;
+        height: 200px;
+        overflow: hidden;
+
+        img {
+          width: 100%;
+          height: auto;
+          overflow: hidden;
+        }
+
+        .thumbnail-gallery {
+          position: absolute;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          width: 270px;
+          height: 32px;
+          bottom: 0;
+          left: 0;
+          background-color: rgba(0, 0, 0, 0.4);
+          cursor: pointer;
+
+          .gallery-icon {
+            margin-left: 10px;
+            @include background-image-size(21px, 17px);
+            background: url(/images/ico-gallery.svg);
+          }
+
+          .num-images {
+            margin-left: 8px;
+            @include sofia-pro-regular;
+            font-size: 10px;
+            color: $gray-lighter;
+            text-transform: uppercase;
+          }
+        }
+      }
     }
   }