Merge pull request #211 from appirio-tech/misc-dashboard-tweaks

Fix many small dashboard styles

Author: nlitwin

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

@@ -14,7 +14,7 @@
 
 
     .challenge-calendar
-      p.starts-in Starts In
+      p.starts-in Ends In
       p.time-remaining 3
       p.unit-of-time days
 
@@ -37,7 +37,7 @@
       a.forum(ng-href="http://apps.{{DOMAIN}}/forums//?module=Category&categoryID={{challenge.forumId}}")
         .forum-icon
 
-        p Posts
+        p Forum
 
 .challenge.list-view(ng-show="view=='list'")
   .challenge-icons

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

@@ -17,7 +17,8 @@
         activate();
 
         function activate() {
-          processChallenge($scope.challenge);
+          console.log($scope.challenge.plain());
+          // processChallenge($scope.challenge);
         }
 
         function processChallenge(challenge) {

app/directives/ios-card/ios-card.directive.jade

@@ -4,7 +4,7 @@
   header
     a(ng-href="https://www.{{DOMAIN}}/challenge-details/{{challenge.id}}/?type={{challenge.track}}") {{challenge.name}}
 
-    p #[span iOS] {{challenge.track}}
+    p {{challenge.subTrack | underscoreStrip}}
 
   .challenge-details
     p.prize-money(ng-show="challenge.reviewType === 'PEER'") Peer Review Challenge

app/filters/underscore-strip.filter.js

@@ -0,0 +1,15 @@
+(function() {
+  'use strict';
+
+  angular.module('topcoder').filter('underscoreStrip', underscoreStrip);
+
+  function underscoreStrip() {
+    return function(string) {
+      if (!string) {
+        return '';
+      }
+      return string.replace(/_/g, ' ');
+    };
+  }
+
+})();

app/index.jade

@@ -93,7 +93,7 @@ html
     script(src='../bower_components/angucomplete-alt/angucomplete-alt.js')
     script(src='../bower_components/angular-cookies/angular-cookies.js')
     script(src='../bower_components/angular-dropdowns/dist/angular-dropdowns.js')
-    script(src='../bower_components/angular-filter/dist/angular-filter.js')
+    script(src='../bower_components/angular-filter/dist/angular-filter.min.js')
     script(src='../bower_components/angular-img-fallback/angular.dcb-img-fallback.js')
     script(src='../bower_components/angular-jwt/dist/angular-jwt.js')
     script(src='../bower_components/angular-sanitize/angular-sanitize.js')
@@ -163,6 +163,7 @@ html
     script(src="filters/role.filter.js")
     script(src="filters/time-diff.filter.js")
     script(src="filters/track.filter.js")
+    script(src="filters/underscore-strip.filter.js")
     script(src="layout/layout.module.js")
     script(src="layout/header/header.controller.js")
     script(src="my-challenges/my-challenges.module.js")

app/my-challenges/my-challenges.controller.js

@@ -75,25 +75,16 @@
         }
       };
       vm.loading = true;
-      return $q.all([
-        ChallengeService.getUserChallenges(handle, params),
-        ChallengeService.getSpotlightChallenges()
-      ])
-      .then(function(data){
-        var challenges = data[0];
-        var spotlightChallenges = data[1];
-
+      return ChallengeService.getUserChallenges(handle, params)
+      .then(function(challenges){
         if (challenges.length > 0) {
           // FIXME until we figure out the correct sort order param
 
           vm.myChallenges = challenges;
-          vm.spotlightChallenge = spotlightChallenges[0];
-
           vm.userHasChallenges = true;
           vm.loading = false;
         } else {
           vm.userHasChallenges = false;
-          vm.spotlightChallenges = spotlightChallenges.slice(0, 2);
           vm.loading = false;
         }
       })

app/my-dashboard/community-updates/community-updates.jade

@@ -1,5 +1,5 @@
 header
-  h1.section-title Community Updates
+  h1.section-title From the Community Blog
 
 .section-loading(ng-show="vm.loading")
 

app/my-dashboard/header-dashboard/header-dashboard.jade

@@ -1,5 +1,5 @@
 header
-  h1 Dashboard
+  h1 My Dashboard
 
   .user-stats
     .copilot-challenges(ng-show="dashboard.isCopilot")
@@ -12,5 +12,5 @@ header
     .money-earned
       p.number(ng-bind='vm.moneyEarned || 0 | currency:undefined:0')
 
-      p Won in prizes
+      p Won
 

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

@@ -36,25 +36,17 @@
         }
       };
 
