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

Commit de74b8f

Browse files
author
vikasrohit
committed
Partial changes for empty state
1 parent 98b53e4 commit de74b8f

File tree

13 files changed

+189
-184
lines changed

13 files changed

+189
-184
lines changed

‎app/directives/empty-state-placeholder/empty-state-placeholder.directive.jade

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.empty-state-placeholder
2+
.title(ng-bind="vm.title")
3+
.description(ng-bind="vm.description")
4+
.upsell(ng-transclude)

‎app/directives/empty-state-placeholder/empty-state-placeholder.directive.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
(function() {
2+
'use strict';
3+
4+
angular.module('tcUIComponents')
5+
.directive('emptyStatePlaceholder', emptyStatePlaceholder);
6+
7+
function emptyStatePlaceholder() {
8+
return {
9+
restrict: 'E',
10+
transclude: true,
11+
templateUrl: 'directives/empty-state-placeholder/empty-state-placeholder.directive.html',
12+
scope: {
13+
title: '@',
14+
description: '@'
15+
},
16+
controller: ['$scope', 'CONSTANTS', '$attrs',
17+
function($scope, CONSTANTS, $attrs) {
18+
$scope.DOMAIN = CONSTANTS.domain;
19+
var vm = this;
20+
vm.title = $scope.title;
21+
vm.description = $scope.description;
22+
23+
activate();
24+
25+
function activate() {
26+
27+
}
28+
}],
29+
controllerAs: "vm"
30+
};
31+
}
32+
})();

‎app/index.jade

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ html
7373
link(rel="stylesheet", href="assets/css/directives/history-graph.css")
7474
link(rel="stylesheet", href="assets/css/directives/external-link-data.css")
7575
link(rel="stylesheet", href="assets/css/directives/external-account.css")
76+
link(rel="stylesheet", href="assets/css/directives/empty-state-placeholder.css")
7677
link(rel="stylesheet", href="assets/css/directives/distribution-graph.css")
7778
link(rel="stylesheet", href="assets/css/directives/dev-challenge-user-place.css")
7879
link(rel="stylesheet", href="assets/css/directives/design-lightbox.css")
@@ -177,6 +178,7 @@ html
177178
script(src="directives/challenge-tile/challenge-tile.directive.js")
178179
script(src="directives/challenge-user-place/challenge-user-place.directive.js")
179180
script(src="directives/distribution-graph/distribution-graph.directive.js")
181+
script(src="directives/empty-state-placeholder/empty-state-placeholder.directive.js")
180182
script(src="directives/external-account/external-account.directive.js")
181183
script(src="directives/focus-on.directive.js")
182184
script(src="directives/header/header-menu-item.directive.js")

‎app/my-challenges/my-challenges.controller.js

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
$log = $log.getInstance('MyChallengesController');
1010
var vm = this;
1111
vm.domain = CONSTANTS.domain;
12+
vm.neverParticipated = false;
1213
vm.myChallenges = [];
1314
vm.loading = CONSTANTS.STATE_LOADING;
1415
vm.view = UserService.getPreference($state.$current.name+'.challengeListView') || 'tile';
@@ -41,9 +42,11 @@
4142
activate();
4243

4344
function activate() {
44-
vm.isCopilot = _.includes(userIdentity.roles, 'copilot');
45-
vm.myChallenges = [];
46-
changeFilter(vm.statusFilter);
45+
_checkForParticipation().then(function() {
46+
vm.isCopilot = _.includes(userIdentity.roles, 'copilot');
47+
vm.myChallenges = [];
48+
changeFilter(vm.statusFilter);
49+
});
4750
}
4851

