SUP-2412, [Usersnap] For all contests, almost all of the types at the top are truncated.

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

@@ -7,30 +7,30 @@
       p.subtrack-color {{challenge.subTrack | underscoreStrip}}
 
       challenge-links(challenge="challenge", view="'tile'")
+    .challenge-card__bottom.challenge-card__bottom--active
+      .challenge-details
+        p.currentPhase {{challenge.userCurrentPhase}}
 
-    .challenge-details
-      p.currentPhase {{challenge.userCurrentPhase}}
+        .challenge-calendar(ng-show="challenge.userCurrentPhaseEndTime")
+          p.ends-in Ends In
+          p.time-remaining {{challenge.userCurrentPhaseEndTime[0]}}
+          p.unit-of-time {{challenge.userCurrentPhaseEndTime[1]}}
 
-      .challenge-calendar(ng-show="challenge.userCurrentPhaseEndTime")
-        p.ends-in Ends In
-        p.time-remaining {{challenge.userCurrentPhaseEndTime[0]}}
-        p.unit-of-time {{challenge.userCurrentPhaseEndTime[1]}}
+        .stalled-challenge(ng-hide="challenge.userCurrentPhaseEndTime") This challenge is currently paused.
 
-      .stalled-challenge(ng-hide="challenge.userCurrentPhaseEndTime") This challenge is currently paused.
+        .phase-action(ng-show="challenge.userAction", ng-switch="challenge.userAction")
+          a.tc-btn.tc-btn-s.tc-btn-wide.tc-btn-ghost.submit(ng-switch-when="Submit", ng-href="{{challenge|challengeLinks:'detail'}}") Submit
 
-      .phase-action(ng-switch="challenge.userAction")
-        a.tc-btn.tc-btn-s.tc-btn-wide.tc-btn-ghost.submit(ng-switch-when="Submit", ng-href="{{challenge|challengeLinks:'detail'}}") Submit
+          .submitted(ng-switch-when="Submitted") Submitted
 
-        .submitted(ng-switch-when="Submitted") Submitted
+          // TODO: Need styling and JS logic for this one
+          .registered(ng-switch-when="Registered") Registered
 
