Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Implemented new designs for invite-only and private challenge cards #726

Merged
merged 1 commit into from
Feb 10, 2016
Merged

Implemented new designs for invite-only and private challenge cards #726

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions app/directives/challenge-tile/challenge-tile.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know it's a little bit of a hassle, but I think semantically <br> shouldn't be used here. Two <p> tags might be able to work in its place? Not totally crucial to change though :bowtie:

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks Nick for the review. I also thought of that, however, using

does not seems good solution to me because many times p's margin/padding creates differences in rendering for different browsers. I would try to use two divs instead whenever I get chance to revisit this. 😁

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do the browsers render them differently even with our CSS reset?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally they should not after CSS reset, but I don't trust them. :)


.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
Expand Down Expand Up @@ -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"))
4 changes: 2 additions & 2 deletions app/directives/challenge-user-place/design-challenge-user-place.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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()")
Expand Down
107 changes: 85 additions & 22 deletions assets/css/directives/challenge-tile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {

Expand Down Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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%;
Expand Down
2 changes: 2 additions & 0 deletions assets/css/directives/design-challenge-user-place.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,8 @@ design-challenge-user-place {
width: 84px;
height: 84px;
overflow: hidden;
display: flex;
flex-direction: column;

img {
width: 100%;
Expand Down