Skip to content

Commit

Permalink
Merge pull request #390 from appirio-tech/feature/responsive-carousel
Browse files Browse the repository at this point in the history
SUP-2155, Dashboard: Subtracks should not limit to 5 in the carousel
  • Loading branch information
vikasrohit committed Oct 17, 2015
2 parents f3dcd4e + 1ca404b commit a995324
Show file tree
Hide file tree
Showing 8 changed files with 206 additions and 87 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.tc-carousel
ul(rn-carousel, rn-carousel-controls, slide-count="{{slideCounts[carouselIndex]}}")
li(ng-repeat="slides in slidesCollection")
.slide(ng-repeat="item in slides")
tc-transclude
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
(function() {
'use strict';
angular.module('tcUIComponents').directive('responsiveCarousel', function() {
return {
restrict: 'E',
transclude: true,
replace: true,
templateUrl: 'directives/responsive-carousel/responsive-carousel.directive.html',
scope: {
data: '='
},
controller: ['$log', '$scope', '$element', '$window',
function($log, $scope, $element, $window) {
$scope.slideCounts = {};

activate();

function activate() {
init();

var window = angular.element($window);
window.on('resize', function() {
init();
// don't forget manually trigger $digest()
$scope.$digest();
});
}

function init() {
var width = $window.innerWidth;
console.log(width);
if(width > 1070) {
// desktop
buildCarouselSlide(6);
} else if(width > 900) {
// desktop
buildCarouselSlide(5);
} else if(width <= 900 && width > 768) {
// tablet
buildCarouselSlide(4);
} else {
// phone
buildCarouselSlide(2);
}
}


function buildCarouselSlide(numItemsPerSlide) {
var slidesCollection = [];
var slide = [];
// Might be able to change number of subtracks per slide based
// on screen size if the width of each subtrack is consistent:
// http://stackoverflow.com/questions/26252038/multi-item-responsive-carousel
numItemsPerSlide = numItemsPerSlide || 5;

for(var i = 0; i < $scope.data.length; i++) {
if (slide.length === numItemsPerSlide) {
// When slide is full, push it to collection and make a new slide []
slidesCollection.push(slide);
// updates the slide count object
$scope.slideCounts[slidesCollection.length - 1] = slide.length;
slide = [];
}
slide.push($scope.data[i]);
}
slidesCollection.push(slide);
// updates the slide count object
$scope.slideCounts[slidesCollection.length - 1] = slide.length;
$scope.slidesCollection = slidesCollection;
}

}]
};
});
})();
24 changes: 24 additions & 0 deletions app/directives/tc-transclude.directive.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
(function() {
'use strict';
angular.module('tcUIComponents').directive('tcTransclude', function() {
return {
link: function($scope, $element, $attrs, controller, $transclude) {
if (!$transclude) {
throw minErr('ngTransclude')('orphan',
'Illegal use of ngTransclude directive in the template! ' +
'No parent directive that requires a transclusion found. ' +
'Element: {0}',
startingTag($element));
}
var innerScope = $scope.$new();
$transclude(innerScope, function(clone) {
$element.empty();
$element.append(clone);
$element.on('$destroy', function() {
innerScope.$destroy();
});
});
}
};
});
})();
3 changes: 3 additions & 0 deletions app/index.jade
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ html
link(rel="stylesheet", href="assets/css/directives/tc-paginator.css")
link(rel="stylesheet", href="assets/css/directives/srm-tile.css")
link(rel="stylesheet", href="assets/css/directives/skill-tile.css")
link(rel="stylesheet", href="assets/css/directives/responsive-carousel.css")
link(rel="stylesheet", href="assets/css/directives/profile-widget.css")
link(rel="stylesheet", href="assets/css/directives/ios-card.css")
link(rel="stylesheet", href="assets/css/directives/input-sticky-placeholder.css")
Expand Down Expand Up @@ -168,11 +169,13 @@ html
script(src="directives/ios-card/ios-card.directive.js")
script(src="directives/on-file-change.directive.js")
script(src="directives/profile-widget/profile-widget.directive.js")
script(src="directives/responsive-carousel/responsive-carousel.directive.js")
script(src="directives/skill-tile/skill-tile.directive.js")
script(src="directives/slideable.directive.js")
script(src="directives/srm-tile/srm-tile.directive.js")
script(src="directives/tc-paginator/tc-paginator.directive.js")
script(src="directives/tc-section/tc-section.directive.js")
script(src="directives/tc-transclude.directive.js")
script(src="directives/track-toggle/track-toggle.directive.js")
script(src="topcoder.module.js")
script(src="filters/deadline-msg.filter.js")
Expand Down
30 changes: 5 additions & 25 deletions app/my-dashboard/subtrack-stats/subtrack-stats.controller.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@

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

SubtrackStatsController.$inject = ['ProfileService', 'userIdentity'];
SubtrackStatsController.$inject = ['$filter', 'ProfileService', 'userIdentity'];

