Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Commit d53ca49

Browse files
nlitwinnlitwin
committed
Merge pull request #359 from appirio-tech/feature/dash-subtrack-carousel
Feature/dash subtrack carousel
2 parents 4be4681 + 4def3fe commit d53ca49

File tree

6 files changed

+159
-87
lines changed

6 files changed

+159
-87
lines changed

‎app/index.jade

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ html
2020
link(rel='stylesheet', href='../bower_components/ng-notifications-bar/dist/ngNotificationsBar.min.css')
2121
link(rel='stylesheet', href='../bower_components/ngDialog/css/ngDialog.css')
2222
link(rel='stylesheet', href='../bower_components/ngDialog/css/ngDialog-theme-default.css')
23+
link(rel='stylesheet', href='../bower_components/angular-carousel/dist/angular-carousel.css')
2324
//- endbower
2425
// endbuild
2526
@@ -123,6 +124,8 @@ html
123124
script(src='../bower_components/ngDialog/js/ngDialog.js')
124125
script(src='../bower_components/lodash/lodash.js')
125126
script(src='../bower_components/restangular/dist/restangular.js')
127+
script(src='../bower_components/angular-touch/angular-touch.js')
128+
script(src='../bower_components/angular-carousel/dist/angular-carousel.js')
126129
//- endbower
127130
//- inject:nonBowerScripts
128131
script(src="/scripts/auth0-angular.js")

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

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,7 @@
33

44
angular.module('tc.myDashboard').controller('SubtrackStatsController', SubtrackStatsController);
55

6-
SubtrackStatsController.$inject = [
7-
'ProfileService',
8-
'userIdentity'
9-
];
6+
SubtrackStatsController.$inject = ['ProfileService', 'userIdentity'];
107

118
function SubtrackStatsController(ProfileService, userIdentity) {
129
var vm = this;
@@ -21,10 +18,13 @@
2118
.then(function(stats) {
2219
var trackRanks = ProfileService.getRanks(stats);
2320
var subtrackRanks = compileSubtracks(trackRanks);
24-
processStats(subtrackRanks);
2521

22+
processStats(subtrackRanks);
2623
vm.subtrackRanks = subtrackRanks;
2724
vm.hasRanks = !!vm.subtrackRanks.length;
25+
26+
buildCarouselSlide();
27+
2828
vm.loading = false;
2929
})
3030
.catch(function(err) {
@@ -46,7 +46,6 @@
4646

4747
} else {
4848
return result;
49-
5049
}
5150
}, []);
5251
}
@@ -65,5 +64,26 @@
6564
}
6665
});
6766
}
67+
68+
// This function aids in showing multiple items (subtracks) per slide
69+
function buildCarouselSlide(numItemsPerSlide) {
70+
var subtrackRanksCollection = [];
71+
var slide = [];
72+
// Might be able to change number of subtracks per slide based
73+
// on screen size if the width of each subtrack is consistent:
74+
// http://stackoverflow.com/questions/26252038/multi-item-responsive-carousel
75+
numItemsPerSlide = numItemsPerSlide || 4;
76+
77+
for(var i = 0; i < vm.subtrackRanks.length; i++) {
78+
if (slide.length === numItemsPerSlide) {
79+
// When slide is full, push it to collection and make a new slide []
80+
subtrackRanksCollection.push(slide);
81+
slide = [];
82+
}
83+
slide.push(vm.subtrackRanks[i]);
84+
}
85+
subtrackRanksCollection.push(slide);
86+
vm.subtrackRanksCollection = subtrackRanksCollection;
87+
}
6888
}
6989
})();

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,16 @@
1313
p.rating(ng-if="subtrack.track === 'DESIGN'", style="color: #21B2F1") {{subtrack.stat | number}}
1414

1515
p {{subtrack.statType}}
16+
17+
ul(rn-carousel, rn-carousel-controls)
18+
li(ng-repeat="subtracks in vm.subtrackRanksCollection")
19+
.track(ng-repeat="subtrack in subtracks", ui-sref="profile.subtrack({userHandle: vm.handle, track: subtrack.track, subTrack: subtrack.subTrack})")
20+
.flex-wrapper
21+
p.subtrack {{subtrack.subTrack | underscoreStrip}}
22+
23+
p.rating(ng-if="subtrack.track !== 'DESIGN'", style="color: {{subtrack.stat | ratingColor}}") {{subtrack.stat | number}}
24+
span(style="background-color: {{subtrack.stat | ratingColor}}", ng-if="subtrack.track === 'DEVELOP' || subtrack.track === 'DATA_SCIENCE'")
25+
26+
p.rating(ng-if="subtrack.track === 'DESIGN'", style="color: #21B2F1") {{subtrack.stat | number}}
27+
28+
p {{subtrack.statType}}

‎app/topcoder.module.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@
2929
'dcbImgFallback',
3030
'toaster',
3131
'angular-intro',
32-
'ngMessages'
32+
'ngMessages',
33+
'angular-carousel'
3334
];
3435

3536
angular.module('topcoder', dependencies).run(appRun);

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

Lines changed: 113 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -6,103 +6,137 @@
66
.tracks {
77
@include horizontal-scroll;
88
@media only screen and (min-width: 768px) {
9-
display: flex;
10-
flex-flow: row wrap;
11-
justify-content: center;
12-
overflow: visible;
13-
white-space: normal;
9+
display: none;
1410
}
11+
}
1512