4952
function changeView(view) {
@@ -85,7 +88,7 @@
8588
vm.loading = CONSTANTS.STATE_READY;
8689

8790
vm.totalCount = _.sum(_.pluck(data, 'metadata.totalCount'));
88-
vm.myChallenges = vm.myChallenges.concat(_.union(data[0], data[1]));
91+
vm.myChallenges = [];//vm.myChallenges.concat(_.union(data[0], data[1]));
8992
})
9093
.catch(function(resp) {
9194
$log.error(resp);
@@ -141,5 +144,19 @@
141144
currentOffset+=1;
142145
vm.getChallenges(currentOffset, false);
143146
}
147+
148+
function _checkForParticipation() {
149+
var params = {
150+
limit: 1,
151+
offset: 0
152+
};
153+
return ChallengeService.getUserChallenges(vm.handle, params).then(function(challenges) {
154+
if (challenges.metadata.totalCount > 0) {
155+
vm.neverParticipated = false;
156+
} else {
157+
vm.neverParticipated = true;
158+
}
159+
});
160+
}
144161
}
145162
})();

‎app/my-challenges/my-challenges.jade

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,14 @@
55
page-state-header(handle="{{vm.handle}}", page-title="My Challenges", hide-money="true", show-back-link="true", default-state="dashboard")
66

77
.content
8-
section.challenges
8+
9+
.never-participated(ng-if="vm.neverParticipated")
10+
empty-state-placeholder(title="My Challenges", description="Compete in challenges to win money, test yourself against the world's best, and learn new skills")
11+
.info-links
12+
a.find-challenges.tc-btn.tc-btn-s(ng-href="https://www.{{DOMAIN}}/challenges/?pageIndex=1") Find Challenges
13+
14+
a.learn-more(href="https://www.{{DOMAIN}}/community/getting-started/") Learn More
15+
section.challenges(ng-if="!vm.neverParticipated")
916
.top
1017
.filters
1118
a(ng-click="vm.statusFilter !== 'active' && vm.changeFilter('active')", ng-class="{disabled: vm.statusFilter == 'active'}") Active
@@ -19,9 +26,14 @@
1926

2027
.noChallenges(ng-show="vm.myChallenges.length === 0 && vm.loading === 'ready'")
2128
p(ng-show="vm.statusFilter === 'completed'") You have not participated in any challenges yet.
22-
p(ng-if="vm.statusFilter === 'active'") There are no upcoming challenges.
29+
p(ng-if="vm.statusFilter === 'active'")
30+
empty-state-placeholder(title="My Challenges", description="There are no active challenges.")
31+
.info-links
32+
a.find-challenges.tc-btn.tc-btn-s(ng-href="https://www.{{DOMAIN}}/challenges/?pageIndex=1") Find Challenges
33+
34+
a.learn-more(href="https://www.{{DOMAIN}}/community/getting-started/") Learn More
2335

24-
.hasChallenges(ng-show="vm.myChallenges.length")
36+
tc-section.hasChallenges(ng-show="vm.myChallenges.length", state="vm.loading")
2537

2638
.data(ng-class="vm.view + '-view'")
2739
challenge-tile(

‎app/my-dashboard/my-challenges/my-challenges.controller.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@
5454
// sort by closest deadline? .sort(function)
5555
// limit to 8 .slice(0, 8);
5656

57-
vm.myChallenges = userChallenges;
58-
vm.userHasChallenges = true;
57+
vm.myChallenges = [];//userChallenges;
58+
vm.userHasChallenges = false;
5959
vm.loading = false;
6060
}
6161
})

‎app/my-dashboard/my-challenges/my-challenges.jade

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
header(ng-hide="vm.loading")
1+
header(ng-hide="vm.loading || !vm.userHasChallenges")
22
h1.section-title Active Challenges
33

44
.challenge-view-toggle(ng-show="vm.userHasChallenges")
@@ -9,31 +9,11 @@ header(ng-hide="vm.loading")
99
.section-loading(ng-show="vm.loading")
1010