-      $q.all([
-        ChallengeService.getUserChallenges(handle, params),
-        ChallengeService.getSpotlightChallenges()
-      ])
-      .then(function(data){
-        var challenges = data[0];
-        var spotlightChallenges = data[1];
-
+      ChallengeService.getUserChallenges(handle, params)
+      .then(function(challenges){
+        console.log(challenges);
         if (challenges.length > 0) {
           // FIXME until we figure out the correct sort order param
 
           vm.myChallenges = challenges;
-          vm.spotlightChallenge = spotlightChallenges[0];
-
           vm.userHasChallenges = true;
           vm.loading = false;
         } else {
           vm.userHasChallenges = false;
-          vm.spotlightChallenges = spotlightChallenges.slice(0, 2);
           vm.loading = false;
         }
       })

app/my-dashboard/my-challenges/my-challenges.jade

@@ -1,10 +1,10 @@
 header(ng-hide="vm.loading")
-  h1.section-title(ng-bind="vm.userHasChallenges ? 'Active Challenges' : 'Challenges'")
+  h1.section-title(ng-bind="vm.userHasChallenges ? 'My Challenges' : 'Challenges'")
 
 .section-loading(ng-show="vm.loading")
 
 section.noChallenges(ng-if="!vm.userHasChallenges && !vm.loading")
-  h3 Prove your skills!
+  h3 Win prize money and expand your knowledge
 
   .tracks
     .track
@@ -23,15 +23,17 @@ section.noChallenges(ng-if="!vm.userHasChallenges && !vm.loading")
       .copilot-icon-outline
       p Co-Pilot
 
-  p.info Hey, whatever your like might be—Design, Development, or Data Science—we have it! Explore the Challenges section and show us what you’re made of!
+  p.info Compete in challenges to win money, test yourself against the world's best, and learn new skills
 
-  a(ng-href="https://www.{{DOMAIN}}/challenges/") View Challenges
+  a(ng-href="https://www.{{DOMAIN}}/challenges/") Find Challenges
+
+  a(href="") Learn More
 
 section.hasChallenges(ng-if="vm.userHasChallenges && !vm.loading")
   .challenges
     challenge-tile(ng-repeat="challenge in vm.myChallenges | orderBy:registrationEndDate:true", challenge="challenge", view="'tile'", ng-class="'tile-view'")
 
 .my-challenges-links(ng-if="vm.userHasChallenges && !vm.loading")
-    a(ui-sref="my-challenges") View All
+    a(ui-sref="my-challenges") View All Active Challenges
 
-    a(ui-sref="my-challenges") Past Challenges
+    a(ui-sref="my-challenges") View All Past Challenges

app/my-dashboard/srms/srms.jade

@@ -1,7 +1,6 @@
 header
-  h1.section-title Single Round Matches
+  h1.section-title Competitive Programming
 
-  //- a.viewSRMs(ui-sref="my-srms") View All Past SRMs
 
 .section-loading(ng-show="vm.loading")
 
@@ -11,11 +10,13 @@ section(ng-hide="vm.loading")
 
     .srm-links-card
       .flex-wrapper
-        h2 Show us you can #[span code!]
+        h2 Practice on past problems
 
         a(href="https://community.{{DOMAIN}}/tc?module=ProblemArchive") Problem Archives
 
         a(href="https://community.{{DOMAIN}}/wiki/display/tc/Algorithm+Problem+Set+Analysis") Match Editorials
 
+        a(ui-sref="my-srms") View Past SRMs
+
 .srms-links(ng-hide="vm.loading")
   p Want to compete right now? Try your skills in the #[a(ng-href="https://arena.{{DOMAIN}}/") Topcoder ARENA]!

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

@@ -4,7 +4,7 @@
 .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}}
+      p.subtrack {{subtrack.subTrack | underscoreStrip}}
 
       p.rating {{subtrack.rating | number}}
         span

assets/css/directives/challenge-tile.scss

