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

Commit f053b7c

Browse files
nlitwinnlitwin
committed
Merge pull request #155 from appirio-tech/skill-picker
Add mobile skill picker, not linked to api
2 parents e14b56b + ecd789f commit f053b7c

File tree

6 files changed

+247
-28
lines changed

6 files changed

+247
-28
lines changed

‎app/index.jade

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ html
5252
link(rel="stylesheet", href="assets/css/layout/footer.css")
5353
link(rel="stylesheet", href="assets/css/directives/toggle-password.css")
5454
link(rel="stylesheet", href="assets/css/directives/tc-section.css")
55-
link(rel="stylesheet", href="assets/css/directives/tc-pager.css")
55+
link(rel="stylesheet", href="assets/css/directives/tc-paginator.css")
5656
link(rel="stylesheet", href="assets/css/directives/srm-tile.css")
5757
link(rel="stylesheet", href="assets/css/directives/profile-widget.css")
5858
link(rel="stylesheet", href="assets/css/directives/distribution-graph.css")
@@ -88,10 +88,9 @@ html
8888
script(src='../bower_components/angucomplete-alt/angucomplete-alt.js')
8989
script(src='../bower_components/angular-cookies/angular-cookies.js')
9090
script(src='../bower_components/angular-dropdowns/dist/angular-dropdowns.js')
91-
script(src='../bower_components/angular-filter/dist/angular-filter.js')
91+
script(src='../bower_components/angular-filter/dist/angular-filter.min.js')
9292
script(src='../bower_components/angular-img-fallback/angular.dcb-img-fallback.js')
9393
script(src='../bower_components/angular-jwt/dist/angular-jwt.js')
94-
script(src='../bower_components/angular-mocks/angular-mocks.js')
9594
script(src='../bower_components/angular-sanitize/angular-sanitize.js')
9695
script(src='../bower_components/angular-ui-router/release/angular-ui-router.js')
9796
script(src='../bower_components/x2js/xml2json.min.js')
@@ -138,7 +137,7 @@ html
138137
script(src="directives/skill-tile/skill-tile.directive.js")
139138
script(src="directives/slideable.directive.js")
140139
script(src="directives/srm-tile/srm-tile.directive.js")
141-
script(src="directives/tc-pager/tc-pager.directive.js")
140+
script(src="directives/tc-paginator/tc-paginator.directive.js")
142141
script(src="directives/tc-section/tc-section.directive.js")
143142
script(src="topcoder.module.js")
144143
script(src="filters/deadline-msg.filter.js")
@@ -205,10 +204,10 @@ html
205204
script(src="settings/preferences/preferences.controller.js")
206205
script(src="settings/settings.controller.js")
207206
script(src="settings/settings.routes.js")
207+
script(src="settings/update-password/update-password.controller.js")
208208
script(src="skill-picker/skill-picker.module.js")
209209
script(src="skill-picker/skill-picker.controller.js")
210210
script(src="skill-picker/skill-picker.routes.js")
211-
script(src="settings/update-password/update-password.controller.js")
212211
script(src="topcoder.constants.js")
213212
script(src="topcoder.controller.js")
214213
script(src="topcoder.interceptors.js")

‎app/skill-picker/skill-picker.controller.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,45 @@
77

88
function SkillPickerController() {
99
var vm = this;
10+
vm.toggleSkill = toggleSkill;
11+
1012
activate();
1113

1214
function activate() {
15+
vm.tracks = {
16+
design: false,
17+
develop: false,
18+
data_science: false
19+
};
20+
21+
vm.skills = {
22+
design: ['Photoshop', 'Illustrator', 'InDesign', 'UX', 'UI', 'Sketch'],
23+
develop: ['Java', 'JavaScript', 'Ruby', 'Objective C', 'Python', 'SASS', 'HTML', 'CSS', 'LESS', 'C#', 'iOS', 'C++', 'Xcode', '.NET', 'PHP', 'MySQL', 'MongoDB'],
24+
data_science: ['Java', 'JavaScript', 'Ruby', 'Objective C', 'Python', 'SASS', 'HTML', 'CSS', 'LESS', 'C#', 'iOS', 'C++', 'Xcode', '.NET', 'PHP', 'MySQL', 'MongoDB']
25+
};
26+
27+
vm.selectedSkills = {
28+
design: {numSkills: 0},
29+
develop: {numSkills: 0},
30+
data_science: {numSkills: 0}
31+
};
32+
33+
vm.dropdown = {
34+
design: false,
35+
develop: false,
36+
data_science: false
37+
};
38+
}
39+
40+
function toggleSkill(track, skill) {
41+
if (!vm.selectedSkills[track][skill]) {
42+
vm.selectedSkills[track][skill] = true;
43+
vm.selectedSkills[track].numSkills += 1;
44+
45+
} else {
46+
vm.selectedSkills[track][skill] = false;
47+
vm.selectedSkills[track].numSkills -= 1;
48+
}
1349
}
1450
}
1551
})();