1111
section.noChallenges(ng-if="!vm.userHasChallenges && !vm.loading")
12-
h3 Win prize money and expand your knowledge
12+
empty-state-placeholder(title="My Challenges", description="Compete in challenges to win money, test yourself against the world's best, and learn new skills")
13+
.info-links
14+
a.find-challenges.tc-btn.tc-btn-s(ng-href="https://www.{{DOMAIN}}/challenges/?pageIndex=1") Find Challenges
1315

14-
.tracks
15-
.track
16-
.develop-icon-outline
17-
p Development
18-
19-
.track
20-
.design-icon-outline
21-
p Design
22-
23-
.track
24-
.data-science-icon-outline
25-
p Data Science
26-
27-
.track
28-
.copilot-icon-outline
29-
p Co-Pilot
30-
31-
p.info Compete in challenges to win money, test yourself against the world's best, and learn new skills
32-
33-
.info-links
34-
a.tc-btn.tc-btn-l(ng-href="https://www.{{DOMAIN}}/challenges/?pageIndex=1") Find Challenges
35-
36-
a.tc-btn.tc-btn-ghost.tc-btn-l(href="https://www.{{DOMAIN}}/community/getting-started/") Learn More
16+
a.learn-more(href="https://www.{{DOMAIN}}/community/getting-started/") Learn More
3717

3818
section.hasChallenges(ng-if="vm.userHasChallenges && !vm.loading", ng-class="{ 'list-view-active': vm.challengeView === 'list' }")
3919
.section-titles(ng-show="vm.challengeView === 'list'")