@@ -4,10 +4,15 @@
 .challenge.tile-view {
   position: relative;
   width: 270px;
-  border: 1px solid #DCDCDC;
+  border: 1px solid #E0E0E0;
   border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
   background-color: $white;
 
+  &:hover {
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4)
+  }
+
   .challenge-track {
     width: 5px;
     height: 52px;
@@ -26,7 +31,7 @@
       display: block;
       width: 210px;
       padding-top: 8px;
-      padding-bottom: 5px;
+      padding-bottom: 2px;
       @include sofia-pro-medium;
       font-size: 14px;
       line-height: 18px;
@@ -137,8 +142,8 @@
     }
 
     p {
-      @include sofia-pro-bold;
-      font-size: 11px;
+      @include sofia-pro-medium;
+      font-size: 12px;
       color: $primary-text;
     }
 

assets/css/directives/ios-card.scss

@@ -40,10 +40,6 @@
       font-size: 11px;
       line-height: 13px;
       text-transform: uppercase;
-
-      span {
-        text-transform: none;
-      }
     }
   }
 

assets/css/directives/srm-tile.scss

@@ -5,8 +5,13 @@
   width: 270px;
   border: 1px solid #DCDCDC;
   border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
   background-color: $white;
 
+  &:hover {
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4)
+  }
+
   .challenge-track {
     width: 5px;
     height: 52px;
@@ -46,7 +51,6 @@
     @include sofia-pro-light;
     font-size: 20px;
     line-height: 24px;
-    text-transform: uppercase;
 
     span {
       @include sofia-pro-bold;

assets/css/my-dashboard/community-updates.scss

@@ -4,6 +4,9 @@
   display: flex;
   flex-direction: column;
   color: $primary-text;
+  @media only screen and (min-width: 1132px) {
+    padding-bottom: 60px;
+  }
 
   header {
     margin-top: 6px;

assets/css/my-dashboard/header-dashboard.scss

@@ -3,6 +3,7 @@
 .header-dashboard {
   @include module-full-width;
   background-color: $white;
+  box-shadow: 0 0 3px 0 rgba(0, 0, 0, .3);
 
   header {
     display: flex;
@@ -45,30 +46,27 @@
       }
 
       .slash {
-        width: 20px;
-        height: 35px;
-        margin-right: 15px;
+        @include forward-slash(1px, 40px, 0, 2px, 30deg);
+        margin-right: 8px;
         background-color: #D1D3D4;
+        @media only screen and (min-width: 600px) {
+          @include forward-slash(1px, 45px, 0, 2px, 30deg);
+          margin-right: 10px;
+        }
       }
 
       .money-earned, .copilot-challenges {
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
-        text-align: center;
-
-        p {
-          text-transform: uppercase;
-        }
+        text-align: right;
 
         .number {
+          margin-bottom: 4px;
           @include sofia-pro-bold;
           font-size: 18px;
           line-height: 23px;
           color: $primary-text;
-          text-align: right;
           @media only screen and (min-width: 600px) {
-            text-align: center;
             font-size: 22px;
             line-height: 28px;
           }
@@ -78,6 +76,7 @@
           @include sofia-pro-regular;
           font-size: 10px;
           line-height: 13px;
+          text-transform: uppercase;
           color: #A3A3AE;
           @media only screen and (min-width: 600px) {
             font-size: 12px;
@@ -87,16 +86,16 @@
       }
 
       .money-earned {
+        padding-left: 15px;
         @media only screen and (min-width: 600px) {
           padding-left: 10px;
-          padding-right: 10px;
         }
       }
 
       .copilot-challenges {
-        margin-right: 15px;
+        margin-right: 10px;
+        padding-right: 15px;
         @media only screen and (min-width: 600px) {
-          padding-left: 10px;
           padding-right: 10px;
         }
       }

assets/css/my-dashboard/my-challenges.scss

@@ -4,7 +4,6 @@
   .section-title {
     margin-bottom: 27px;
     @media only screen and (min-width: 900px) {
-      font-size: 28px;
       margin-bottom: 30px;
     }
   }
@@ -106,6 +105,8 @@
     display: flex;
     justify-content: center;
     padding-top: 20px;
+    border-top: 1px solid #F0F0F0;
+    border-bottom: 1px solid #F0F0F0;
     background-color: #FCFCFC;
 
     .challenges {