Profile layout fixes

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/tc-sticky/tc-sticky.directive.js

@@ -0,0 +1,50 @@
+
+(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);
+            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) {
+                    console.log(top + height);
+                    console.log(yPosition);
+                    console.log(top + height + yPosition);
+                    if (top + height + yPosition < 800) {
+                        elChild.addClass('affix-bottom');
+                        elChild.removeClass('affix');
+                    } else {
+                        elChild.removeClass('affix-bottom');
+                        elChild.addClass('affix');
+                    }
+
+                };
+            });
+        }
+    };
+  }
+})();

app/index.jade

@@ -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")
@@ -145,6 +146,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")
@@ -193,6 +196,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")

app/profile/about/about.jade

@@ -1,7 +1,14 @@
 .about-container
-  .profile-header-container(ng-cloak)
-    profile-widget(profile="profileVm.profile", edit-profile-link="profileVm.showEditProfileLink", num-wins="profileVm.numWins", profile-vm="profileVm")
+
+  .profile-header-container(ng-cloak,id="affix", tc-sticky)
+    //- .sticky-container(sticky media-query="min-width: 780px" use-placeholder="true" offset="10" confine="true" sticky-class="sticked")
+      profile-widget(profile="profileVm.profile", edit-profile-link="profileVm.showEditProfileLink", num-wins="profileVm.numWins", profile-vm="profileVm")
 
+    //- .sticky-container(bs-affix data-offset-top="10" data-offset-bottom="400")
+    .sticky-container()
+      profile-widget(profile="profileVm.profile", edit-profile-link="profileVm.showEditProfileLink", num-wins="profileVm.numWins", profile-vm="profileVm")
+
+
   .profile-about-container
 
     #skills

app/topcoder.module.js

@@ -30,7 +30,8 @@
     'toaster',
     'angular-intro',
     'ngMessages',
-    'angular-carousel'
+    'angular-carousel',
+    'sticky'
   ];
 
   angular.module('topcoder', dependencies).run(appRun);

assets/css/directives/external-link-data.scss

@@ -122,23 +122,24 @@ external-accounts {
 
   }
 }