‎app/skill-picker/skill-picker.jade

Lines changed: 48 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,56 @@
11
.skill-picker-container
22
h1 Welcome to Topcoder!
33

4-
h4 Complete Your Profile, get more attention.
4+
p Pick your tracks and select relevant skills. This helps to get you into the community and find appropriate competitions.
55

66
.track-picker
7-
h4.field-title What type of work are you looking for?
7+
h1 Tell us what you do
88

9-
.select-tracks
10-
.track-button(ng-class="{'selected-track': vm.tracks.design}", ng-click="vm.toggleTrack('design')") Design
9+
.select-tracks.mobile
10+
.track-section
11+
.track-button(ng-class="{'button-expanded': vm.dropdown.design}")
12+
.track-checkbox
13+
input(type="checkbox", id="checkbox-design-mobile", ng-checked="vm.tracks.design")
1114

12-
.track-button(ng-class="{'selected-track': vm.tracks.develop}", ng-click="vm.toggleTrack('develop')") Development
15+
label(for="checkbox-design-mobile", ng-click="vm.tracks.design = !vm.tracks.design", ng-class="{ 'checked-track': vm.tracks.design }") #[span] Design
1316

14-
.track-button(ng-class="{'selected-track': vm.tracks.data_science}", ng-click="vm.toggleTrack('data_science')") Data Science
17+
span.subscript [{{vm.selectedSkills.design.numSkills || 0}}]
18+
19+
.dropdown-mobile(ng-click="vm.dropdown.design = !vm.dropdown.design")
20+
i.fa(ng-class="{'fa-caret-down': !vm.dropdown.design, 'fa-caret-up': vm.dropdown.design}")
21+
22+
.track-skills(ng-show="vm.dropdown.design")
23+
.track-skill(ng-repeat="skill in vm.skills.design", ng-click="vm.toggleSkill('design', skill)", ng-class="{'skill-selected': vm.selectedSkills.design[skill]}") {{skill}}
24+
25+
26+
.track-button(ng-class="{'button-expanded': vm.dropdown.develop}")
27+
.track-checkbox
28+
input(type="checkbox", id="checkbox-develop-mobile", ng-checked="vm.tracks.develop")
29+
30+
label(for="checkbox-develop-mobile", ng-click="vm.tracks.develop = !vm.tracks.develop", ng-class="{ 'checked-track': vm.tracks.develop }") #[span] Development
31+
32+
span.subscript [{{vm.selectedSkills.develop.numSkills || 0}}]
33+
34+
.dropdown-mobile(ng-click="vm.dropdown.develop = !vm.dropdown.develop")
35+
i.fa(ng-class="{'fa-caret-down': !vm.dropdown.develop, 'fa-caret-up': vm.dropdown.develop}")
36+
37+
.track-skills(ng-show="vm.dropdown.develop")
38+
.track-skill(ng-repeat="skill in vm.skills.develop", ng-click="vm.toggleSkill('develop', skill)", ng-class="{'skill-selected': vm.selectedSkills.develop[skill]}") {{skill}}
39+
40+
.track-button(ng-class="{'button-expanded': vm.dropdown.data_science}")
41+
.track-checkbox
42+
input(type="checkbox", id="checkbox-data-science-mobile", ng-checked="vm.tracks.data_science")
43+
44+
label(for="checkbox-data-science-mobile", ng-click="vm.tracks.data_science = !vm.tracks.data_science", ng-class="{ 'checked-track': vm.tracks.data_science }") #[span] Data Science
45+
46+
span.subscript [{{vm.selectedSkills.data_science.numSkills || 0}}]
47+
48+
.dropdown-mobile(ng-click="vm.dropdown.data_science = !vm.dropdown.data_science")
49+
i.fa(ng-class="{'fa-caret-down': !vm.dropdown.data_science, 'fa-caret-up': vm.dropdown.data_science}")
50+
51+
.track-skills(ng-show="vm.dropdown.data_science")
52+
.track-skill(ng-repeat="skill in vm.skills.data_science", ng-click="vm.toggleSkill('data_science', skill)", ng-class="{'skill-selected': vm.selectedSkills.data_science[skill]}") {{skill}}
53+
54+
p Please pick at least one track, you can always change it later.
55+
56+
button(type="button", ng-class="{'enabled-button': vm.tracks.design || vm.tracks.develop || vm.tracks.data_science}") Done

