Merge pull request #666 from appirio-tech/feature/sup-2412-challenge-title-visiblity

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

Merging to get changes in dev for PM to review.

Author: vikasrohit

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

@@ -2,12 +2,9 @@
   .active-challenge(ng-show="challenge.status === 'ACTIVE'")
 
     header
-      .top
-        a.name(ng-href="{{challenge|challengeLinks:'detail'}}") #[span {{challenge.name}}]
+      a.name(ng-href="{{challenge|challengeLinks:'detail'}}", title="{{challenge.name}}") #[span {{challenge.name}}]
 
-        .challenge-track
-
-        p.subtrack-color {{challenge.subTrack | underscoreStrip}}
+      p.subtrack-color {{challenge.subTrack | underscoreStrip}}
 
       challenge-links(challenge="challenge", view="'tile'")
 
@@ -38,13 +35,11 @@
   .completed-challenge(
     ng-show="challenge.status === 'COMPLETED' || challenge.status === 'PAST'",
     ng-switch="challenge.track")
-    .challenge-track
 
     header
-      .top
-        a.name(ng-href="{{challenge|challengeLinks:'detail'}}") {{challenge.name}}
+      a.name(ng-href="{{challenge|challengeLinks:'detail'}}", title="{{challenge.name}}") {{challenge.name}}
 
-        p.subtrack-color {{challenge.subTrack | underscoreStrip}}
+      p.subtrack-color {{challenge.subTrack | underscoreStrip}}
 
       p.date-completed {{challenge.submissionEndDate | date : 'MMMM yyyy'}}
 
@@ -72,10 +67,9 @@
 
 .challenge.list-view(ng-show="view=='list'", ng-class="challenge.track")
   .active-challenge(ng-show="challenge.status === 'ACTIVE'")
-    .challenge-track
 
     header
-      a.name(ng-href="{{challenge|challengeLinks:'detail'}}") {{challenge.name}}
+      a.name(ng-href="{{challenge|challengeLinks:'detail'}}", title="{{challenge.name}}") {{challenge.name}}
 
       p.subtrack-color {{challenge.subTrack | underscoreStrip}}
 
@@ -102,22 +96,20 @@
   .completed-challenge(
     ng-show="challenge.status === 'COMPLETED' || challenge.status === 'PAST'",
     ng-switch="challenge.track")
-    .challenge-track
 
     header
-      a.name(ng-href="{{challenge|challengeLinks:'detail'}}") {{challenge.name}}
+      a.name(ng-href="{{challenge|challengeLinks:'detail'}}", title="{{challenge.name}}") {{challenge.name}}
 
       p.subtrack-color {{challenge.subTrack | underscoreStrip}}
 
       p.roles(ng-hide="challenge.track === 'DATA_SCIENCE'") #[span Role: ] #[span {{challenge.userDetails.roles | listRoles}}]
 
     .challenge-details(ng-switch-when="DATA_SCIENCE", ng-switch="challenge.subTrack", ng-class="challenge.track")
 
-      div
-        .marathon-score
-          p.score {{challenge.pointTotal || 0 }}
+      .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")

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-class="{hidden: challenge.userStatus !== 'PASSED_REVIEW'}")
+  .thumbnail(ng-click="!challenge.isPrivate && imageURL && openLightbox()", ng-hide="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")
 

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

@@ -4,7 +4,7 @@
     p.place(ng-show="challenge.userStatus === 'PASSED_SCREENING'") Passed Screening
     p.place(ng-show="challenge.userStatus === 'COMPLETED'") COMPLETED
 
-  .challenge-score(ng-class="{hidden: challenge.userStatus !== 'PASSED_REVIEW'}")
+  .challenge-score(ng-hide="challenge.userStatus !== 'PASSED_REVIEW'")
     p.score {{challenge.userDetails.submissionReviewScore/100 | percentage}}
 
     p Review Score

assets/css/directives/challenge-links.directive.scss

@@ -8,15 +8,13 @@
   width: 100%;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
