Merge branch 'dev' into feature/empty-state-directive

* dev: (41 commits)
  SUP-2241, Dashboard--> "This challenge is currently paused" should have padding on challenge card.
  #60 Styling "Login" and "Register" buttons in logged out state
  6 or so more fixes
  Nav: Blue arrow for active nav item is not aligned
  fixed hover for skills on profile
  a fix for image upload styling
  fixing stackoverlow integration
  fixing image
  checkbox label size, removed extra images
  navigation fixed, new icons, new track icons
  Fixed mobile layout issue with challenges section
  another potential input fix
  SUP-2241, Dashboard--> "This challenge is currently paused" should have padding on challenge card.
  Fixed Sticky directive
  using v3 user endpoint
  SUP-2143, Dashboard--> Texts are overlapping on my challenges on mobile device.
  input test
  changes round 2
  first round of changes
  fixing test
  ...

Conflicts:
	app/my-dashboard/my-challenges/my-challenges.controller.js

Author: vikasrohit

app/directives/challenge-tile/challenge-tile.directive.jade

@@ -29,7 +29,9 @@
         .registered(ng-switch-when="Registered") Registered
 
     // Only show if not data science track
-    p.roles(ng-hide="challenge.track === 'DATA_SCIENCE'") #[span Role:  ] #[span {{challenge.userDetails.roles | listRoles}}]
+    p.roles 
+      span(ng-hide="challenge.track === 'DATA_SCIENCE'") 
+        #[span Role:  ] #[span {{challenge.userDetails.roles | listRoles}}]
 
   .completed-challenge(
     ng-show="challenge.status === 'COMPLETED' || challenge.status === 'PAST'",
@@ -61,7 +63,9 @@
       design-challenge-user-place(challenge="challenge", view="view")
 
     // Only show if not data science track
-    p.roles(ng-hide="challenge.track === 'DATA_SCIENCE'") #[span Role:  ] #[span {{challenge.userDetails.roles | listRoles}}]
+    p.roles
+      span(ng-hide="challenge.track === 'DATA_SCIENCE'") 
+        #[span Role:  ] #[span {{challenge.userDetails.roles | listRoles}}]
 
 .challenge.list-view(ng-show="view=='list'", ng-class="challenge.track")
   .active-challenge(ng-show="challenge.status === 'ACTIVE'")

app/directives/external-account/external-account.directive.jade

@@ -1,4 +1,4 @@
-.ext-tile(ng-repeat="account in accountList | orderBy:'order'", ng-click="!account.disabled && !readOnly && handleClick(account.provider, account.status)", ng-class="{'connected': account.status === 'linked', 'connecting': account.status === 'pending', 'disabled': account.disabled, 'enabled': !account.disabled, 'read-only': readOnly}")
+.ext-tile(ng-repeat="account in accountList | orderBy:'order'", ng-click="!account.disabled && !readOnly && handleClick(account.provider, account.status)", ng-class="{'connected': account.status === 'linked', 'connecting': account.status === 'pending', 'disabled': account.disabled, 'enabled': !account.disabled, 'read-only': readOnly, 'connect': account.status === 'unlinked' && !account.disabled}")
   .external-account-box(ng-class="account.colorClass")
     i.fa(ng-class="account.className")
 

app/directives/header/header-menu-item.directive.js

@@ -18,7 +18,8 @@
 
         $scope.isActive = function() {
           if (window.location.pathname == href || $state.is(sref)) {
-            NavService.selectedTopLevelItem = NavService.hrefs[href] || NavService.hrefs[sref.slice(0, sref.indexOf('.'))];
+            NavService.selectedTopLevelItem = NavService.getParent(href || sref);
+              //NavService.hrefs[href] || NavService.hrefs[sref.slice(0, sref.indexOf('.'))];
 
             return true;
           }

app/directives/page-state-header/page-state-header.directive.jade

@@ -2,16 +2,18 @@
   header
     .page-info
       h1 {{pageTitle}}
+      div(ng-transclude)
     .info
       .pic
         a(ui-sref="profile.about({userHandle: vm.profile.handle})")
           img.profile-circle(ng-if="vm.profile.photoURL", ng-src="{{vm.profile.photoURL}}")
           img.profile-circle(ng-if="!vm.profile.photoURL", src="/images/ico-user-default.svg")
+            
       .user-stats(id="metrics", ng-hide="vm.loading")
         .handle(style="color:{{vm.handleColor}};") {{vm.profile.handle}}
         .money-earned(ng-hide="hideMoney")
           p.number(ng-bind="vm.moneyEarned | currency:'$':0")
           p Earned
         .back-link(ng-if="showBackLink && vm.previousStateLabel")
-          a(ui-sref="{{vm.previousStateName}}") Back to {{vm.previousStateLabel}}
+          a(ng-click="vm.backHandler()") Back to {{vm.previousStateLabel}}
 

app/directives/page-state-header/page-state-header.directive.js

@@ -5,19 +5,20 @@
     return {
       restrict: 'E',
       templateUrl: 'directives/page-state-header/page-state-header.directive.html',
+      transclude: true,
       scope: {
         handle: '@',
         pageTitle: '@',
         showBackLink: '=',
         hideMoney: '=',
         defaultState: '@'
       },
-      controller: ['$scope', 'NotificationService', 'ProfileService', '$log', pageStateHeader],
+      controller: ['$scope', 'NotificationService', 'ProfileService', '$log', '$state', pageStateHeader],
       controllerAs: "vm"
     };
   });
 