function SubtrackStatsController(ProfileService, userIdentity) {
function SubtrackStatsController($filter, ProfileService, userIdentity) {
var vm = this;
vm.loading = true;

Expand All @@ -20,11 +20,12 @@
var subtrackRanks = compileSubtracks(trackRanks);

processStats(subtrackRanks);
// sort subtrack ranks
subtrackRanks = $filter('orderBy')(subtrackRanks, 'mostRecentEventDate', true);

vm.subtrackRanks = subtrackRanks;
vm.hasRanks = !!vm.subtrackRanks.length;

buildCarouselSlide();

vm.loading = false;
})
.catch(function(err) {
Expand Down Expand Up @@ -64,26 +65,5 @@
}
});
}

// This function aids in showing multiple items (subtracks) per slide
function buildCarouselSlide(numItemsPerSlide) {
var subtrackRanksCollection = [];
var slide = [];
// Might be able to change number of subtracks per slide based
// on screen size if the width of each subtrack is consistent:
// http://stackoverflow.com/questions/26252038/multi-item-responsive-carousel
numItemsPerSlide = numItemsPerSlide || 4;

for(var i = 0; i < vm.subtrackRanks.length; i++) {
if (slide.length === numItemsPerSlide) {
// When slide is full, push it to collection and make a new slide []
subtrackRanksCollection.push(slide);
slide = [];
}
slide.push(vm.subtrackRanks[i]);
}
subtrackRanksCollection.push(slide);
vm.subtrackRanksCollection = subtrackRanksCollection;
}
}
})();
19 changes: 9 additions & 10 deletions app/my-dashboard/subtrack-stats/subtrack-stats.jade
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

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

Expand All @@ -14,15 +14,14 @@

p {{subtrack.statType}}

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

p.rating(ng-if="subtrack.track !== 'DESIGN'", style="color: {{subtrack.stat | ratingColor}}") {{subtrack.stat | number}}
span(style="background-color: {{subtrack.stat | ratingColor}}", ng-if="subtrack.track === 'DEVELOP' || subtrack.track === 'DATA_SCIENCE'")
p.rating(ng-if="item.track !== 'DESIGN'", style="color: {{item.stat | ratingColor}}") {{item.stat | number}}
span(style="background-color: {{item.stat | ratingColor}}", ng-if="item.track === 'DEVELOP' || item.track === 'DATA_SCIENCE'")

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

p {{subtrack.statType}}
p {{item.statType}}
71 changes: 71 additions & 0 deletions assets/css/directives/responsive-carousel.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
@import 'topcoder-includes';
@import '../partials/combined';

.tc-carousel {

ul {
display: block;
height: 148px;
margin: 0 auto;
@media only screen and (max-width: 767px) {
display: none;
}
&[slide-count="1"] {
width: 170px;
}
&[slide-count="2"] {
width: 340px;
}
&[slide-count="3"] {
width: 510px;
}
&[slide-count="4"] {
width: 680px;
}
&[slide-count="5"] {
width: 850px;
}
&[slide-count="6"] {
width: 1020px;
}
&[slide-count="7"] {
width: 1190px;
}

li {
div:last-child {
margin-right: 0;
}
}
}

.rn-carousel-controls {
position: relative;
@media only screen and (max-width: 767px) {
display: none;
}

.rn-carousel-control {
height: 148px;
width: 80px;
line-height: 148px;
top: -148px;
background-color: $gray-lightest;
color: $accent-gray;
text-align: center;
}

.rn-carousel-control-prev {
left: 0;
}

.rn-carousel-control-next {
right: 0;
}

}

.slide {
display: inline-block;
}
}
66 changes: 14 additions & 52 deletions assets/css/my-dashboard/subtrack-stats.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,48 +10,25 @@
}
}

ul {
display: block;
height: 148px;
width: 665px;
margin: 0 auto;
@media only screen and (max-width: 767px) {
display: none;
}
.slide {

li {
div:last-child {
margin-right: 0;
&:not(:first-child) {
.track:before {
content: '';
display: block;
position: absolute;
top: 32px;
left: -30px;
@include forward-slash(1px, 60px, 0, 2px, 30deg);
background-color: #D1D3D4;
@media only screen and (min-width: 768px) {
top: 42px;
left: -18px;
}
}
}
}

.rn-carousel-controls {
position: relative;
@media only screen and (max-width: 767px) {
display: none;
}

.rn-carousel-control {
height: 148px;
width: 80px;
line-height: 148px;
top: -148px;
background-color: $gray-lightest;
color: $accent-gray;
text-align: center;
}

.rn-carousel-control-prev {
left: 0;
}

.rn-carousel-control-next {
right: 0;
}

}

.track {
position: relative;
display: inline-block;
Expand Down Expand Up @@ -91,21 +68,6 @@
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;
@media only screen and (min-width: 768px) {
top: 42px;
left: -18px;
}
}

p {
@include sofia-pro-regular;
font-size: 12px;
Expand Down

0 comments on commit a995324

Please sign in to comment.