Merge branch 'dev' into feature/sup-2481-intergrate-web-links-api

* dev: (25 commits)
  removed extra <git>
  fixed JADE style spacing; css clean, added helper classes for spacings (margin)
  button spacing fixed
  form > p style fixed
  back on track container style added, consistent with everything else.
  added .csscomb.json; fixed password style
  fixing the password styles
  Format and remove console logs
  iff -> ternary
  Add styleguide generator
  Hide money if 0
  Fix alignment for srm cards
  Remove flex on mobile and add vertical align
  SUP-2577, Bug Hunt should show wins not ratings as the main metric in profile and dashboard
  SUP-2599, Change copy on empty state for dashboard
  buncha new tests
  Change 2 links to use states
  Add includes and proper variables
  SUP-2582, Upcoming SRMs should be ordered by most recent date
  SUP-2582, Upcoming SRMs should be ordered by most recent date
  ...

Author: vikasrohit

.csscomb.json

@@ -3,11 +3,12 @@
   header
     a.logo-link(href="/")
       img(src="/images/logo_mobile.svg", alt="Topcoder Logo")
+    
     .arrow
+  
   h1(class="header") PASSWORD RESET
 
   form.reset-form(name='vm.generateTokenForm', role="form", ng-submit="vm.generateTokenForm.$valid && vm.sendLink()", novalidate)
-
     p.email-label Please enter your email address, and we'll send you a link to reset your password
 
     .validation-bar(ng-class="{ 'error-bar': (vm.generateTokenForm.email.$dirty && vm.generateTokenForm.email.$invalid), 'success-bar': (vm.generateTokenForm.email.$valid) }")
@@ -16,16 +17,20 @@
 
       .tips.email-tips(ng-show="vm.emailTips")
         .arrow
+        
         h3 Email Tips:
 
         p Enter your email address and we'll get back to you with a reset link
 
     .form-errors
       p.form-error(ng-show="vm.generateTokenForm.email.$dirty && vm.generateTokenForm.email.$invalid") Please enter a valid email address.
+      
       p.form-error(ng-show="vm.alreadySent") You already requested a reset link recently. Please check your inbox or spam folder. If you have any trouble, please contact 
         a(href="mailto:[email protected]?Subject=Unable%20to%20reset%20my%20password" target="_top") [email protected]
+
       p.form-error(ng-show="vm.emailNotFound") We couldn't find a member with that email address. Please check that you entered it correctly. If you continue to have trouble, please contact 
         a(href="mailto:[email protected]?Subject=Unable%20to%20reset%20my%20password" target="_top") [email protected]
+      
       p.form-error(ng-show="vm.unkownError") We were unable to send you a reset link because of a temporary problem. Please try again. If you continue to have trouble, please contact 
         a(href="mailto:[email protected]?Subject=Unable%20to%20reset%20my%20password" target="_top") [email protected]
 
@@ -34,29 +39,39 @@
   a.link(ui-sref="login") Back to Login
 
 .reset-password-container(ng-show="vm.resetTokenSent")
+  header
+    a.logo-link(href="/")
+      img(src="/images/logo_mobile.svg", alt="Topcoder Logo")
+    
+    .arrow
+
   h1(class="header") Back on Track!
-  p We have sent you an email with a link to reset your password.
+  
+  p(class="m-b-lg") We have sent you an email with a link to reset your password.
+  
   a.link(ui-sref="login") Back to Login
 
 .reset-password-container(ng-show="vm.token")
   header
     img(src="/images/logo_mobile.svg", alt="Topcoder Logo")
+    
     .arrow
+  
   h1(class="header") CREATE NEW PASSWORD
 
   form.reset-form(name='vm.resetPasswordForm', role="form", ng-submit="vm.resetPasswordForm.$valid && vm.resetPassword()", novalidate)
-
     .validation-bar(ng-class="{ 'success-bar': (vm.resetPasswordForm.password.$valid) }")
       toggle-password-with-tips
 
       .tips.password-tips(ng-show="vm.passwordFocus")
         .arrow
+        
         h3 Password Tips:
-
+        
         p(ng-class="{ 'has-length-between-range': (vm.resetPasswordForm.password.$dirty && !vm.resetPasswordForm.password.$error.minlength && !vm.resetPasswordForm.password.$error.maxlength && !vm.resetPasswordForm.password.$error.required) }") Must be between 8 and 64 characters
-
+        
         p(ng-class="{ 'has-letter': (vm.resetPasswordForm.password.$dirty && !vm.resetPasswordForm.password.$error.hasLetter) }") At least one letter
-
+        
         p(ng-class="{ 'has-symbol-or-number': (vm.resetPasswordForm.password.$dirty && !vm.resetPasswordForm.password.$error.hasSymbolOrNumber) }") At least one number or symbol
 
     .form-errors

app/account/reset-password/reset-password.jade