‎app/my-dashboard/programs/programs.controller.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
function activate() {
2727
MemberCertService.getMemberRegistration(userId, CONSTANTS.SWIFT_PROGRAM_ID)
2828
.then(function(res) {
29-
if (res == null) {
29+
if (res != null) {
3030
vm.registered = false;
3131
vm.loading = false;
3232
} else {

‎app/my-dashboard/programs/programs.jade

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,15 @@
1-
header(ng-hide="vm.loading")
1+
header(ng-hide="vm.loading || !vm.registered")
22
h1.section-title #[span iOS]: Show Your Skills
33

44
.section-loading(ng-show="vm.loading")
55

66
section.ios(ng-hide="vm.loading")
77
.unregistered(ng-hide="vm.registered")
8-
img(src="/images/learn-and-improve.png", srcset="/images/learn-and-improve2x.png 2x")
9-
10-
.join-program
11-
h3 #[span iOS]: Show Your Skills
12-
13-
h4 Take the first steps to stand out in the Community
14-
15-
p Experienced and proven iOS developers are in high-demand. Prove your skills by earning these iOS topcoder badges and gain exclusive access to iOS challenges and prize accelerators, special previews into content and releases, and special community-related events and info.
16-
8+
empty-state-placeholder(title="iOS COMMUNITY", description="Earn iOS topcoder badges and exclusive access to iOS challenges, prizes and special community-related events.")
179
.info-links
18-
a.tc-btn(ng-click="vm.registerUser()") Participate
10+
a.participate.tc-btn.tc-btn-s(ng-click="vm.registerUser()") Participate
1911

20-
a.tc-btn.tc-btn-ghost(ng-href="https://ios.{{DOMAIN}}", target="_blank") Learn More
12+
a.learn-more(ng-href="https://ios.{{DOMAIN}}", target="_blank") Learn More
2113

2214
.registered(ng-show="vm.registered")
2315
.badge-and-challenges

‎assets/css/directives/empty-state-placeholder.scss

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
@import 'topcoder-includes';
2+
@import '../partials/combined';
3+
4+
.empty-state-placeholder {
5+
display: flex;
6+
flex-direction: column;
7+
align-items: center;
8+
color: $gray-darkest;
9+
padding-left: 20px;
10+
padding-right: 20px;
11+
padding-bottom: 30px;
12+
13+
.title {
14+
margin-bottom: 20px;
15+
@include sofia-pro-bold;
16+
font-size: 24px;
17+
line-height: 29px;
18+
text-align: center;
19+
text-transform: uppercase;
20+
}
21+
22+
.description {
23+
max-width: 650px;
24+
margin-top: 20px;
25+
margin-bottom: 40px;
26+
@include merriweather-sans-regular;
27+
font-size: 15px;
28+
line-height: 24px;
29+
text-align: center;
30+
@media only screen and (min-width: 768px) {
31+
margin-bottom: 40px;
32+
}
33+
@media only screen and (min-width: 900px) {
34+
max-width: 856px;
35+
}
36+
}
37+
38+
.upsell {
39+
40+
}
41+
}

‎assets/css/my-challenges/my-challenges.scss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,35 @@
2828
.page-header {
2929
}
3030

31+
.never-participated {
32+
padding-top: 30px;
33+
34+
.info-links {
35+
text-align: center;
36+
display: flex;
37+
flex-direction: column;
38+
39+
a {
40+
text-transform: uppercase;
41+
@include sofia-pro-medium;
42+
43+
&:not(:last-child) {
44+
margin-bottom: 30px;
45+
}
46+
47+
&.participate {
48+
color: $white;
49+
}
50+
51+
&.learn-more {
52+
font-size: 12px;
53+
line-height: 12px;
54+
color: $gray-lighter;
55+
}
56+
}
57+
}
58+
}
59+
3160
section.noChallenges {
3261
text-align: center;
3362
margin-top: 10px;

‎assets/css/my-dashboard/my-challenges.scss

Lines changed: 15 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -73,20 +73,7 @@
7373
padding-left: 20px;
7474
padding-right: 20px;
7575

76-
h3 {
77-
margin-bottom: 20px;
78-
@include sofia-pro-extra-light;
79-
font-size: 18px;
80-
line-height: 24px;
81-
text-align: center;
82-
83-
text-transform: uppercase;
84-
@media only screen and (min-width: 900px) {
85-
font-size: 28px;
86-
margin-bottom: 30px;
87-
}
88-
}
89-
76+
// TODO remove once we are sure we don't need tracks in empty state
9077
.tracks {
9178
display: flex;
9279
flex-direction: row;
@@ -129,50 +116,27 @@
129116
}
130117
}
131118

132-
.info {
133-
max-width: 650px;
134-
margin-top: 50px;
135-
@include sofia-pro-light;
136-
font-size: 15px;
137-
line-height: 22.4px;
138-
text-align: center;
139-
@media only screen and (min-width: 900px) {
140-
max-width: 856px;
141-
margin-top: 90px;
142-
font-size: 22px;
143-
line-height: 32px;
144-
}
145-
}
146-
147119
.info-links {
148120
text-align: center;
121+
display: flex;
122+
flex-direction: column;
149123

150124
a {
151-
display: block;
152-
margin: 30px auto;
153-
text-decoration: none;
154-
@media only screen and (min-width: 768px) {
155-
display: inline-block;
156-
margin-top: 20px;
157-
margin-bottom: 40px;
125+
text-transform: uppercase;
126+
@include sofia-pro-medium;
127+
128+
&:not(:last-child) {
129+
margin-bottom: 30px;
158130
}
159-
@media only screen and (min-width: 900px) {
160-
height: 60px;
161-
margin-top: 30px;
162-
margin-bottom: 90px;
163-
padding: 0 30px;
164-
line-height: 60px;
165-
font-size: 24px;
166-
167-
&:active {
168-
line-height: 62px;
169-
}
131+
132+
&.find-challenges {
133+
color: $white;
170134
}
171135

172-
&:last-child {
173-
@media only screen and (min-width: 768px) {
174-
margin-left: 30px;
175-
}
136+
&.learn-more {
137+
font-size: 12px;
138+
line-height: 12px;
139+
color: $gray-lighter;
176140
}
177141
}
178142
}

0 commit comments

Comments
 (0)