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

Commit 2cdca0c

Browse files
author
vikasrohit
committed
Merge pull request #303 from appirio-tech/fixes/vikas-postbeta-week1
SUP-1754, [Registration] Fix UX and UI skill picker issues
2 parents 0d7e248 + 7e7d1b6 commit 2cdca0c

File tree

6 files changed

+101
-48
lines changed

6 files changed

+101
-48
lines changed

‎app/directives/track-toggle/track-toggle.directive.jade

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,24 @@
11
.track(ng-repeat="track in ['DESIGN', 'DEVELOP', 'DATA_SCIENCE']")
22
hr(class="{{!$index && 'first'}}")
33

4-
.top
5-
.title(ng-class="{'disabled': !tracks[track]}")
6-
img(ng-if="track == 'DATA_SCIENCE'", src="/images/ico-track-data-outline.svg")
7-
img(ng-if="track == 'DEVELOP'", src="/images/ico-track-develop-outline.svg")
8-
img(ng-if="track == 'DESIGN'", src="/images/ico-track-design-outline.svg")
4+
.content
5+
.track-details
6+
.icon(ng-class="{'disabled': !tracks[track]}")
7+
img(ng-if="track == 'DATA_SCIENCE'", src="/images/ico-track-data-outline.svg")
8+
img(ng-if="track == 'DEVELOP'", src="/images/ico-track-develop-outline.svg")
9+
img(ng-if="track == 'DESIGN'", src="/images/ico-track-design-outline.svg")
910

10-
span {{track | track}}
11+
.text
12+
span.title {{track | track}}
13+
.description
14+
span(ng-if="track == 'DESIGN'") Website, mobile, and product design; UI and UX
15+
span(ng-if="track == 'DEVELOP'") Software architecture, component assembly, application developent, and bug hunting
16+
span(ng-if="track == 'DATA_SCIENCE'") Algorithms and data structures, statistical analysis
1117

1218
.onoffswitch
1319
input.onoffswitch-checkbox(type='checkbox', name='onoffswitch', checked='', ng-model="tracks[track]", id="{{track}}-onoffswitch")
1420
label.onoffswitch-label(for='{{track}}-onoffswitch')
1521
span.onoffswitch-inner
1622
span.onoffswitch-switch
1723

18-
19-
.bottom
20-
.description
21-
span(ng-if="track == 'DESIGN'") Website, mobile, and product design; UI and UX
22-
span(ng-if="track == 'DEVELOP'") Software architecture, component assembly, application developent, and bug hunting
23-
span(ng-if="track == 'DATA_SCIENCE'") Algorithms and data structures, statistical analysis
24-
2524
hr

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

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

44
p.instruction Hi {{vm.username}}! Your account is now active. To Help other members get to know you, select the tracks in which you're interested, and specify some of your skills. You can edit this information later on your Profile.
55

66
.tracks-container
77
.title tracks
8-
.description Topcoder’s three categories of challenges… please pick at least one based on your skills and interests.
8+
.description Topcoder's three categories of challenges… please pick at least one based on your skills and interests.
99
.tracks
1010
track-toggle(tracks="vm.tracks")
1111

‎app/topcoder.controller.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33

44
angular.module('topcoder').controller('TopcoderController', TopcoderController);
55

6-
TopcoderController.$inject = ['NotificationService', '$rootScope', 'CONSTANTS'];
6+
TopcoderController.$inject = ['NotificationService', '$rootScope', '$document', 'CONSTANTS'];
77