@@ -2,18 +2,24 @@
   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")
         a.handle(style="color:{{vm.handleColor}};", ui-sref="profile.about({userHandle: vm.profile.handle})") {{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(ng-click="vm.backHandler()") Back to {{vm.previousStateLabel}}
 

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

@@ -14,21 +14,14 @@
         defaultState: '@'
       },
       controller: ['CONSTANTS', '$rootScope', '$scope', 'NotificationService', 'ProfileService', '$log', '$state', pageStateHeader],
-      controllerAs: "vm"
+      controllerAs: 'vm'
     };
   });
 
   function pageStateHeader(CONSTANTS, $rootScope, $scope, NotificationService, ProfileService, $log, $state) {
     var vm = this;
-    vm.handle = $scope.handle;
-    vm.profile = null;
-    vm.handleColor = null;
-    vm.hideMoney = _.get($scope, 'hideMoney', true);
-    vm.previousStateName = null;
-    vm.previousStateLabel = null;
-    vm.previousState = null;
-    vm.showBackLink = _.get($scope, 'showBackLink', false);
     vm.backHandler = backHandler;
+
     activate();
 
     // watch for profile update event in case handle/image are updated
@@ -37,12 +30,21 @@
     });
 
     function activate() {
+      vm.handle = $scope.handle;
+      vm.profile = null;
+      vm.handleColor = null;
+      $scope.hideMoney = _.get($scope, 'hideMoney', true);
+      vm.previousStateName = null;
+      vm.previousStateLabel = null;
+      vm.previousState = null;
+      vm.showBackLink = _.get($scope, 'showBackLink', false);
       vm.loading = true;
 
       // identifies the previous state
       if ($scope.$root.previousState && $scope.$root.previousState.name.length > 0) {
         vm.previousState = $scope.$root.previousState;
         vm.previousStateName = vm.previousState.name;
+
       } else if ($scope.defaultState) {
         vm.previousStateName = $scope.defaultState;
       }
@@ -51,6 +53,7 @@
       if (vm.previousStateName) {
         if (vm.previousStateName === 'dashboard') {
           vm.previousStateLabel = 'Dashboard';
+
         } else if (vm.previousStateName.indexOf('profile') > -1) {
           vm.previousStateLabel = 'Profile';
         }
@@ -60,7 +63,8 @@
       ProfileService.getUserProfile(vm.handle).then(function(profile) {
         vm.profile = profile;
         vm.handleColor = ProfileService.getUserHandleColor(vm.profile);
-        if (!vm.hideMoney) {
+
+        if (!$scope.hideMoney) {
           displayMoneyEarned(vm.handle);
         } else {
           vm.loading = false;
@@ -71,6 +75,7 @@
     function backHandler() {
       var _params = {};
       var _name = vm.previousStateName;
+
       switch (vm.previousStateName) {
         case 'profile.about':
           _params = {userHandle: vm.profile.handle};
@@ -80,6 +85,7 @@
           _name = 'dashboard';
           break;
       }
+
       $state.go(_name, _params);
     }
 
@@ -89,13 +95,13 @@
         vm.moneyEarned = _.sum(_.pluck(financials, 'amount'));
 
         if (!vm.moneyEarned) {
-          vm.hideMoney = true;
+          $scope.hideMoney = true;
         }
 
         vm.loading = false;
       })
       .catch(function(err) {
-        vm.hideMoney = true;
+        $scope.hideMoney = true;
         vm.loading = false;
       });
     }

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

@@ -6,67 +6,66 @@
 
   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');
-                  }
-                }
-            });
-        }
+      restrict: 'A',
+      link: function(scope, element) {
+        scope.width = element.prop('offsetWidth');
+
+        var elWidth = scope.width + 'px';
+        var 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');
+          var xPosition = 0;
+          var 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');
+
+          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;
+
+            var pastBottom = elChildOffset + elChildHeight > affixElementHeight;
+            var topCovered = elChildRect.top > 10;
+
+            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

@@ -3,7 +3,7 @@ describe('filters', function() {
 
   beforeEach(function() {
     bard.appModule('topcoder');
-    bard.inject(this, 'CONSTANTS', 'roleFilter', 'percentageFilter', 'ordinalFilter', 'displayLocationFilter', 'listRolesFilter', 'trackFilter', 'challengeLinksFilter');
+    bard.inject(this, 'CONSTANTS', 'roleFilter', 'percentageFilter', 'ordinalFilter', 'displayLocationFilter', 'listRolesFilter', 'trackFilter', 'challengeLinksFilter', 'externalLinkColorFilter', 'emptyFilter', 'ternaryFilter');
     domain = CONSTANTS.domain;
   });
 
@@ -98,4 +98,41 @@ describe('filters', function() {
       expect(challengeLinksFilter(_ch, 'registrants')).to.be.equal('https://community.'+domain+'/longcontest/?module=ViewStandings&rd=3');
     });
   });
+
+  describe('externalLinkColorFilter', function() {
+    
+    it('should handle twitter and linkedin correctly', function() {
+      expect(externalLinkColorFilter('el-twitter')).to.be.equal('#62AADC');
+      expect(externalLinkColorFilter('el-linkedin')).to.be.equal('#127CB5');
+    });
+  });
+
+  describe('emptyFilter', function() {
+    it('should handle empty stuff correctly', function() {
+      var a = emptyFilter(0);
+      var b = emptyFilter(12);
+      var c = emptyFilter(false);
+      var d = emptyFilter(NaN);
+      var e = emptyFilter('NaN');
+      var f = emptyFilter('');
+      var g = emptyFilter('%');
+      expect(a).to.be.equal(0);
+      expect(b).to.be.equal(12);
+      expect(c).to.be.equal('-');
+      expect(d).to.be.equal('-');
+      expect(e).to.be.equal('-');
+      expect(f).to.be.equal('-');
+      expect(g).to.be.equal('-');
+    });
+  });
+
+  describe('ternaryFilter', function() {
+    it('should function logically', function() {
+      expect(ternaryFilter(true, 1, 2)).to.be.equal(1);
+      expect(ternaryFilter(false, 1, 2)).to.be.equal(2);
+      expect(ternaryFilter(0, 1, 2)).to.be.equal(2);
+      console.log(jstz.determine().name());
+      expect(ternaryFilter(true, 'm', 'n')).to.be.equal('m');
+    });
+  });
 });