‎app/skill-picker/skill-picker.routes.js

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,24 @@
1111
'skillPicker': {
1212
parent: 'root',
1313
url: '/skillpicker/',
14-
templateUrl: 'skill-picker/skill-picker.html',
15-
controller: 'SkillPickerController',
16-
controllerAs: 'vm',
1714
data: {
1815
authRequired: true,
1916
UIRefresh: true,
2017
title: 'Skill Picker'
18+
},
19+
views: {
20+
'header@': {
21+
templateUrl: 'layout/header/account-header.html'
22+
},
23+
'container@': {
24+
templateUrl: 'skill-picker/skill-picker.html',
25+
controller: 'SkillPickerController',
26+
controllerAs: 'vm'
27+
},
28+
'footer@': {
29+
// no footer
30+
template: ''
31+
}
2132
}
2233
}
2334
};

‎app/topcoder.constants.js

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,29 @@
11
angular.module("CONSTANTS", [])
22

33
.constant("CONSTANTS", {
4-
"API_URL": "https://api.topcoder-qa.com/v3",
5-
"API_URL_V2": "https://api.topcoder-qa.com/v2",
4+
"API_URL": "https://api.topcoder-dev.com/v3",
5+
"API_URL_V2": "https://api.topcoder-dev.com/v2",
66
"ASSET_PREFIX": "",
7-
"auth0Callback": "https://api.topcoder-qa.com/pub/callback.html",
8-
"auth0Domain": "topcoder-qa.auth0.com",
9-
"BLOG_LOCATION": "https://www.topcoder-qa.com/feed/?post_type=blog",
10-
"clientId": "EVOgWZlCtIFlbehkq02treuRRoJk12UR",
11-
"COMMUNITY_URL": "//community.topcoder-qa.com",
12-
"domain": "topcoder-qa.com",
13-
"ENVIRONMENT": "qa",
14-
"FORUMS_APP_URL": "forums.topcoder-qa.com",
15-
"HELP_APP_URL": "help.topcoder-qa.com",
16-
"MAIN_URL": "https://www.topcoder-qa.com",
7+
"auth0Callback": "https://api.topcoder-dev.com/pub/callback.html",
8+
"auth0Domain": "topcoder-dev.auth0.com",
9+
"BLOG_LOCATION": "https://www.topcoder-dev.com/feed/?post_type=blog",
10+
"clientId": "JFDo7HMkf0q2CkVFHojy3zHWafziprhT",
11+
"COMMUNITY_URL": "//community.topcoder-dev.com",
12+
"domain": "topcoder-dev.com",
13+
"ENVIRONMENT": "development",
14+
"FORUMS_APP_URL": "forums.topcoder-dev.com",
15+
"HELP_APP_URL": "help.topcoder-dev.com",
16+
"MAIN_URL": "https://www.topcoder-dev.com",
1717
"NEW_CHALLENGES_URL": "https://www.topcoder.com/challenges/develop/upcoming/",
1818
"NEW_RELIC_APPLICATION_ID": "",
19-
"PHOTO_LINK_LOCATION": "https://community.topcoder-qa.com",
19+
"PHOTO_LINK_LOCATION": "https://community.topcoder-dev.com",
2020
"submissionDownloadPath": "/review/actions/DownloadContestSubmission?uid=",
2121
"SWIFT_PROGRAM_ID": 3445,
22-
"SWIFT_PROGRAM_URL": "apple.topcoder-qa.com",
22+
"SWIFT_PROGRAM_URL": "apple.topcoder-dev.com",
2323
"UPCOMING_SRMS_URL": "https://www.topcoder.com/challenges/data/upcoming/",
2424
"EVENT_USER_LOGGED_IN": "user_logged_in",
2525
"EVENT_USER_LOGGED_OUT": "user_logged_out",
26+
"EVENT_PROFILE_UPDATED": "profile_updated",
2627
"STATE_LOADING": "loading",
2728
"STATE_ERROR": "error",
2829
"STATE_READY": "ready"

‎assets/css/skill-picker/skill-picker.scss

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,135 @@
11
@import '../partials/combined';
22

33
.skill-picker-container {
4+
display: flex;
5+
flex-direction: column;
6+
justify-content: center;
47

8+
h1 {
9+
margin-bottom: 20px;
10+
font-size: 18px;
11+
font-weight: bold;
12+
text-align: center;
13+
}
14+
15+
p {
16+
font-size: 15px;
17+
padding: 5px 20px;
18+
}
19+
20+
.track-picker {
21+
h1 {
22+
margin-top: 15px;
23+
margin-bottom: 10px;
24+
}
25+
26+
.select-tracks {
27+
.track-selection {
28+
29+
}
30+
.track-button {
31+
display: flex;
32+
flex-direction: row;
33+
justify-content: space-between;
34+
align-items: center;
35+
margin-top: 5px;
36+
height: 55px;
37+
background-color: $white;
38+
border-radius: 5px;
39+
40+
&.button-expanded {
41+
border-bottom-right-radius: 0;
42+
border-bottom-left-radius: 0;
43+
}
44+
}
45+
46+
.track-checkbox {
47+
margin-left: 15px;
48+
49+
input[type="checkbox"] {
50+
display: none;
51+
}
52+
53+
label {
54+
font-size: 18px;
55+
text-transform: uppercase;
56+
color: #b7b7b7;
57+
cursor: pointer;
58+
59+
60+
span {
61+
display: inline-block;
62+
margin-right: 5px;
63+
vertical-align: middle;
64+
width: 17px;
65+
height: 19px;
66+
background: url(/images/checkbox-sprite.png) -17px top no-repeat;
67+
cursor: pointer;
68+
}
69+
&.checked-track {
70+
color: #3d3d3d;
71+
72+
span {
73+
background: url(/images/checkbox-sprite.png) left top no-repeat;
74+
}
75+
}
76+
}
77+
78+
.subscript {
79+
position: relative;
80+
margin-left: 3px;
81+
top: +0.25em;
82+
font-size: 80%;
83+
letter-spacing: 3px;
84+
color: #7f7f7f;
85+
}
86+
}
87+
}
88+
89+
.mobile {
90+
.dropdown-mobile {
91+
width: 55px;
92+
height: 40px;
93+
line-height: 45px;
94+
text-align: center;
95+
color: #7f7f7f;
96+
border-left: solid 1px #b7b7b7;
97+
98+
i {
99+
font-size: 1.75em;
100+
}
101+
}
102+
103+
.track-skills {
104+
display: flex;
105+
flex-flow: row wrap;
106+
padding: 10px 15px 20px;
107+
background-color: $white;
108+
border-top: 1px solid #f0f0f0;
109+
border-bottom-right-radius: 5px;
110+
border-bottom-left-radius: 5px;
111+
112+
.track-skill {
113+
margin-right: 5px;
114+
margin-bottom: 5px;
115+
border-radius: 5px;
116+
background-color: #f0f0f0;
117+
padding: 5px 10px;
118+
}
119+
120+
.skill-selected {
121+
background-color: #0096ff;
122+
color: $white;
123+
}
124+
}
125+
}
126+
127+
button {
128+
@include ui-submit-button;
129+
130+
&.enabled-button {
131+
@include ui-enabled-button;
132+
}
133+
}
134+
}
5135
}

0 commit comments

Comments
 (0)