diff --git a/app/directives/challenge-tile/challenge-tile.jade b/app/directives/challenge-tile/challenge-tile.jade index 325bd5f76..fd2d131f6 100644 --- a/app/directives/challenge-tile/challenge-tile.jade +++ b/app/directives/challenge-tile/challenge-tile.jade @@ -43,7 +43,7 @@ p.date-completed {{challenge.submissionEndDate | date : 'MMMM yyyy'}} - .winner-ribbon(ng-show="challenge.wonFirst") + .winner-ribbon(ng-show="challenge.wonFirst && !challenge.isPrivate") .challenge-card__bottom.challenge-card__bottom--completed .challenge-details(ng-switch-when="DATA_SCIENCE", ng-switch="challenge.subTrack", ng-class="challenge.track") @@ -55,10 +55,16 @@ p Total Points .challenge-details(ng-switch-when="DEVELOP") - dev-challenge-user-place(challenge="challenge", view="view") + dev-challenge-user-place(challenge="challenge", view="view", ng-hide="challenge.isPrivate") + .invite-only-banner(ng-show="challenge.isPrivate") + img(src=require("../../../assets/images/ico-invite-only-prj.svg")) + span INVITE-ONLY CHALLENGE .challenge-details(ng-switch-when="DESIGN") - design-challenge-user-place(challenge="challenge", view="view") + design-challenge-user-place(challenge="challenge", view="view", ng-hide="challenge.isPrivate") + .invite-only-banner(ng-show="challenge.isPrivate") + img(src=require("../../../assets/images/ico-invite-only-prj.svg")) + span INVITE-ONLY CHALLENGE // Only show if not data science track p.roles @@ -113,7 +119,11 @@ p Total Points .challenge-details(ng-switch-when="DEVELOP") - dev-challenge-user-place(challenge="challenge", view="view") + dev-challenge-user-place(challenge="challenge", view="view", ng-hide="challenge.isPrivate") + .invite-only-banner(ng-show="challenge.isPrivate") + img(src=require("../../../assets/images/ico-invite-only-prj.svg")) .challenge-details(ng-switch-when="DESIGN") - design-challenge-user-place(challenge="challenge", view="view") + design-challenge-user-place(challenge="challenge", view="view", ng-hide="challenge.isPrivate") + .invite-only-banner(ng-show="challenge.isPrivate") + 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 3775f18ff..2e5448852 100644 --- a/app/directives/challenge-user-place/design-challenge-user-place.jade +++ b/app/directives/challenge-user-place/design-challenge-user-place.jade @@ -5,13 +5,18 @@ p.place.completed(ng-show="challenge.userStatus === 'COMPLETED'") COMPLETED .thumbnail(ng-click="!challenge.isPrivate && imageURL && openLightbox()", ng-class="{hidden: challenge.userStatus !== 'PASSED_REVIEW'}") - img(ng-show="!challenge.isPrivate", ng-src="{{imageURL || require('../../../assets/images/card-bg-no-image.svg')}}", fallback-src=require("../../../assets/images/card-bg-no-image.svg")) - img(ng-show="challenge.isPrivate", src=require("../../../assets/images/card-bg-private-project.svg")) + img(ng-show="challenge.submissionViewable && imageURL", ng-src="{{imageURL}}") + img(ng-show="challenge.submissionViewable && !imageURL", ng-src="../../../assets/images/card-bg-no-image.svg") + .private-challenge-banner(ng-show="!challenge.submissionViewable") + img(src=require("../../../assets/images/ico-private-prj.svg")) + span PRIVATE CHALLENGE .thumbnail-gallery(ng-show="numImages", ng-click="!challenge.isPrivate && imageURL && openLightbox()") .gallery-icon - .num-images {{numImages}} IMAGES + .num-images + span(ng-show="challenge.submissionViewable") {{numImages}} IMAGES + span(ng-show="!challenge.submissionViewable") No image is visible .list-view(ng-show="view === 'list'") .place-date @@ -21,14 +26,18 @@ p.place.completed(ng-show="challenge.userStatus === 'COMPLETED'") COMPLETED p.date-completed {{challenge.submissionEndDate | date : 'MMMM yyyy'}} - .winner-ribbon(ng-show="challenge.wonFirst") + .winner-ribbon(ng-show="challenge.wonFirst && !challenge.isPrivate") .thumbnail(ng-click="!challenge.isPrivate && imageURL && openLightbox()", ng-class="{hidden: challenge.userStatus !== 'PASSED_REVIEW'}") - img(ng-show="!challenge.isPrivate", ng-src="{{imageURL || require('../../../assets/images/card-bg-no-image.svg')}}", fallback-src=require("../../../assets/images/ico-picture.svg")) - img(ng-show="challenge.isPrivate", src=require("../../../assets/images/card-bg-private-project.svg")) + img(ng-show="challenge.submissionViewable && imageURL", ng-src="{{imageURL}}") + img(ng-show="challenge.submissionViewable && !imageURL", ng-src="../../../assets/images/card-bg-no-image.svg") + .private-challenge-banner(ng-show="!challenge.submissionViewable") + img(src=require("../../../assets/images/ico-private-prj.svg")) .thumbnail-gallery(ng-show="numImages", ng-click="!challenge.isPrivate && imageURL && openLightbox()") .gallery-icon - .num-images {{numImages}} IMAGES + .num-images + span(ng-show="challenge.submissionViewable") {{numImages}} IMAGES + span(ng-show="!challenge.submissionViewable") No image is visible diff --git a/app/services/challenge.service.js b/app/services/challenge.service.js index 98b01f882..88a0652d3 100644 --- a/app/services/challenge.service.js +++ b/app/services/challenge.service.js @@ -231,6 +231,8 @@ import moment from 'moment' if (!challenge.userHasSubmitterRole) { challenge.userStatus = 'COMPLETED' } + // FIXME, replace with field from response + challenge.submissionViewable = !challenge.isPrivate } }) } diff --git a/assets/css/directives/challenge-tile.scss b/assets/css/directives/challenge-tile.scss index aaabf667f..40ed88737 100644 --- a/assets/css/directives/challenge-tile.scss +++ b/assets/css/directives/challenge-tile.scss @@ -53,6 +53,52 @@ challenge-tile .challenge.tile-view { flex: 2; } + .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; + } + + 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; + } + + span { + @include font-with-weight('Sofia Pro', 300); + font-size: 12px; + line-height: 16px; + text-transform: uppercase; + color: $gray-dark; + margin-top: 20px; + } + } + // roles bar is common for both active and completed .roles { width: 100%; diff --git a/assets/css/directives/design-challenge-user-place.scss b/assets/css/directives/design-challenge-user-place.scss index f32a8ee01..996443971 100644 --- a/assets/css/directives/design-challenge-user-place.scss +++ b/assets/css/directives/design-challenge-user-place.scss @@ -31,6 +31,8 @@ design-challenge-user-place { width: 268px; height: 200px; overflow: hidden; + display: flex; + flex-direction: column; img { width: 100%; diff --git a/assets/images/ico-invite-only-prj.svg b/assets/images/ico-invite-only-prj.svg new file mode 100644 index 000000000..cb402c577 --- /dev/null +++ b/assets/images/ico-invite-only-prj.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/ico-private-prj.svg b/assets/images/ico-private-prj.svg new file mode 100644 index 000000000..691d345eb --- /dev/null +++ b/assets/images/ico-private-prj.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file