diff --git a/app/directives/challenge-tile/challenge-tile.jade b/app/directives/challenge-tile/challenge-tile.jade index 7b7e26bf1..0b66f8bd7 100644 --- a/app/directives/challenge-tile/challenge-tile.jade +++ b/app/directives/challenge-tile/challenge-tile.jade @@ -57,14 +57,16 @@ .challenge-details(ng-switch-when="DEVELOP") dev-challenge-user-place(challenge="challenge", view="view", ng-hide="challenge.isPrivate") .invite-only-banner(ng-show="challenge.isPrivate") + .title INVITE-ONLY CHALLENGE img(ng-src=require("../../../assets/images/ico-invite-only-prj.svg")) - span INVITE-ONLY CHALLENGE + span CHALLENGE INFORMATION IS CONFIDENTIAL#[br]RESULTS ARE NOT INCLUDED IN STATISTICS .challenge-details(ng-switch-when="DESIGN") design-challenge-user-place(challenge="challenge", view="view", ng-hide="challenge.isPrivate") .invite-only-banner(ng-show="challenge.isPrivate") + .title INVITE-ONLY CHALLENGE img(ng-src=require("../../../assets/images/ico-invite-only-prj.svg")) - span INVITE-ONLY CHALLENGE + span CHALLENGE INFORMATION IS CONFIDENTIAL#[br]RESULTS ARE NOT INCLUDED IN STATISTICS // Only show if not data science track p.roles @@ -121,9 +123,15 @@ .challenge-details(ng-switch-when="DEVELOP") dev-challenge-user-place(challenge="challenge", view="view", ng-hide="challenge.isPrivate") .invite-only-banner(ng-show="challenge.isPrivate") + .invite-only-banner__description + .title INVITE-ONLY CHALLENGE + span CHALLENGE INFORMATION IS CONFIDENTIAL#[br]RESULTS ARE NOT INCLUDED IN STATISTICS img(src=require("../../../assets/images/ico-invite-only-prj.svg")) .challenge-details(ng-switch-when="DESIGN") design-challenge-user-place(challenge="challenge", view="view", ng-hide="challenge.isPrivate") .invite-only-banner(ng-show="challenge.isPrivate") + .invite-only-banner__description + .title INVITE-ONLY CHALLENGE + span CHALLENGE INFORMATION IS CONFIDENTIAL#[br]RESULTS ARE NOT INCLUDED IN STATISTICS img(src=require("../../../assets/images/ico-invite-only-prj.svg")) diff --git a/app/directives/challenge-user-place/design-challenge-user-place.jade b/app/directives/challenge-user-place/design-challenge-user-place.jade index 514d05b1f..8196cd01d 100644 --- a/app/directives/challenge-user-place/design-challenge-user-place.jade +++ b/app/directives/challenge-user-place/design-challenge-user-place.jade @@ -8,7 +8,7 @@ .thumbnail(ng-click="!challenge.isPrivate && imageURL && openLightbox()", ng-class="{hidden: challenge.userStatus !== 'PASSED_REVIEW'}") img(ng-show="challenge.submissionViewable && imageURL", ng-src="{{imageURL}}") img(ng-show="challenge.submissionViewable && !imageURL", ng-src=require("../../../assets/images/card-bg-no-image.svg")) - .private-challenge-banner(ng-show="!challenge.submissionViewable") + .private-challenge-banner(ng-show="!challenge.submissionViewable", title="Submissions for this challenge are confidential") img(ng-src=require("../../../assets/images/ico-private-prj.svg")) span PRIVATE CHALLENGE @@ -34,7 +34,7 @@ .thumbnail(ng-click="!challenge.isPrivate && imageURL && openLightbox()", ng-class="{hidden: challenge.userStatus !== 'PASSED_REVIEW'}") img(ng-show="challenge.submissionViewable && imageURL", ng-src="{{imageURL}}") img(ng-show="challenge.submissionViewable && !imageURL", ng-src=require("../../../assets/images/card-bg-no-image.svg")) - .private-challenge-banner(ng-show="!challenge.submissionViewable") + .private-challenge-banner(ng-show="!challenge.submissionViewable", title="Submissions for this challenge are confidential") img(ng-src=require("../../../assets/images/ico-private-prj.svg")) .thumbnail-gallery(ng-show="numImages", ng-click="!challenge.isPrivate && imageURL && openLightbox()") diff --git a/assets/css/directives/challenge-tile.scss b/assets/css/directives/challenge-tile.scss index 40ed88737..69d4c6e6b 100644 --- a/assets/css/directives/challenge-tile.scss +++ b/assets/css/directives/challenge-tile.scss @@ -1,5 +1,65 @@ @import 'topcoder/tc-includes'; +// Common styles between tile and list view + + +challenge-tile .challenge { + + .private-challenge-banner { + width: 100%; + flex: 1; + display: flex; + + .title { + @include sofia-pro-light; + font-size: 18px; + line-height: 23px; + color: $gray-darkest; + text-transform: uppercase; + } + + img { + width: auto; + } + + span { + @include font-with-weight('Sofia Pro', 400); + font-size: 11px; + line-height: 15px; + text-transform: uppercase; + color: $gray-dark; + text-align: center; + } + } + + .invite-only-banner { + width: 100%; + flex: 1; + display: flex; + + .title { + @include sofia-pro-light; + font-size: 18px; + line-height: 23px; + color: $gray-darkest; + text-transform: uppercase; + } + + img { + width: auto; + } + + span { + @include font-with-weight('Sofia Pro', 400); + font-size: 11px; + line-height: 15px; + text-transform: uppercase; + color: $gray-dark; + text-align: center; + } + } +} + // Default Challenge Tile Stylings challenge-tile .challenge.tile-view { @@ -54,47 +114,29 @@ challenge-tile .challenge.tile-view { } .private-challenge-banner { - width: 100%; - background-color: $gray-darkest; - flex: 1; - display: flex; flex-direction: column; justify-content: center; align-items: center; - img { - width: auto; + .title { + margin-bottom: 60px; } span { - @include font-with-weight('Sofia Pro', 300); - font-size: 12px; - line-height: 16px; - text-transform: uppercase; - color: $gray-dark; margin-top: 20px; } } .invite-only-banner { - width: 100%; - background-color: $gray-darkest; - flex: 1; - display: flex; flex-direction: column; justify-content: center; align-items: center; - img { - width: auto; + .title { + margin-bottom: 60px; } span { - @include font-with-weight('Sofia Pro', 300); - font-size: 12px; - line-height: 16px; - text-transform: uppercase; - color: $gray-dark; margin-top: 20px; } } @@ -473,6 +515,27 @@ challenge-tile .challenge.list-view { } } + .private-challenge-banner { + flex-direction: column; + justify-content: center; + } + + .invite-only-banner { + flex-direction: row; + justify-content: space-between; + + .invite-only-banner__description { + + .title { + margin-bottom: 10px; + } + + span { + } + + } + } + // specific styles for active challenges in list view .active-challenge { width: 100%; diff --git a/assets/css/directives/design-challenge-user-place.scss b/assets/css/directives/design-challenge-user-place.scss index 996443971..a7ede50aa 100644 --- a/assets/css/directives/design-challenge-user-place.scss +++ b/assets/css/directives/design-challenge-user-place.scss @@ -125,6 +125,8 @@ design-challenge-user-place { width: 84px; height: 84px; overflow: hidden; + display: flex; + flex-direction: column; img { width: 100%;