-  padding: 0 20px;
-  margin-bottom: 10px;
 
   a {
     text-decoration: none;
     p {
       color: $accent-gray;
       @include font-with-weight('Sofia Pro', 500);
-      font-size: 12px;
+      font-size: 10px;
       line-height: 14px;
       text-transform: uppercase;
 

assets/css/directives/challenge-tile.scss

@@ -3,51 +3,37 @@
 // Default Challenge Tile Stylings
 challenge-tile .challenge.tile-view {
 
-  // common css for both active and completed challenge for tile-view
-  height: 350px;
-  display: flex;
-  flex-direction: row;
-
-  .challenge-track {
-    width: 5px;
-    height: 91px;
-    position: absolute;
-    top: -1px;
-    left: -1px;
-    border-top-left-radius: 4px;
-  }
-
   header {
     width: 270px;
-    height: 91px;
     border-bottom: 1px solid #F0F0F0;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    padding: 5px 10px;
 
     a.name {
       display: block;
-      padding: 15px 20px 0px 20px;
       @include font-with-weight('Sofia Pro', 500);
-      font-size: 14px;
-      line-height: 20px;
+      font-size: 12px;
+      line-height: 16px;
+      max-height: 48px;
+      overflow: hidden;
       color: $gray-darkest;
-      @include ellipsis;
       @include link;
       text-transform: uppercase;
+      margin-bottom: 5px;
 
       &:hover {
         text-decoration: none;
       }
     }
 
     p.subtrack-color {
-      padding: 0 20px;
-      margin-top: 5px;
       @include font-with-weight('Sofia Pro', 500);
-      font-size: 12px;
+      font-size: 10px;
       line-height: 14px;
       text-transform: uppercase;
+      margin-bottom: 5px;
     }
   }
 
@@ -60,9 +46,8 @@ challenge-tile .challenge.tile-view {
 
   // roles bar is common for both active and completed
   .roles {
-    width: 101%;
-    border: 1px solid #e0e0e0;
-    border-top: none;
+    width: 100%;
+    border-radius: 4px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
@@ -86,6 +71,10 @@ challenge-tile .challenge.tile-view {
   }
 
   .active-challenge {
+    height: 350px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     position: relative;
     width: 270px;
     border: 1px solid #E0E0E0;
@@ -190,6 +179,7 @@ challenge-tile .challenge.tile-view {
 
 
   .completed-challenge {
+    height: 350px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -206,12 +196,11 @@ challenge-tile .challenge.tile-view {
 
       .date-completed {
         @include font-with-weight('Sofia Pro', 500);
-        font-size: 12px;
+        font-size: 10px;
+        line-height: 14px;
         text-transform: uppercase;
         color: $accent-gray;
-        padding-left: 20px;
-        padding-right: 20px;
-        margin-bottom: 10px;
+        margin-bottom: 5px;
       }
 
       .winner-ribbon {
@@ -234,11 +223,13 @@ challenge-tile .challenge.tile-view {
       }
 
       .marathon-score {
-        margin-bottom: 70px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
         text-align: center;
 
         .score {
-          margin-top: 28px;
           margin-bottom: 5px;
           @include font-with-weight;
           font-size: 32px;
@@ -279,16 +270,6 @@ challenge-tile .challenge.list-view {
 
   // common styles for active and completed
 
-  .challenge-track {
-    width: 5px;
-    height: 110px;
-    position: absolute;
-    top: -1px;
-    left: -1px;
-    border-top-left-radius: 6px;
-    border-bottom-left-radius: 6px;
-  }
-
   header {
     display: flex;
     flex-direction: column;
@@ -302,10 +283,11 @@ challenge-tile .challenge.list-view {
     a.name {
       display: block;
       @include font-with-weight('Sofia Pro', 500);
-      font-size: 14px;
-      line-height: 20px;
+      font-size: 12px;
+      line-height: 16px;
+      max-height: 32px;
+      overflow: hidden;
       color: $gray-darkest;
-      @include ellipsis;
       @include link;
       text-transform: uppercase;
 
@@ -315,7 +297,6 @@ challenge-tile .challenge.list-view {
     }
 
     p.subtrack-color {
-      margin-bottom: 12px;
       @include font-with-weight('Sofia Pro', 500);
       font-size: 12px;
       line-height: 14px;
@@ -449,22 +430,66 @@ challenge-tile .challenge.list-view {
 
 // Dynamic colors based on track
 .DESIGN {
-  .challenge-track { background-color: $design; }
+  &.tile-view {
+    header {
+      border-left: 3px solid $design;
+      border-radius: 3px 0 0 0;
+    }
+  }
 
-  header .subtrack-color { color: $design; }
+  &.challenge.list-view {
+    border-left: 3px solid $design;
+  }
+
+  .subtrack-color {
+    color: $design;
+  }
 }
 .DEVELOP {
-  .challenge-track { background-color: $develop; }
+  &.tile-view {
+    header {
+      border-left: 3px solid $develop;
+      border-radius: 3px 0 0 0;
+    }
+  }
 
-  header .subtrack-color { color: $develop; }
+  &.challenge.list-view {
+    border-left: 3px solid $develop;
+  }
+
+  .subtrack-color {
+    color: $develop;
+  }
 }
 .DATA_SCIENCE {
-  .challenge-track { background-color: $data_science; }
+  &.tile-view {
+    header {
+      border-left: 3px solid $data_science;
+      border-radius: 3px 0 0 0;
+    }
+  }
 
-  header .subtrack-color { color: $data_science; }
+  &.challenge.list-view {
+    border-left: 3px solid $data_science;
+  }
+
+  .subtrack-color {
+    color: $data_science;
+  }
 }
 .COPILOT {
-  .challenge-track { background-color: $copilot; }
+  &.tile-view {
+    header {
+      border-left: 3px solid $copilot;
+      border-radius: 3px 0 0 0;
+    }
+  }
 
-  header .subtrack-color { color: $copilot; }
+  &.challenge.list-view {
+    border-left: 3px solid $copilot;
+  }
+
+  .subtrack-color {
+    color: $copilot;
+  }
 }

assets/css/directives/design-challenge-user-place.scss

@@ -6,15 +6,10 @@ design-challenge-user-place {
   .tile-view {
     display: flex;
     flex-direction: column;
+    justify-content: center;
     align-items: center;
 
     .place {
-      &.completed, &.passed, &.didnt {
-        margin-bottom: -36px;
-        margin-top: 52px;
-      }
-      margin-bottom: 8px;
-      margin-top: 8px;
       @include sofia-pro-regular;
       font-size: 20px;
       color: $gray-darkest;

assets/css/directives/dev-challenge-user-place.scss

@@ -4,8 +4,12 @@
 dev-challenge-user-place {
 
   .tile-view {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    
     .place {
-      margin-bottom: 30px;
       @include sofia-pro-light;
       font-size: 18px;
       line-height: 23px;