+
 @media (min-width: 768px) {
   .external-link-list {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: flex-start;
-    padding: 0px 75px;
+    padding: 0px 60px;
 
     .external-link-tile {
       border: 1px solid #f0f0f0;
       background-color: $gray-lightest;
-      margin-left: 30px;
+      margin-left: 15px;
       margin-top: 30px;
       margin-bottom: 0px;
-      &:nth-child(3n+1) {
-        margin-left: 0px;
-      }
+      // &:nth-child(3n+1) {
+      //   margin-left: 0px;
+      // }
       width: 218px;
       height: 240px;
       display: flex;
@@ -209,6 +210,7 @@ external-accounts {
 
           }
         }
+
         .logo {
           padding: 10px;
           font-size: 50px;

assets/css/directives/profile-widget.scss

@@ -22,7 +22,7 @@
       margin-top: 5px;
       font-size: 12px;
       line-height: 14px;
-      @include sofia-pro-medium;
+      @include sofia-pro-light;
       color: $accent-gray;
       text-align: center;
       text-transform: uppercase;
@@ -86,17 +86,19 @@
     flex-direction: column;
     align-items: center;
     margin-top: 40px;
+    width: 100%;
+
 
     .tracks {
       display: flex;
       flex-direction: row;
       justify-content: center;
-      overflow-x: auto;
-      overflow-y: hidden;
+
       .track {
         cursor: pointer;
         display: flex;
         width: 100%;
+        flex-wrap: wrap;
         flex-direction: column;
         align-items: center;
         + .track {
@@ -107,13 +109,14 @@
           width: 44px;
         }
         .text {
-          @include sofia-pro-medium;
+          @include sofia-pro-light;
           color: $accent-gray;
-          font-size: 12px;
-          line-height: 14px;
+          font-size: $label-small;
+          line-height: 12px;
           margin-top: 11px;
           text-transform: uppercase;
           text-align: center;
+          // white-space: nowrap;
           word-wrap: break-word;
         }
       }
@@ -128,7 +131,7 @@
     align-items: center;
     justify-content: center;
     .link {
-      @include sofia-pro-medium;
+      @include sofia-pro-regular;
       font-size: 12px;
       line-height: 14px;
       text-decoration: none;

assets/css/directives/skill-tile.scss

@@ -23,7 +23,7 @@ skill-tile {
   }
 
   a:hover {
-      text-decoration: none;
+    text-decoration: none;
   }
 
   a.hidden {
@@ -100,6 +100,7 @@ skill-tile {
     }
   }
 }
+
 .settings-container {
   skill-tile {
     a:not(.hidden):hover {

assets/css/directives/tc-sticky.scss

@@ -0,0 +1,5 @@
+// .affix {
+//     position:fixed !important;
+//     top: 0; //Change this value to match your needs;
+//     z-index: 10;
+// }

assets/css/partials/_tc-buttons.scss

@@ -143,11 +143,12 @@ a.tc-btn, button.tc-btn {
   &.tc-btn-s {
     height: 30px;
     padding: 0 10px;
-    line-height: 30px;
-    font-size: 14px;
+    line-height: 28px;
+    font-size: 12px;
+    font-weight: 500;
 
     &:active {
-      line-height: 31px;
+      line-height: 29px;
     }
   }
 

assets/css/partials/_tc-colors.scss

@@ -1,3 +1,50 @@
+// TOPCODER Brand palette
+// We should use those variables instead of color values;
+$primary: #0096FF;
+$primary-dark: #097DCE;
+$primary-dark2: darken($primary, 20%);
+$primary-light: #85CCFF;
+$primary-light2: lighten($primary, 70%);
+$primary-lighter: #F2FAFF;
+$primary-lighter2: lighten($primary, 90%);
+
+
+$error: #F31D3D;
+$error-dark: #C70E2A;
+$error-light: #FCBBC5;
+$error-lighter: #FEE8EC;
+
+$success: #5BC921;
+$success-dark: #42A30F;
+$success-light: #CEEFBC;
+$success-lighter: #EFFAE9;
+
+$accent-gray: #A3A3AE;
+$accent-gray-dark: #394146;
+
+$black: #000;
+$white: #fff;
+$gray-darkest: #3D3D3D;
+$gray-darker: #7F7F7F;
+$gray-dark: #B7B7B7;
+$gray: #D1D3D4;
+$gray-light: #F0F0F0;
+$gray-lighter: #F6F6F6;
+$gray-lightest: #FCFCFC;
+
+$level-5: #EF3A3A;
+$level-4: #FCD617;
+$level-3: #616BD5;
+$level-2: #69C329;
+$level-1: #9D9FA0;
+
+$design: #21B2F1;
+$data_science: #FC9A00;
+$develop: #05C14F;
+$copilot: #7D939E;
+
+
+
 // Old colors that we should clean. Don't reference or use in new modules!
 
 $light-black: #333;

assets/css/partials/_tc-mixins.scss

@@ -69,33 +69,33 @@
 
 @mixin label-description {
   font: {
-    family: "Merriweather Sans", $font-family-sans-serif;
+    family: "Merriweather Sans",Arial, Helvetica, sans-serif;
     weight: 400;
     size: 13px;
   }
 }
 
 @mixin merriweather-sans-regular {
   font: {
-    family: "Merriweather Sans", $font-family-sans-serif;
+    family: "Merriweather Sans", Arial, Helvetica, sans-serif;
     weight: 400;
   }
 }
 
 // body end;
 
 @mixin sofia-pro-extra-light {
-  font-family: 'Sofia Pro', Arial;
+  font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
   font-weight: 200;
 }
 
 @mixin sofia-pro-light {
-  font-family: 'Sofia Pro', Arial;
+  font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
   font-weight: 300;
 }
 
 @mixin sofia-pro-regular {
-  font-family: 'Sofia Pro', Arial;
+  font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
   font-weight: 400;
 }
 
@@ -105,17 +105,17 @@
 }
 
 @mixin sofia-pro-medium {
-  font-family: 'Sofia Pro', Arial;
+  font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
   font-weight: 500;
 }
 
 @mixin sofia-pro-semi-bold {
-  font-family: 'Sofia Pro', Arial;
+  font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
   font-weight: 600;
 }
 
 @mixin sofia-pro-bold {
-  font-family: 'Sofia Pro', Arial;
+  font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
   font-weight: bold;
 }
 

assets/css/partials/_tc-variables.scss

@@ -6,3 +6,10 @@ $font-family-sans-serif:     "Helvetica Neue", Helvetica, Arial, sans-serif !def
 $font-family-serif:          Georgia, "Times New Roman", Times, serif !default;
 $font-family-monospace:      Menlo, Monaco, Consolas, "Courier New", monospace !default;
 $font-family-base:           $font-family-sans-serif !default;
+
+
+// The label is showing in many places; particulary on data/stats
+$label-medium:				14px;
+$label-small:				11.5px;
+$label-xs:					10px;
+$label-large:				16px;