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

Feature/dash subtrack carousel #359

Merged
merged 2 commits into from
Oct 14, 2015
Merged

Feature/dash subtrack carousel #359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c5bbc6f
Implement carousel with buttons on screen size above 767px
Oct 14, 2015
4def3fe
Clean up
Oct 14, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions app/index.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ html
link(rel='stylesheet', href='../bower_components/ng-notifications-bar/dist/ngNotificationsBar.min.css')
link(rel='stylesheet', href='../bower_components/ngDialog/css/ngDialog.css')
link(rel='stylesheet', href='../bower_components/ngDialog/css/ngDialog-theme-default.css')
link(rel='stylesheet', href='../bower_components/angular-carousel/dist/angular-carousel.css')
//- endbower
// endbuild

Expand Down Expand Up @@ -123,6 +124,8 @@ html
script(src='../bower_components/ngDialog/js/ngDialog.js')
script(src='../bower_components/lodash/lodash.js')
script(src='../bower_components/restangular/dist/restangular.js')
script(src='../bower_components/angular-touch/angular-touch.js')
script(src='../bower_components/angular-carousel/dist/angular-carousel.js')
//- endbower
//- inject:nonBowerScripts
script(src="/scripts/auth0-angular.js")
Expand Down
32 changes: 26 additions & 6 deletions app/my-dashboard/subtrack-stats/subtrack-stats.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,7 @@

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

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

function SubtrackStatsController(ProfileService, userIdentity) {
var vm = this;
Expand All @@ -21,10 +18,13 @@
.then(function(stats) {
var trackRanks = ProfileService.getRanks(stats);
var subtrackRanks = compileSubtracks(trackRanks);
processStats(subtrackRanks);

processStats(subtrackRanks);
vm.subtrackRanks = subtrackRanks;
vm.hasRanks = !!vm.subtrackRanks.length;

buildCarouselSlide();

vm.loading = false;
})
.catch(function(err) {
Expand All @@ -46,7 +46,6 @@

} else {
return result;

}
}, []);
}
Expand All @@ -65,5 +64,26 @@
}
});
}

// 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
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This link gives information on how to show multiple items on one slide (ng-repeat within ng-repeat). The solution on stack overflow also shows how to detect screen size and decrease/increase the number of items per slide if product really pushes for that functionality.

numItemsPerSlide = numItemsPerSlide || 4;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The number of subtracks per slide is hardcoded to 4 for now. See above comment if you want to make this dynamic, and get rid of the || 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;
}
}
})();
13 changes: 13 additions & 0 deletions app/my-dashboard/subtrack-stats/subtrack-stats.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,16 @@
p.rating(ng-if="subtrack.track === 'DESIGN'", style="color: #21B2F1") {{subtrack.stat | number}}

p {{subtrack.statType}}

ul(rn-carousel, rn-carousel-controls)
li(ng-repeat="subtracks in vm.subtrackRanksCollection")
.track(ng-repeat="subtrack in subtracks", ui-sref="profile.subtrack({userHandle: vm.handle, track: subtrack.track, subTrack: subtrack.subTrack})")
.flex-wrapper
p.subtrack {{subtrack.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="subtrack.track === 'DESIGN'", style="color: #21B2F1") {{subtrack.stat | number}}

p {{subtrack.statType}}
3 changes: 2 additions & 1 deletion app/topcoder.module.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
'dcbImgFallback',
'toaster',
'angular-intro',
'ngMessages'
'ngMessages',
'angular-carousel'
];

angular.module('topcoder', dependencies).run(appRun);
Expand Down
192 changes: 113 additions & 79 deletions assets/css/my-dashboard/subtrack-stats.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,103 +6,137 @@
.tracks {
@include horizontal-scroll;
@media only screen and (min-width: 768px) {
display: flex;
flex-flow: row wrap;
justify-content: center;
overflow: visible;
white-space: normal;
display: none;
}
}

.track {
position: relative;
display: inline-block;
margin-right: 65px;
padding: 20px 0;
@media only screen and (min-width: 768px) {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 35px;
padding: 30px 20px;
cursor: pointer;

&:hover {
background-color: $gray-lightest;

.subtrack {
color: $gray-darkest;
border-bottom-color: $gray-darkest;
}

p:last-child {
color: $gray-darkest;
}
}

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

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

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

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

.flex-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.rn-carousel-control-prev {
left: 0;
}

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

&: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;
}

.track {
position: relative;
display: inline-block;
margin-right: 65px;
padding: 20px 0;
@media only screen and (min-width: 768px) {
width: 130px;
margin-right: 35px;
padding: 30px 20px;
cursor: pointer;

&:hover {
background-color: $gray-lightest;

.subtrack {
color: $gray-darkest;
border-bottom-color: $gray-darkest;
}

p:last-child {
color: $gray-darkest;
}
}
}

p {
@include sofia-pro-regular;
font-size: 12px;
color: $accent-gray;
&:first-child {
margin-left: 20px;
}

&:last-child {
text-transform: uppercase;
}
&:last-child {
margin-right: 20px;
}

.flex-wrapper {
display: flex;
flex-direction: column;
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;
color: $accent-gray;

.subtrack {
padding-bottom: 7px;
border-bottom: 1px solid #D1D3D4;
&:last-child {
text-transform: uppercase;
}
}

.rating {
position: relative;
margin-top: 17px;
margin-bottom: 7px;
font-size: 32px;
@media only screen and (max-width: 767px) {
margin-top: 10px;
}
.subtrack {
padding-bottom: 7px;
border-bottom: 1px solid #D1D3D4;
}

span {
position: absolute;
top: 5px;
right: -10px;
width: 6px;
height: 6px;
background-color: #5E9EF1;
}
.rating {
position: relative;
margin-top: 17px;
margin-bottom: 7px;
font-size: 32px;
@media only screen and (max-width: 767px) {
margin-top: 10px;
}

span {
position: absolute;
top: 5px;
right: -10px;
width: 6px;
height: 6px;
background-color: #5E9EF1;
}
}
}
Expand Down
3 changes: 2 additions & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,8 @@
"ng-busy": "~0.2.0",
"ng-notifications-bar": "~0.0.15",
"ngDialog": "0.5.1",
"restangular": "~1.5.1"
"restangular": "~1.5.1",
"angular-carousel": "~1.0.1"
},
"devDependencies": {
"bardjs": "~0.1.4",
Expand Down