diff --git a/app/directives/track-toggle/track-toggle.directive.jade b/app/directives/track-toggle/track-toggle.directive.jade index f125c8aac..a34b61039 100644 --- a/app/directives/track-toggle/track-toggle.directive.jade +++ b/app/directives/track-toggle/track-toggle.directive.jade @@ -1,13 +1,19 @@ .track(ng-repeat="track in ['DESIGN', 'DEVELOP', 'DATA_SCIENCE']") hr(class="{{!$index && 'first'}}") - .top - .title(ng-class="{'disabled': !tracks[track]}") - img(ng-if="track == 'DATA_SCIENCE'", src="/images/ico-track-data-outline.svg") - img(ng-if="track == 'DEVELOP'", src="/images/ico-track-develop-outline.svg") - img(ng-if="track == 'DESIGN'", src="/images/ico-track-design-outline.svg") + .content + .track-details + .icon(ng-class="{'disabled': !tracks[track]}") + img(ng-if="track == 'DATA_SCIENCE'", src="/images/ico-track-data-outline.svg") + img(ng-if="track == 'DEVELOP'", src="/images/ico-track-develop-outline.svg") + img(ng-if="track == 'DESIGN'", src="/images/ico-track-design-outline.svg") - span {{track | track}} + .text + span.title {{track | track}} + .description + span(ng-if="track == 'DESIGN'") Website, mobile, and product design; UI and UX + span(ng-if="track == 'DEVELOP'") Software architecture, component assembly, application developent, and bug hunting + span(ng-if="track == 'DATA_SCIENCE'") Algorithms and data structures, statistical analysis .onoffswitch input.onoffswitch-checkbox(type='checkbox', name='onoffswitch', checked='', ng-model="tracks[track]", id="{{track}}-onoffswitch") @@ -15,11 +21,4 @@ span.onoffswitch-inner span.onoffswitch-switch - - .bottom - .description - span(ng-if="track == 'DESIGN'") Website, mobile, and product design; UI and UX - span(ng-if="track == 'DEVELOP'") Software architecture, component assembly, application developent, and bug hunting - span(ng-if="track == 'DATA_SCIENCE'") Algorithms and data structures, statistical analysis - hr diff --git a/app/skill-picker/skill-picker.jade b/app/skill-picker/skill-picker.jade index ed9dc5e86..3630af143 100644 --- a/app/skill-picker/skill-picker.jade +++ b/app/skill-picker/skill-picker.jade @@ -1,11 +1,11 @@ .skill-picker-container - h1 Welcome to Topcoder! + h1 Welcome to Topcoder 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. .tracks-container .title tracks - .description Topcoder’s three categories of challenges… please pick at least one based on your skills and interests. + .description Topcoder's three categories of challenges… please pick at least one based on your skills and interests. .tracks track-toggle(tracks="vm.tracks") diff --git a/app/topcoder.controller.js b/app/topcoder.controller.js index a4cb8e791..177d52e22 100644 --- a/app/topcoder.controller.js +++ b/app/topcoder.controller.js @@ -3,9 +3,9 @@ angular.module('topcoder').controller('TopcoderController', TopcoderController); - TopcoderController.$inject = ['NotificationService', '$rootScope', 'CONSTANTS']; + TopcoderController.$inject = ['NotificationService', '$rootScope', '$document', 'CONSTANTS']; - function TopcoderController(NotificationService, $rootScope, CONSTANTS) { + function TopcoderController(NotificationService, $rootScope, $document, CONSTANTS) { var vm = this; vm.menuVisible = false; @@ -15,6 +15,9 @@ $rootScope.$on('$stateChangeStart', function() { vm.menuVisible = false; }); + $rootScope.$on('$stateChangeSuccess', function(evt, toState, toParams, fromState, fromParams) { + $document[0].body.scrollTop = $document[0].documentElement.scrollTop = 0; + }); // TODO - enable this once we support notificaitons // $rootScope.$on(CONSTANTS.EVENT_USER_LOGGED_IN, function() { diff --git a/assets/css/directives/track-toggle.scss b/assets/css/directives/track-toggle.scss index 0d27a22c6..88a23298b 100644 --- a/assets/css/directives/track-toggle.scss +++ b/assets/css/directives/track-toggle.scss @@ -1,3 +1,5 @@ +@import '../partials/combined'; + track-toggle { hr { margin-top: 15px; @@ -11,28 +13,42 @@ track-toggle { display: flex; flex-direction: column; align-items: left; - .top { + .content { display: flex; flex-direction: row; justify-content: space-between; + + .track-details { + display: flex; + flex-direction: row; + align-items: center; + padding-left: 30px; + + .icon { + &.disabled { + color: #b7b7b7; + } + img { + height: 32px; + width: 35px; + } + span { + font-family: 'Sofia Pro'; + font-size: 22px; + } + } + } + } + .text { + margin-left: 25px; .title { + font-size: 22px; + line-height: 28px; + @include sofia-pro-regular; &.disabled { color: #b7b7b7; } - img { - height: 25px; - width: 25px; - margin-bottom: -4px; - margin-right: 3px; - } - span { - font-family: 'Sofia Pro'; - font-size: 22px; - } } - } - .bottom { - margin-top: 10px; .description { font-family: 'Source Sans Pro'; font-size: 13px; @@ -51,22 +67,25 @@ track-toggle { } } .onoffswitch { - position: relative; width: 60px; + position: relative; width: 45px; + height: 24px; + align-self: center; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; + margin-right: 30px; } .onoffswitch-checkbox { display: none; } .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; - border-radius: 36px; + border-radius: 12px; } .onoffswitch-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner:before, .onoffswitch-inner:after { - display: block; float: left; width: 50%; height: 26px; padding: 0; line-height: 26px; + display: block; float: left; width: 50%; height: 24px; padding: 0; line-height: 24px; font-size: 15px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; } @@ -84,14 +103,14 @@ track-toggle { text-align: right; } .onoffswitch-switch { - display: block; width: 19px; margin: 3.5px; + display: block; width: 19px; margin: 2.5px; height: 19px; background: #FFFFFF; position: absolute; top: 0; bottom: 0; - margin-top: 3.45px; - right: 30px; + margin-top: 2.45px; + right: 20px; border: none; - border-radius: 36px; + border-radius: 12px; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { diff --git a/assets/css/skill-picker/skill-picker.scss b/assets/css/skill-picker/skill-picker.scss index e99c127a2..99fcbc8cb 100644 --- a/assets/css/skill-picker/skill-picker.scss +++ b/assets/css/skill-picker/skill-picker.scss @@ -20,6 +20,7 @@ margin: 20px; font-size: 28px; @include sofia-pro-bold; + text-transform: uppercase; } .instruction { margin-bottom: 25px; @@ -30,21 +31,23 @@ .tracks-container { width: 100%; - .title { + >.title { @include sofia-pro-regular; text-transform: uppercase; font-size: 18px; padding-bottom: 10px; } - .description { - @include source-sans-italic; + >.description { + @include source-sans-regular; color: #A3A3AE; font-size: 13px; + line-height: 18px; // border-bottom: 1px solid #A3A3AE; - padding-bottom: 5px; } .tracks { - margin: 0 30px; + margin-top: 10px; + .track { + } } } @@ -59,6 +62,7 @@ @include source-sans-italic; color: #A3A3AE; font-size: 13px; + line-height: 20px; border-bottom: 1px solid #A3A3AE; padding-bottom: 5px; } @@ -137,11 +141,7 @@ p { font-size: 15px; - padding: 5px 20px; - - &.instruction { - max-width: 440px; - } + padding: 5px 0px; } .button-l{ margin: 30px; diff --git a/assets/images/skills/id-322.svg b/assets/images/skills/id-322.svg new file mode 100644 index 000000000..e152b4ba3 --- /dev/null +++ b/assets/images/skills/id-322.svg @@ -0,0 +1,32 @@ + + + + icons/skills/id 321 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file