SUP-1595, Dashboard: My Challenge page needs to be styled

-- Updated layout for tc-paginator
-- Added page Breadcrumb
-- Added pager in footer
-- fixed grid view to contain 4 tiles
-- updated style for active past filter
-- updated style for grid/list view selector

Author: vikasrohit

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

@@ -1,10 +1,10 @@
-p.pager
-  a.prev(ng-click="vm.prevPage()", ng-class="{disabled: !vm.prevPageAvailable}") Prev
-  span   |  
-  span.first(ng-bind="vm.pageParams.offset + 1")
-  span -
-  span.last(ng-bind="vm.pageParams.offset + vm.pageParams.count")
-  span   of  
-  span.total(ng-bind="vm.pageParams.totalCount")
-  span   |  
+.pager
+  a.prev(ng-click="vm.prevPage()", ng-class="{disabled: !vm.prevPageAvailable}") Previous
+  .status
+    span Showing  
+    span.first(ng-bind="vm.pageParams.offset + 1")
+    span -
+    span.last(ng-bind="vm.pageParams.offset + vm.pageParams.count")
+    span   of  
+    span.total(ng-bind="vm.pageParams.totalCount")
   a.next(ng-click="vm.nextPage()", ng-class="{disabled: !vm.nextPageAvailable}") Next

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

@@ -70,9 +70,7 @@
         limit: vm.pageParams.limit,
         offset: vm.pageParams.offset,
         orderBy: vm.orderBy, // TODO verify if this is the correct sort order clause,
-        filter: {
-          status : vm.statusFilter
-        }
+        filter: "status=" + vm.statusFilter
       };
       vm.loading = true;
       return ChallengeService.getUserChallenges(handle, params)

app/my-challenges/my-challenges.jade

@@ -1,42 +1,35 @@
 .my-challenges-container
   .my-challenges
-    header
-      h1.section-title My Challenges
 
-      p.viewDashboard
-        a(ui-sref="dashboard") View Dashboard
-
-      p.noChallenges(ng-hide="vm.userHasChallenges") You have not participated in any challenges yet.
-
-      p.viewOptions
-        a(ng-click="vm.changeView('list')", ng-class="{disabled: vm.view == 'list'}") List
-
-        span   |  
-
-        a(ng-click="vm.changeView('tile')", ng-class="{disabled: vm.view == 'tile'}") Tile
-
-      p.filters
-        a(ng-click="vm.viewActiveChallenges()", ng-class="{disabled: vm.statusFilter == 'active'}") Active
-        span   |  
-        a(ng-click="vm.viewPastChallenges()", ng-class="{disabled: vm.statusFilter == 'completed'}") Past
+    .nav
+      .breadcrumbs
+        .dashboard
+          a(ui-sref="dashboard") Dashboard
+        .my-challenges // My Challenges
 
     .section-loading(ng-show="vm.loading")
 
-    section.challenges(ng-show="vm.userHasChallenges && !vm.loading")
-      tc-paginator(data="vm.myChallenges", page-params="vm.pageParams")
+    section.noChallenges(ng-if="!vm.userHasChallenges && !vm.loading")
+      You have not participated in any challenges yet.
+
+    .content
+      section.challenges(ng-show="vm.userHasChallenges && !vm.loading")
+        .top
+          .filters
+            a(ng-click="vm.viewActiveChallenges()", ng-class="{disabled: vm.statusFilter == 'active'}") Active
+            span   |  
+            a(ng-click="vm.viewPastChallenges()", ng-class="{disabled: vm.statusFilter == 'completed'}") Past
 
-      .data(ng-class="vm.view + '-view'")
-        challenge-tile(ng-repeat="challenge in vm.myChallenges | orderBy:registrationEndDate:true", challenge="challenge", view="vm.view", ng-class="vm.view + '-view'")
+          .challenge-view-toggle
+            button.tile(ng-click="vm.changeView('tile')", ng-class="{ disabled: vm.view === 'tile' }") Grid
 
-    .section-links
-      .link
-        a(href="https://www.{{vm.domain}}/challenges/?pageIndex=1") Find New Challenges
+            button.list(ng-click="vm.changeView('list')", ng-class="{ disabled: vm.view === 'list' }") List
 
-      .link(ng-show="vm.isCopilot")
-        a(href="https://www.{{vm.domain}}/direct") Launch Topcoder Direct
+        .data(ng-class="vm.view + '-view'")
+          challenge-tile(ng-repeat="challenge in vm.myChallenges | orderBy:registrationEndDate:true", challenge="challenge", view="vm.view", ng-class="vm.view + '-view'")
 
-      .link(ng-hide="vm.userHasChallenges")
-        a(href="https://community.{{vm.domain}}/", target="_blank") View Help Library
+        .bottom
+          tc-paginator(data="vm.myChallenges", page-params="vm.pageParams")
 
     hr
 

assets/css/directives/tc-paginator.scss

@@ -4,7 +4,7 @@
 .tc-paginator {
 	display: flex;
   flex-flow: row wrap;
-  justify-content: flex-end;
+  justify-content: space-between;
   margin-right: 10px;
   margin-bottom: 10px;
 
@@ -16,5 +16,12 @@
       color: $dark-gray;
       cursor: default;
     }
+
+    &.prev {
+      text-transform: uppercase;
+    }
+    &.next {
+      text-transform: uppercase;
+    }
   }
 }