8-
function TopcoderController(NotificationService, $rootScope, CONSTANTS) {
8+
function TopcoderController(NotificationService, $rootScope, $document, CONSTANTS) {
99
var vm = this;
1010
vm.menuVisible = false;
1111

@@ -15,6 +15,9 @@
1515
$rootScope.$on('$stateChangeStart', function() {
1616
vm.menuVisible = false;
1717
});
18+
$rootScope.$on('$stateChangeSuccess', function(evt, toState, toParams, fromState, fromParams) {
19+
$document[0].body.scrollTop = $document[0].documentElement.scrollTop = 0;
20+
});
1821

1922
// TODO - enable this once we support notificaitons
2023
// $rootScope.$on(CONSTANTS.EVENT_USER_LOGGED_IN, function() {

‎assets/css/directives/track-toggle.scss

Lines changed: 40 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import '../partials/combined';
2+
13
track-toggle {
24
hr {
35
margin-top: 15px;
@@ -11,28 +13,42 @@ track-toggle {
1113
display: flex;
1214
flex-direction: column;
1315
align-items: left;
14-
.top {
16+
.content {
1517
display: flex;
1618
flex-direction: row;
1719
justify-content: space-between;
20+
21+
.track-details {
22+
display: flex;
23+
flex-direction: row;
24+
align-items: center;
25+
padding-left: 30px;
26+
27+
.icon {
28+
&.disabled {
29+
color: #b7b7b7;
30+
}
31+
img {
32+
height: 32px;
33+
width: 35px;
34+
}
35+
span {
36+
font-family: 'Sofia Pro';
37+
font-size: 22px;
38+
}
39+
}
40+
}
41+
}
42+
.text {
43+
margin-left: 25px;
1844
.title {
45+
font-size: 22px;
46+
line-height: 28px;
47+
@include sofia-pro-regular;
1948
&.disabled {
2049
color: #b7b7b7;
2150
}
22-
img {
23-
height: 25px;
24-
width: 25px;
25-
margin-bottom: -4px;
26-
margin-right: 3px;
27-
}
28-
span {
29-
font-family: 'Sofia Pro';
30-
font-size: 22px;
31-
}
3251
}
33-
}
34-
.bottom {
35-
margin-top: 10px;
3652
.description {
3753
font-family: 'Source Sans Pro';
3854
font-size: 13px;
@@ -51,22 +67,25 @@ track-toggle {
5167
}
5268
}
5369
.onoffswitch {
54-
position: relative; width: 60px;
70+
position: relative; width: 45px;
71+
height: 24px;
72+
align-self: center;
5573
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
74+
margin-right: 30px;
5675
}
5776
.onoffswitch-checkbox {
5877
display: none;
5978
}
6079
.onoffswitch-label {
6180
display: block; overflow: hidden; cursor: pointer;
62-
border-radius: 36px;
81+
border-radius: 12px;
6382
}
6483
.onoffswitch-inner {
6584
display: block; width: 200%; margin-left: -100%;
6685
transition: margin 0.3s ease-in 0s;
6786
}
6887
.onoffswitch-inner:before, .onoffswitch-inner:after {
69-
display: block; float: left; width: 50%; height: 26px; padding: 0; line-height: 26px;
88+
display: block; float: left; width: 50%; height: 24px; padding: 0; line-height: 24px;
7089
font-size: 15px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
7190
box-sizing: border-box;
7291
}
@@ -84,14 +103,14 @@ track-toggle {
84103
text-align: right;
85104
}
86105
.onoffswitch-switch {
87-
display: block; width: 19px; margin: 3.5px;
106+
display: block; width: 19px; margin: 2.5px;
88107
height: 19px;
89108
background: #FFFFFF;
90109
position: absolute; top: 0; bottom: 0;
91-
margin-top: 3.45px;
92-
right: 30px;
110+
margin-top: 2.45px;
111+
right: 20px;
93112
border: none;
94-
border-radius: 36px;
113+
border-radius: 12px;
95114
transition: all 0.3s ease-in 0s;
96115
}
97116
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
margin: 20px;
2121
font-size: 28px;
2222
@include sofia-pro-bold;
23+
text-transform: uppercase;
2324
}
2425
.instruction {
2526
margin-bottom: 25px;
@@ -30,21 +31,23 @@
3031

3132
.tracks-container {
3233
width: 100%;
33-
.title {
34+
>.title {
3435
@include sofia-pro-regular;
3536
text-transform: uppercase;
3637
font-size: 18px;
3738
padding-bottom: 10px;
3839
}
39-
.description {
40-
@include source-sans-italic;
40+
>.description {
41+
@include source-sans-regular;
4142
color: #A3A3AE;
4243
font-size: 13px;
44+
line-height: 18px;
4345
// border-bottom: 1px solid #A3A3AE;
44-
padding-bottom: 5px;
4546
}
4647
.tracks {
47-
margin: 0 30px;
48+
margin-top: 10px;
49+
.track {
50+
}
4851
}
4952
}
5053

@@ -59,6 +62,7 @@
5962
@include source-sans-italic;
6063
color: #A3A3AE;
6164
font-size: 13px;
65+
line-height: 20px;
6266
border-bottom: 1px solid #A3A3AE;
6367
padding-bottom: 5px;
6468
}
@@ -137,11 +141,7 @@
137141

138142
p {
139143
font-size: 15px;
140-
padding: 5px 20px;
141-
142-
&.instruction {
143-
max-width: 440px;
144-
}
144+
padding: 5px 0px;
145145
}
146146
.button-l{
147147
margin: 30px;

‎assets/images/skills/id-322.svg

Lines changed: 32 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)