Merge pull request #235 from appirio-tech/subtrack-stats-scroll

Subtrack stats scroll

Author: nlitwin

app/my-dashboard/subtrack-stats/subtrack-stats.controller.js

@@ -22,12 +22,27 @@
         var subtrackRanks = [];
 
         var trackRanks = ProfileService.getRanks(stats);
+
         angular.forEach(trackRanks, function(subtracks, track) {
           if (Array.isArray(subtracks) && subtracks.length) {
             subtrackRanks = subtrackRanks.concat(subtracks);
           }
         });
 
+        angular.forEach(subtrackRanks, function(subtrack) {
+          if (subtrack.track === 'COPILOT') {
+            subtrack.stat = subtrack.activeContests;
+            subtrack.statType = 'Active Contests';
+          } else if (subtrack.track === 'DESIGN') {
+            subtrack.stat = subtrack.wins;
+            subtrack.statType = 'Wins';
+          } else {
+            subtrack.stat = subtrack.rating;
+            subtrack.statType = 'Rating';
+          }
+        });
+        console.log('subtrackRanks: ', subtrackRanks);
+
         vm.subtrackRanks = subtrackRanks;
         vm.hasRanks = !!vm.subtrackRanks.length;
         vm.loading = false;

app/my-dashboard/subtrack-stats/subtrack-stats.jade

@@ -4,9 +4,10 @@
 .ratings(ng-if="vm.hasRanks && !vm.loading")
   .tracks
     .track(ng-repeat="subtrack in vm.subtrackRanks | orderBy: ['track', 'rank']", ui-sref="profile.develop({userHandle: vm.profile.handle, track: subtrack.track, subTrack: subtrack.subTrack})")
-      p.subtrack {{subtrack.subTrack | underscoreStrip}}
+      .flex-wrapper
+        p.subtrack {{subtrack.subTrack | underscoreStrip}}
 
-      p.rating {{subtrack.rating | number}}
-        span
+        p.rating {{subtrack.stat | number}}
+          span(style="background-color: {{subtrack.stat | ratingColor}}", ng-if="subtrack.track === 'DEVELOP' || subtrack.track === 'DATA_SCIENCE'")
 
-      p Rating
+        p {{subtrack.statType}}

app/services/profile.service.js

@@ -135,20 +135,20 @@
         stats.COPILOT.track = 'COPILOT';
         stats.COPILOT.subTrack = 'COPILOT';
       }
-      var ans = {
+      var compiledStats = {
         'DEVELOP': removeRankless(dev),
         'DESIGN': removeRankless(design),
         'DATA_SCIENCE': removeRankless(dataScience),
         'COPILOT': copilot
       };
 
       function removeRankless(arr) {
-        return arr
-          .filter(function(subTrack) {
-            return subTrack && (subTrack.rank || subTrack.rating || subTrack.wins || subTrack.fulfillment);
-          });
+        return arr.filter(function(subTrack) {
+          return subTrack && (subTrack.rank || subTrack.rating || subTrack.wins || subTrack.fulfillment);
+        });
       }
-      return ans;
+
+      return compiledStats;
     }
 
     function getChallengeTypeStats(stats, track, type) {

assets/css/my-dashboard/subtrack-stats.scss

@@ -3,29 +3,67 @@
 .subtrack-stats {
   .ratings {
     .tracks {
-      display: flex;
-      flex-flow: row wrap;
-      justify-content: center;
+      @include horizontal-scroll;
+      @media only screen and (min-width: 768px) {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
+        overflow: visible;
+        white-space: normal;
+      }
 
       .track {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin-right: 30px;
-        padding: 30px 20px;
-        cursor: pointer;
-
-        &:hover {
-          background-color: #F5FAE5;
-
-          .subtrack {
-            color: #99CC00;
-            border-bottom-color: #99CC00;
-          }
+        position: relative;
+        display: inline-block;
+        margin-right: 65px;
+        padding: 20px 0;
+        @media only screen and (min-width: 768px) {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin-right: 30px;
+          padding: 30px 20px;
+          cursor: pointer;
+
+          &:hover {
+            background-color: #F5FAE5;
 
-          p:last-child {
-            color: #5E9EF1;
+            .subtrack {
+              color: #99CC00;
+              border-bottom-color: #99CC00;
+            }
+
+            p:last-child {
+              color: #5E9EF1;
+            }
           }
+
+
+        }
+
+        &:first-child {
+          margin-left: 20px;
+        }
+
+        &:last-child {
+          margin-right: 20px;
+        }
+
+        .flex-wrapper {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+
+
+        &:not(:first-child):before {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 32px;
+          left: -30px;
+          @include forward-slash(1px, 60px, 0, 2px, 30deg);
+          background-color: #D1D3D4;
         }
 
         p {
@@ -49,6 +87,9 @@
           margin-bottom: 7px;
           font-size: 32px;
           color: $primary-text;
+          @media only screen and (max-width: 767px) {
+            margin-top: 10px;
+          }
 
           span {
             position: absolute;

gulpfile.js

@@ -288,7 +288,7 @@ gulp.task('serve', ['inject', 'ngConstants'], function() {
       scroll: true
     },
     logPrefix: 'Topcoder-Account',
-    notify: true,
+    notify: false,
     port: 3000,
     reloadDelay: 1000
   };
@@ -351,7 +351,7 @@ gulp.task('serve-build', ['build'], function() {
       scroll: true
     },
     logPrefix: 'Topcoder-Account',
-    notify: true,
+    notify: false,
     reloadDelay: 1000
   };