-  function pageStateHeader($scope, NotificationService, ProfileService, $log) {
+  function pageStateHeader($scope, NotificationService, ProfileService, $log, $state) {
     var vm = this;
     vm.handle = $scope.handle;
     vm.profile = null;
@@ -27,7 +28,7 @@
     vm.previousStateLabel = null;
     vm.previousState = null;
     vm.showBackLink = _.get($scope, 'showBackLink', false);
-
+    vm.backHandler = backHandler;
     activate();
 
     function activate() {
@@ -46,7 +47,7 @@
       if (vm.previousStateName) {
         if (vm.previousStateName === 'dashboard') {
           vm.previousStateLabel = 'Dashboard';
-        } else if (vm.previousStateName === 'profile') {
+        } else if (vm.previousStateName.indexOf('profile') > -1) {
           vm.previousStateLabel = 'Profile';
         }
       }
@@ -63,6 +64,21 @@
       });
     }
 
+    function backHandler() {
+      var _params = {};
+      var _name = vm.previousStateName;
+      switch (vm.previousStateName) {
+        case 'profile.about':
+          _params = {userHandle: vm.profile.handle};
+          break;
+        case 'dashboard':
+        default:
+          _name = 'dashboard';
+          break;
+      }
+      $state.go(_name, _params);
+    }
+
     function displayMoneyEarned(handle) {
       ProfileService.getUserFinancials(handle)
       .then(function(financials) {

app/directives/profile-widget/profile-widget.jade

@@ -13,16 +13,16 @@
     h3.tenure(ng-if="profile.startMonth")
       | Member Since {{profile.startMonth}}
 
-    a.tc-btn.tc-btn-m.edit(ng-show="editProfileLink", ui-sref="settings.profile") Edit Profile
+    a.tc-btn.tc-btn-s.edit(ng-show="editProfileLink", ui-sref="settings.profile") Edit Profile
 
-  .tracks-links
+  .tracks-links(ng-if="profile.tracks && profile.tracks.length > 0")
     .tracks
       .track(ng-repeat="track in (profile.tracks)", ng-click="profileVm.scrollTo(track)")
         div(class="track-icon {{profileVm.imgMap[track]}}-icon")
           div
         .text {{track | role}}
 
-  p.description {{profile.description}}
+  p.description(ng-if="profile.description") {{profile.description}}
 
   .links
     a.badges.link(ng-click="profileVm.showBadges()", ng-show="profileVm.profile.badges.Achievements.length > 0")

app/directives/skill-tile/skill-tile.directive.jade

@@ -1,4 +1,4 @@
-a(ng-click="enableHide && toggle()", ng-class="{'hidden': skill.hidden, 'new': skill.isNew}")
+a(ng-click="enableHide && toggle()", ng-class="{'skill-hidden': skill.hidden, 'new': skill.isNew}")
   .skill-icon(ng-switch="skill.category")
     .remove-indicator
 
@@ -10,4 +10,4 @@ a(ng-click="enableHide && toggle()", ng-class="{'hidden': skill.hidden, 'new': s
 
     img(ng-switch-when="DATA_SCIENCE", ng-src="{{ASSET_PREFIX}}images/skills/id-{{skill.tagId}}.svg", fallback-src="/images/skills/id-data.svg")
 
-  .name {{skill.tagName}}
+  .name {{skill.tagName | characters: 20:false}}

app/directives/tc-endless-paginator/tc-endless-paginator.jade

@@ -1,4 +1,4 @@
 div.paginator
   tc-section(state="state")
-    button.tc-btn(ng-show="pageParams.totalCount > pageParams.currentCount", ng-click="loadMore()") More
+    button.tc-btn(ng-show="pageParams.totalCount > pageParams.currentCount", ng-click="loadMore()") Load More
 

app/directives/tc-sticky/tc-sticky.directive.jade

@@ -0,0 +1,72 @@
+
+(function() {
+  'use strict';
+
+  angular.module('tcUIComponents').directive('tcSticky', ['CONSTANTS', '$window', tcSticky]);
+
+  function tcSticky(CONSTANTS, $window) {
+    return {
+        restrict: 'A',
+        link: function(scope, element) {
+            scope.width = element.prop('offsetWidth');
+            var elWidth = scope.width + 'px',
+                elChild = angular.element(element[0].querySelector(':first-child'));
+                // elChild.css('width', elWidth);
+            var hitBottom = false;
+            angular.element($window).bind("scroll", function() {
+                var affixElement = document.getElementById('affix'),
+                    xPosition = 0,
+                    yPosition = 0;
+                function getPosition(element) {
+                    while(element) {
+                        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
+                        element = element.offsetParent;
+                    }
+                }
+                getPosition(affixElement);
+                var height = angular.element(affixElement).prop('offsetHeight');
+                var top = angular.element(affixElement).prop('offsetTop');
+                // console.log(yPosition);
+                // console.log(angular.element(document).scrollTop);
+                // console.log(elChild[0].clientTop);
+                if (yPosition >= 0 || $window.innerHeight <= elChild[0].offsetHeight || $window.innerWidth < 768) {
+                    elChild.removeClass('affix affix-bottom');
+                } else if ( yPosition < 0) {
+                  var bodyRect = document.body.getBoundingClientRect()
+                  var elChildRect = elChild[0].getBoundingClientRect()
+                  var elChildAbsOffset = elChildRect.top - bodyRect.top;
+
+                  var affixElementRect = affixElement.getBoundingClientRect();
+                  var affixElementAbsOffset = affixElementRect.top - bodyRect.top;
+
+                  var elChildOffset = elChildAbsOffset - affixElementAbsOffset;
+                  var elChildHeight = elChild[0].clientHeight;
+                  var affixElementHeight = affixElement.clientHeight;
+
+                  console.log(elChildRect.top);
+
+                  var pastBottom = elChildOffset + elChildHeight > affixElementHeight;
+                  var topCovered = elChildRect.top > 10;
+
+                  console.log('topcovered', topCovered);
+                  console.log('pastBottom', pastBottom);
+
+                  elChild.addClass('affix');
+
+                  if (pastBottom && !hitBottom) {
+                    hitBottom = true;
+                    elChild.addClass('affix-bottom');
+                    elChild.removeClass('affix');
+                  }
+
+                  if (topCovered) {
+                    hitBottom = false;
+                    elChild.removeClass('affix-bottom');
+                    elChild.addClass('affix');
+                  }
+                }
+            });
+        }
+    };
+  }
+})();

app/directives/tc-sticky/tc-sticky.directive.js

@@ -24,4 +24,4 @@
         span.onoffswitch-inner
         span.onoffswitch-switch
 
-hr
+hr.bottom

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

@@ -0,0 +1,53 @@
+(function() {
+  'use strict';
+
+angular.module('topcoder')
+    .filter('characters', function () {
+        return function (input, chars, breakOnWord) {
+            if (isNaN(chars)) return input;
+            if (chars <= 0) return '';
+            if (input && input.length > chars) {
+                input = input.substring(0, chars);
+
+                if (!breakOnWord) {
+                    var lastspace = input.lastIndexOf(' ');
+                    //get last space
+                    if (lastspace !== -1) {
+                        input = input.substr(0, lastspace);
+                    }
+                }else{
+                    while(input.charAt(input.length-1) === ' '){
+                        input = input.substr(0, input.length -1);
+                    }
+                }
+                return input + '…';
+            }
+            return input;
+        };
+    })
+    .filter('splitcharacters', function() {
+        return function (input, chars) {
+            if (isNaN(chars)) return input;
+            if (chars <= 0) return '';
+            if (input && input.length > chars) {
+                var prefix = input.substring(0, chars/2);
+                var postfix = input.substring(input.length-chars/2, input.length);
+                return prefix + '...' + postfix;
+            }
+            return input;
+        };
+    })
+    .filter('words', function () {
+        return function (input, words) {
+            if (isNaN(words)) return input;
+            if (words <= 0) return '';
+            if (input) {
+                var inputWords = input.split(/\s+/);
+                if (inputWords.length > words) {
+                    input = inputWords.slice(0, words).join(' ') + '…';
+                }
+            }
+            return input;
+        };
+    });
+})();

app/filters/truncate.filter.js

@@ -60,6 +60,7 @@ html
     link(rel="stylesheet", href="assets/css/directives/toggle-password-with-tips.css")
     link(rel="stylesheet", href="assets/css/directives/toggle-password.css")
     link(rel="stylesheet", href="assets/css/directives/tc-tabs.css")
+    link(rel="stylesheet", href="assets/css/directives/tc-sticky.css")
     link(rel="stylesheet", href="assets/css/directives/tc-section.css")
     link(rel="stylesheet", href="assets/css/directives/tc-paginator.css")
     link(rel="stylesheet", href="assets/css/directives/tc-endless-paginator.css")
@@ -146,6 +147,8 @@ html
     script(src='../bower_components/restangular/dist/restangular.js')
     script(src='../bower_components/angular-touch/angular-touch.js')
     script(src='../bower_components/angular-carousel/dist/angular-carousel.js')
+    script(src='../bower_components/matchmedia/matchMedia.js')
+    script(src='../bower_components/ngSticky/lib/sticky.js')
     //- endbower
     //- inject:nonBowerScripts
     script(src="/scripts/auth0-angular.js")
@@ -195,6 +198,7 @@ html
     script(src="directives/tc-endless-paginator/tc-endless-paginator.directive.js")
     script(src="directives/tc-paginator/tc-paginator.directive.js")
     script(src="directives/tc-section/tc-section.directive.js")
+    script(src="directives/tc-sticky/tc-sticky.directive.js")
     script(src="directives/tc-tabs/tc-tabs.directive.js")
     script(src="directives/tc-transclude.directive.js")
     script(src="directives/track-toggle/track-toggle.directive.js")
@@ -214,6 +218,7 @@ html
     script(src="filters/role.filter.js")
     script(src="filters/time-diff.filter.js")
     script(src="filters/track.filter.js")
+    script(src="filters/truncate.filter.js")
     script(src="filters/underscore-strip.filter.js")
     script(src="layout/layout.module.js")
     script(src="layout/header/header.controller.js")

app/index.jade

@@ -47,9 +47,9 @@
 
         vm.userMenu = [
           { 'sref': 'dashboard', 'text': 'DASHBOARD', 'icon': '/images/nav/dashboard.svg' },
-          { 'sref': 'profile.about', 'srefParams': { 'userHandle': vm.userHandle }, 'text': 'MY PROFILE', 'icon': '/images/nav/badge.svg' },
-          { 'href':  vm.constants.COMMUNITY_URL + '/PactsMemberServlet?module=PaymentHistory&full_list=false', 'text': 'PAYMENTS', 'icon': '/images/nav/money-bag.svg', 'target': '_blank' },
-          { 'sref': 'settings.profile', 'text': 'SETTINGS', 'icon': '/images/nav/gear.svg' },
+          { 'sref': 'profile.about', 'srefParams': { 'userHandle': vm.userHandle }, 'text': 'MY PROFILE', 'icon': '/images/nav/profile.svg' },
+          { 'href':  vm.constants.COMMUNITY_URL + '/PactsMemberServlet?module=PaymentHistory&full_list=false', 'text': 'PAYMENTS', 'icon': '/images/nav/wallet.svg', 'target': '_blank' },
+          { 'sref': 'settings.profile', 'text': 'SETTINGS', 'icon': '/images/nav/settings.svg' },
         ];
 
         ProfileService.getUserProfile(vm.userHandle)
@@ -72,7 +72,7 @@
     }
 
     function selectedGroup() {
-      return _.get(NavService, 'selectedTopLevelItem.parent', null);
+      return _.get(NavService, 'selectedTopLevelItem', null);
     }
   }
 })();