diff --git a/app/directives/challenge-tile/challenge-tile.directive.jade b/app/directives/challenge-tile/challenge-tile.directive.jade index 3ec2e022d..4eba7bb30 100644 --- a/app/directives/challenge-tile/challenge-tile.directive.jade +++ b/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,10 +96,9 @@ .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}} @@ -113,11 +106,10 @@ .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") 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 dc9139f59..a57388fe5 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,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") diff --git a/app/directives/challenge-user-place/dev-challenge-user-place.directive.jade b/app/directives/challenge-user-place/dev-challenge-user-place.directive.jade index 99156ddc9..eeca35389 100644 --- a/app/directives/challenge-user-place/dev-challenge-user-place.directive.jade +++ b/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 diff --git a/assets/css/directives/challenge-links.directive.scss b/assets/css/directives/challenge-links.directive.scss index 06833d2fb..537eaf9c8 100644 --- a/assets/css/directives/challenge-links.directive.scss +++ b/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; diff --git a/assets/css/directives/challenge-tile.scss b/assets/css/directives/challenge-tile.scss index 823bb3392..811ab39b2 100644 --- a/assets/css/directives/challenge-tile.scss +++ b/assets/css/directives/challenge-tile.scss @@ -3,38 +3,25 @@ // 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; @@ -42,12 +29,11 @@ challenge-tile .challenge.tile-view { } 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; + } } diff --git a/assets/css/directives/design-challenge-user-place.scss b/assets/css/directives/design-challenge-user-place.scss index 133a86446..540d71b80 100644 --- a/assets/css/directives/design-challenge-user-place.scss +++ b/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; diff --git a/assets/css/directives/dev-challenge-user-place.scss b/assets/css/directives/dev-challenge-user-place.scss index b02ad190f..69f0ca8c5 100644 --- a/assets/css/directives/dev-challenge-user-place.scss +++ b/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;