-        // TODO: Need styling and JS logic for this one
-        .registered(ng-switch-when="Registered") Registered
-
-    // Only show if not data science track
-    p.roles 
-      span(ng-hide="challenge.track === 'DATA_SCIENCE'") 
-        span Role:  
-        span {{challenge.userDetails.roles | listRoles}}
+      // Only show if not data science track
+      p.roles 
+        span(ng-hide="challenge.track === 'DATA_SCIENCE'") 
+          span Role:  
+          span {{challenge.userDetails.roles | listRoles}}
 
   .completed-challenge(
     ng-show="challenge.status === 'COMPLETED' || challenge.status === 'PAST'",
@@ -45,25 +45,26 @@
 
       .winner-ribbon(ng-show="challenge.wonFirst")
 
-    .challenge-details(ng-switch-when="DATA_SCIENCE", ng-switch="challenge.subTrack", ng-class="challenge.track")
+    .challenge-card__bottom.challenge-card__bottom--completed
+      .challenge-details(ng-switch-when="DATA_SCIENCE", ng-switch="challenge.subTrack", ng-class="challenge.track")
 
-      div
-        .marathon-score
-          p.score {{challenge.pointTotal || 0 }}
+        div
+          .marathon-score
+            p.score {{challenge.pointTotal || 0 }}
 
-          p Total Points
+            p Total Points
 
-    .challenge-details(ng-switch-when="DEVELOP")
-      dev-challenge-user-place(challenge="challenge", view="view")
+      .challenge-details(ng-switch-when="DEVELOP")
+        dev-challenge-user-place(challenge="challenge", view="view")
 
-    .challenge-details(ng-switch-when="DESIGN")
-      design-challenge-user-place(challenge="challenge", view="view")
+      .challenge-details(ng-switch-when="DESIGN")
+        design-challenge-user-place(challenge="challenge", view="view")
 
-    // Only show if not data science track
-    p.roles
-      span(ng-hide="challenge.track === 'DATA_SCIENCE'") 
-        span Role:  
-        span {{challenge.userDetails.roles | listRoles}}
+      // Only show if not data science track
+      p.roles
+        span(ng-hide="challenge.track === 'DATA_SCIENCE'") 
+          span Role:  
+          span {{challenge.userDetails.roles | listRoles}}
 
 .challenge.list-view(ng-show="view=='list'", ng-class="challenge.track")
   .active-challenge(ng-show="challenge.status === 'ACTIVE'")

app/directives/challenge-user-place/design-challenge-user-place.directive.jade

@@ -4,7 +4,7 @@
   p.place.passed(ng-show="challenge.userStatus === 'PASSED_SCREENING'") Passed Screening
   p.place.completed(ng-show="challenge.userStatus === 'COMPLETED'") COMPLETED
 
-  .thumbnail(ng-click="!challenge.isPrivate && imageURL && openLightbox()", ng-hide="challenge.userStatus !== 'PASSED_REVIEW'")
+  .thumbnail(ng-click="!challenge.isPrivate && imageURL && openLightbox()", ng-class="{hidden: challenge.userStatus !== 'PASSED_REVIEW'}")
     img(ng-show="!challenge.isPrivate", ng-src="{{imageURL || '/images/card-bg-no-image.svg'}}", fallback-src="/images/card-bg-no-image.svg")
     img(ng-show="challenge.isPrivate", src="/images/card-bg-private-project.svg")
 

assets/css/directives/challenge-tile.scss

@@ -37,17 +37,26 @@ challenge-tile .challenge.tile-view {
     }
   }
 
+  .challenge-card__bottom {
+    width: 268px;/* 2px adjustment for 2 1px borders */
+    flex: 2;
+    display: flex;
+    flex-direction: column;
+  }
+
   // challenge details section
   .challenge-details {
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
+    flex: 2;
   }
 
   // roles bar is common for both active and completed
   .roles {
     width: 100%;
-    border-radius: 4px;
+    border-radius: 0px 0px 4px 4px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
@@ -71,7 +80,7 @@ challenge-tile .challenge.tile-view {
   }
 
   .active-challenge {
-    height: 350px;
+    height: 390px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -84,7 +93,6 @@ challenge-tile .challenge.tile-view {
 
     .challenge-details {
       .currentPhase {
-        margin-top: 40px;
         margin-bottom: 20px;
         @include font-with-weight('Sofia Pro', 300);
         font-size: 18px;
@@ -99,7 +107,6 @@ challenge-tile .challenge.tile-view {
         align-items: center;
         width: 75px;
         height: 63px;
-        margin-bottom: 20px;
         background-image: url(/images/ico-calendar.svg);
 
         > p {
@@ -179,7 +186,7 @@ challenge-tile .challenge.tile-view {
 
 
   .completed-challenge {
-    height: 350px;
+    height: 390px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -222,6 +229,27 @@ challenge-tile .challenge.tile-view {
         justify-content: center;
       }
 
+      design-challenge-user-place {
+        display: flex;
+        flex-direction: column;
+        flex: 2;
+
+        .tile-view {
+          flex: 2;
+          justify-content: flex-end;
+        }
+      }
+
+      dev-challenge-user-place {
+        display: flex;
+        flex-direction: column;
+        flex: 2;
+
+        .tile-view {
+          flex: 2;
+        }
+      }
+
       .marathon-score {
         display: flex;
         flex-direction: column;

assets/css/my-challenges/my-challenges.scss

@@ -176,7 +176,7 @@
 
         challenge-tile {
           &.tile-view {
-            margin-bottom: 20px;
+            margin-bottom: 13px;
             @media only screen and (max-width: 767px) {
               display: inline-block;
               margin-left: 15px;