From 2ed6574d01ce7ab6ac36e9e12977f623ad99f8cb Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 2 Oct 2015 14:04:22 -0700 Subject: [PATCH 1/3] SUP-1754, [Registration] Fix UX and UI skill picker issues Fixed issues mentioned in for 3.14.43 screenshot except the icons. Not able to extract the icons without outline from designs. --- .../track-toggle/track-toggle.directive.jade | 25 ++++---- app/skill-picker/skill-picker.jade | 4 +- assets/css/directives/track-toggle.scss | 61 ++++++++++++------- assets/css/skill-picker/skill-picker.scss | 20 +++--- 4 files changed, 64 insertions(+), 46 deletions(-) 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/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; From c35cda9bdc6774de4ee9a7b15273295a73dba60f Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 2 Oct 2015 15:57:54 -0700 Subject: [PATCH 2/3] SUP-1754, [Registration] Fix UX and UI skill picker issues Added image for responsive web design skill --- assets/images/skills/id-322.svg | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 assets/images/skills/id-322.svg 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 From 7e7d1b68f8336cbe7ca8b2604b3d2cb46d5b24ed Mon Sep 17 00:00:00 2001 From: vikasrohit Date: Fri, 2 Oct 2015 17:30:31 -0700 Subject: [PATCH 3/3] SUP-1754, [Registration] Fix UX and UI skill picker issues Move to top of the dashboard after saving on skill picker. --- app/topcoder.controller.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) 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() {