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

Commit a995324

Browse files
author
vikasrohit
committedOct 17, 2015
Merge pull request #390 from appirio-tech/feature/responsive-carousel
SUP-2155, Dashboard: Subtracks should not limit to 5 in the carousel
·
zepto-release-fix1.1.0
2 parents f3dcd4e + 1ca404b commit a995324

File tree

8 files changed

+206
-87
lines changed

8 files changed

+206
-87
lines changed
 

‎app/directives/responsive-carousel/responsive-carousel.directive.jade

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.tc-carousel
2+
ul(rn-carousel, rn-carousel-controls, slide-count="{{slideCounts[carouselIndex]}}")
3+
li(ng-repeat="slides in slidesCollection")
4+
.slide(ng-repeat="item in slides")
5+
tc-transclude

‎app/directives/responsive-carousel/responsive-carousel.directive.js

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
(function() {
2+
'use strict';
3+
angular.module('tcUIComponents').directive('responsiveCarousel', function() {
4+
return {
5+
restrict: 'E',
6+
transclude: true,
7+
replace: true,
8+
templateUrl: 'directives/responsive-carousel/responsive-carousel.directive.html',
9+
scope: {
10+
data: '='
11+
},
12+
controller: ['$log', '$scope', '$element', '$window',
13+
function($log, $scope, $element, $window) {
14+
$scope.slideCounts = {};
15+
16+
activate();
17+
18+
function activate() {
19+
init();
20+
21+
var window = angular.element($window);
22+
window.on('resize', function() {
23+
init();
24+
// don't forget manually trigger $digest()
25+
$scope.$digest();
26+
});
27+
}
28+
29+
function init() {
30+
var width = $window.innerWidth;
31+
console.log(width);
32+
if(width > 1070) {
33+
// desktop
34+
buildCarouselSlide(6);
35+
} else if(width > 900) {
36+
// desktop
37+
buildCarouselSlide(5);
38+
} else if(width <= 900 && width > 768) {
39+
// tablet
40+
buildCarouselSlide(4);
41+
} else {
42+
// phone
43+
buildCarouselSlide(2);
44+
}
45+
}
46+
47+
48+
function buildCarouselSlide(numItemsPerSlide) {
49+
var slidesCollection = [];
50+
var slide = [];
51+
// Might be able to change number of subtracks per slide based
52+
// on screen size if the width of each subtrack is consistent:
53+
// http://stackoverflow.com/questions/26252038/multi-item-responsive-carousel
54+
numItemsPerSlide = numItemsPerSlide || 5;
55+
56+
for(var i = 0; i < $scope.data.length; i++) {
57+
if (slide.length === numItemsPerSlide) {
58+
// When slide is full, push it to collection and make a new slide []
59+
slidesCollection.push(slide);
60+
// updates the slide count object
61+
$scope.slideCounts[slidesCollection.length - 1] = slide.length;
62+
slide = [];
63+
}
64+
slide.push($scope.data[i]);
65+
}
66+
slidesCollection.push(slide);
67+
// updates the slide count object
68+
$scope.slideCounts[slidesCollection.length - 1] = slide.length;
69+
$scope.slidesCollection = slidesCollection;
70+
}
71+
72+
}]
73+
};
74+
});
75+
})();

‎app/directives/tc-transclude.directive.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
(function() {
2+
'use strict';
3+
angular.module('tcUIComponents').directive('tcTransclude', function() {
4+
return {
5+
link: function($scope, $element, $attrs, controller, $transclude) {
6+
if (!$transclude) {
7+
throw minErr('ngTransclude')('orphan',
8+
'Illegal use of ngTransclude directive in the template! ' +
9+
'No parent directive that requires a transclusion found. ' +
10+
'Element: {0}',
11+
startingTag($element));
12+
}
13+
var innerScope = $scope.$new();
14+
$transclude(innerScope, function(clone) {
15+
$element.empty();
16+
$element.append(clone);
17+
$element.on('$destroy', function() {
18+
innerScope.$destroy();
19+
});
20+
});
21+
}
22+
};
23+
});
24+
})();