16-
.track {
17-
position: relative;
18-
display: inline-block;
19-
margin-right: 65px;
20-
padding: 20px 0;
21-
@media only screen and (min-width: 768px) {
22-
display: flex;
23-
flex-direction: column;
24-
align-items: center;
25-
margin-right: 35px;
26-
padding: 30px 20px;
27-
cursor: pointer;
28-
29-
&:hover {
30-
background-color: $gray-lightest;
31-
32-
.subtrack {
33-
color: $gray-darkest;
34-
border-bottom-color: $gray-darkest;
35-
}
36-
37-
p:last-child {
38-
color: $gray-darkest;
39-
}
40-
}
41-
13+
ul {
14+
display: block;
15+
height: 148px;
16+
width: 665px;
17+
margin: 0 auto;
18+
@media only screen and (max-width: 767px) {
19+
display: none;
20+
}
4221

22+
li {
23+
div:last-child {
24+
margin-right: 0;
4325
}
26+
}
27+
}
4428

45-
&:first-child {
46-
margin-left: 20px;
47-
}
29+
.rn-carousel-controls {
30+
position: relative;
31+
@media only screen and (max-width: 767px) {
32+
display: none;
33+
}
4834

49-
&:last-child {
50-
margin-right: 20px;
51-
}
35+
.rn-carousel-control {
36+
height: 148px;
37+
width: 80px;
38+
line-height: 148px;
39+
top: -148px;
40+
background-color: $gray-lightest;
41+
color: $accent-gray;
42+
text-align: center;
43+
}
5244

53-
.flex-wrapper {
54-
display: flex;
55-
flex-direction: column;
56-
align-items: center;
57-
}
45+
.rn-carousel-control-prev {
46+
left: 0;
47+
}
5848

49+
.rn-carousel-control-next {
50+
right: 0;
51+
}
5952

60-
&:not(:first-child):before {
61-
content: '';
62-
display: block;
63-
position: absolute;
64-
top: 32px;
65-
left: -30px;
66-
@include forward-slash(1px, 60px, 0, 2px, 30deg);
67-
background-color: #D1D3D4;
68-
@media only screen and (min-width: 768px) {
69-
top: 42px;
70-
left: -18px;
53+
}
54+
55+
.track {
56+
position: relative;
57+
display: inline-block;
58+
margin-right: 65px;
59+
padding: 20px 0;
60+
@media only screen and (min-width: 768px) {
61+
width: 130px;
62+
margin-right: 35px;
63+
padding: 30px 20px;
64+
cursor: pointer;
65+
66+
&:hover {
67+
background-color: $gray-lightest;
68+
69+
.subtrack {
70+
color: $gray-darkest;
71+
border-bottom-color: $gray-darkest;
72+
}
73+
74+
p:last-child {
75+
color: $gray-darkest;
7176
}
7277
}
78+
}
7379

74-
p {
75-
@include sofia-pro-regular;
76-
font-size: 12px;
77-
color: $accent-gray;
80+
&:first-child {
81+
margin-left: 20px;
82+
}
7883

79-
&:last-child {
80-
text-transform: uppercase;
81-
}
84+
&:last-child {
85+
margin-right: 20px;
86+
}
87+
88+
.flex-wrapper {
89+
display: flex;
90+
flex-direction: column;
91+
align-items: center;
92+
}
93+
94+
95+
&:not(:first-child):before {
96+
content: '';
97+
display: block;
98+
position: absolute;
99+
top: 32px;
100+
left: -30px;
101+
@include forward-slash(1px, 60px, 0, 2px, 30deg);
102+
background-color: #D1D3D4;
103+
@media only screen and (min-width: 768px) {
104+
top: 42px;
105+
left: -18px;
82106
}
107+
}
108+
109+
p {
110+
@include sofia-pro-regular;
111+
font-size: 12px;
112+
color: $accent-gray;
83113

84-
.subtrack {
85-
padding-bottom: 7px;
86-
border-bottom: 1px solid #D1D3D4;
114+
&:last-child {
115+
text-transform: uppercase;
87116
}
117+
}
88118

89-
.rating {
90-
position: relative;
91-
margin-top: 17px;
92-
margin-bottom: 7px;
93-
font-size: 32px;
94-
@media only screen and (max-width: 767px) {
95-
margin-top: 10px;
96-
}
119+
.subtrack {
120+
padding-bottom: 7px;
121+
border-bottom: 1px solid #D1D3D4;
122+
}
97123

98-
span {
99-
position: absolute;
100-
top: 5px;
101-
right: -10px;
102-
width: 6px;
103-
height: 6px;
104-
background-color: #5E9EF1;
105-
}
124+
.rating {
125+
position: relative;
126+
margin-top: 17px;
127+
margin-bottom: 7px;
128+
font-size: 32px;
129+
@media only screen and (max-width: 767px) {
130+
margin-top: 10px;
131+
}
132+
133+
span {
134+
position: absolute;
135+
top: 5px;
136+
right: -10px;
137+
width: 6px;
138+
height: 6px;
139+
background-color: #5E9EF1;
106140
}
107141
}
108142
}

‎bower.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@
4646
"ng-busy": "~0.2.0",
4747
"ng-notifications-bar": "~0.0.15",
4848
"ngDialog": "0.5.1",
49-
"restangular": "~1.5.1"
49+
"restangular": "~1.5.1",
50+
"angular-carousel": "~1.0.1"
5051
},
5152
"devDependencies": {
5253
"bardjs": "~0.1.4",

0 commit comments

Comments
 (0)