‎app/index.jade

+3
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ html
6363
link(rel="stylesheet", href="assets/css/directives/tc-paginator.css")
6464
link(rel="stylesheet", href="assets/css/directives/srm-tile.css")
6565
link(rel="stylesheet", href="assets/css/directives/skill-tile.css")
66+
link(rel="stylesheet", href="assets/css/directives/responsive-carousel.css")
6667
link(rel="stylesheet", href="assets/css/directives/profile-widget.css")
6768
link(rel="stylesheet", href="assets/css/directives/ios-card.css")
6869
link(rel="stylesheet", href="assets/css/directives/input-sticky-placeholder.css")
@@ -168,11 +169,13 @@ html
168169
script(src="directives/ios-card/ios-card.directive.js")
169170
script(src="directives/on-file-change.directive.js")
170171
script(src="directives/profile-widget/profile-widget.directive.js")
172+
script(src="directives/responsive-carousel/responsive-carousel.directive.js")
171173
script(src="directives/skill-tile/skill-tile.directive.js")
172174
script(src="directives/slideable.directive.js")
173175
script(src="directives/srm-tile/srm-tile.directive.js")
174176
script(src="directives/tc-paginator/tc-paginator.directive.js")
175177
script(src="directives/tc-section/tc-section.directive.js")
178+
script(src="directives/tc-transclude.directive.js")
176179
script(src="directives/track-toggle/track-toggle.directive.js")
177180
script(src="topcoder.module.js")
178181
script(src="filters/deadline-msg.filter.js")

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

+5-25
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33

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

6-
SubtrackStatsController.$inject = ['ProfileService', 'userIdentity'];
6+
SubtrackStatsController.$inject = ['$filter', 'ProfileService', 'userIdentity'];
77

8-
function SubtrackStatsController(ProfileService, userIdentity) {
8+
function SubtrackStatsController($filter, ProfileService, userIdentity) {
99
var vm = this;
1010
vm.loading = true;
1111

@@ -20,11 +20,12 @@
2020
var subtrackRanks = compileSubtracks(trackRanks);
2121

2222
processStats(subtrackRanks);
23+
// sort subtrack ranks
24+
subtrackRanks = $filter('orderBy')(subtrackRanks, 'mostRecentEventDate', true);
25+
2326
vm.subtrackRanks = subtrackRanks;
2427
vm.hasRanks = !!vm.subtrackRanks.length;
2528

26-
buildCarouselSlide();
27-
2829
vm.loading = false;
2930
})
3031
.catch(function(err) {
@@ -64,26 +65,5 @@
6465
}
6566
});
6667
}
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-
}
8868
}
8969
})();

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

+9-10
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
.ratings(ng-if="vm.hasRanks && !vm.loading")
55
.tracks
6-
.track(ng-repeat="subtrack in vm.subtrackRanks | orderBy:'mostRecentEventDate':true", ui-sref="profile.subtrack({userHandle: vm.handle, track: subtrack.track, subTrack: subtrack.subTrack})")
6+
.track(ng-repeat="subtrack in vm.subtrackRanks", ui-sref="profile.subtrack({userHandle: vm.handle, track: subtrack.track, subTrack: subtrack.subTrack})")
77
.flex-wrapper
88
p.subtrack {{subtrack.subTrack | underscoreStrip}}
99

@@ -14,15 +14,14 @@
1414

1515
p {{subtrack.statType}}
1616

17-
ul(rn-carousel, rn-carousel-controls)
18-
li(ng-repeat="subtracks in vm.subtrackRanksCollection")
19-
.track(ng-repeat="subtrack in subtracks | orderBy:'mostRecentEventDate':true", ui-sref="profile.subtrack({userHandle: vm.handle, track: subtrack.track, subTrack: subtrack.subTrack})")
20-
.flex-wrapper
21-
p.subtrack {{subtrack.subTrack | underscoreStrip}}
17+
responsive-carousel(data="vm.subtrackRanks")
18+
.track(ui-sref="profile.subtrack({userHandle: vm.handle, track: item.track, subTrack: item.subTrack})")
19+
.flex-wrapper
20+
p.subtrack {{item.subTrack | underscoreStrip}}
2221

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'")
22+
p.rating(ng-if="item.track !== 'DESIGN'", style="color: {{item.stat | ratingColor}}") {{item.stat | number}}
23+
span(style="background-color: {{item.stat | ratingColor}}", ng-if="item.track === 'DEVELOP' || item.track === 'DATA_SCIENCE'")
2524

26-
p.rating(ng-if="subtrack.track === 'DESIGN'", style="color: #21B2F1") {{subtrack.stat | number}}
25+
p.rating(ng-if="item.track === 'DESIGN'", style="color: #21B2F1") {{item.stat | number}}
2726

28-
p {{subtrack.statType}}
27+
p {{item.statType}}

‎assets/css/directives/responsive-carousel.scss

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
@import 'topcoder-includes';
2+
@import '../partials/combined';
3+
4+
.tc-carousel {
5+
6+
ul {
7+
display: block;
8+
height: 148px;
9+
margin: 0 auto;
10+
@media only screen and (max-width: 767px) {
11+
display: none;
12+
}
13+
&[slide-count="1"] {
14+
width: 170px;
15+
}
16+
&[slide-count="2"] {
17+
width: 340px;
18+
}
19+
&[slide-count="3"] {
20+
width: 510px;
21+
}
22+
&[slide-count="4"] {
23+
width: 680px;
24+
}
25+
&[slide-count="5"] {
26+
width: 850px;
27+
}
28+
&[slide-count="6"] {
29+
width: 1020px;
30+
}
31+
&[slide-count="7"] {
32+
width: 1190px;
33+
}
34+
35+
li {
36+
div:last-child {
37+
margin-right: 0;
38+
}
39+
}
40+
}
41+
42+
.rn-carousel-controls {
43+
position: relative;
44+
@media only screen and (max-width: 767px) {
45+
display: none;
46+
}
47+
48+
.rn-carousel-control {
49+
height: 148px;
50+
width: 80px;
51+
line-height: 148px;
52+
top: -148px;
53+
background-color: $gray-lightest;
54+
color: $accent-gray;
55+
text-align: center;
56+
}
57+
58+
.rn-carousel-control-prev {
59+
left: 0;
60+
}
61+
62+
.rn-carousel-control-next {
63+
right: 0;
64+
}
65+
66+
}
67+
68+
.slide {
69+
display: inline-block;
70+
}
71+
}

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

+14-52
Original file line numberDiff line numberDiff line change
@@ -10,48 +10,25 @@
1010
}
1111
}
1212

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-
}
13+
.slide {
2114

22-
li {
23-
div:last-child {
24-
margin-right: 0;
15+
&:not(:first-child) {
16+
.track:before {
17+
content: '';
18+
display: block;
19+
position: absolute;
20+
top: 32px;
21+
left: -30px;
22+
@include forward-slash(1px, 60px, 0, 2px, 30deg);
23+
background-color: #D1D3D4;
24+
@media only screen and (min-width: 768px) {
25+
top: 42px;
26+
left: -18px;
27+
}
2528
}
2629
}
2730
}
2831

29-
.rn-carousel-controls {
30-
position: relative;
31-
@media only screen and (max-width: 767px) {
32-
display: none;
33-
}
34-
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-
}
44-
45-
.rn-carousel-control-prev {
46-
left: 0;
47-
}
48-
49-
.rn-carousel-control-next {
50-
right: 0;
51-
}
52-
53-
}
54-
5532
.track {
5633
position: relative;
5734
display: inline-block;
@@ -91,21 +68,6 @@
9168
align-items: center;
9269
}
9370

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;
106-
}
107-
}
108-
10971
p {
11072
@include sofia-pro-regular;
11173
font-size: 12px;

0 commit comments

Comments
 (0)
This repository has been archived.