taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

US/121 projects pagination

stable
Juanfran 2014-07-23 13:35:16 +02:00
parent 93d74affd3
commit 3de9eff593
4 changed files with 133 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
app/coffee/modules/project.coffee
View File

@ -11,7 +11,62 @@ class ProjectController extends taiga.Controller
loadInitialData: ->
return @rs.projects.list().then (projects) =>
@.projects = projects
return projects
@.projects = {'recents': projects.slice(0, 8), 'all': projects.slice(6)}
module.controller("ProjectController", ProjectController)
ProjectsPaginationDirective = () ->
itemsPerPage = 7
nextPage = (element, pageSize) ->
top = parseInt(element.css('top'), 10)
newTop = top - pageSize
element.animate({"top": newTop});
return newTop
prevPage = (element, pageSize) ->
top = parseInt(element.css('top'), 10)
newTop = top + pageSize
element.animate({"top": newTop});
return newTop
visible = (element) ->
element.css('visibility', 'visible')
hide = (element) ->
element.css('visibility', 'hidden')
link = ($scope, $el, $attrs) ->
prevBtn = $el.find(".pagination-previous")
nextBtn = $el.find(".pagination-next")
container = $el.find("ul")
pageSize = $el.find(".pagination-list").height()
containerSize = 0
prevBtn.on "click", (event) ->
event.preventDefault()
visible(nextBtn)
if -prevPage(container, pageSize) == 0
hide(prevBtn)
nextBtn.on "click", (event) ->
event.preventDefault()
visible(prevBtn)
if -nextPage(container, pageSize) + pageSize > containerSize
hide(nextBtn)
$scope.$watch 'ctrl.projects', () ->
items = $el.find('li')
if items.length > itemsPerPage
containerSize = container.height()
visible(nextBtn)
module.directive("tgProjectsPagination", ProjectsPaginationDirective)

15
app/partials/projects.jade
View File

@ -7,7 +7,7 @@ block content
div.home-projects-list(ng-controller="ProjectController as ctrl")
.home-projects-list-inner
ul.recent-projects
li(ng-repeat="project in ctrl.projects")
li(ng-repeat="project in ctrl.projects.recents")
.project-content
h2(tg-bo-html="project.name")
p(tg-bo-html="project.description")
@ -16,6 +16,13 @@ block content
div.all-projects
h1 Projects
ul
li(ng-repeat="project in ctrl.projects")
a.button(href="", tg-bo-html="project.name", tg-nav="project-backlog:project=project.slug")
div(tg-projects-pagination)
a.pagination-previous.icon.icon-arrow-up(href="")
.pagination-list
ul
li(ng-repeat="project in ctrl.projects.all")
a.button(href="", tg-bo-html="project.name", tg-nav="project-backlog:project=project.slug")
a.pagination-next.icon.icon-arrow-bottom(href="")
.create-project-button-wrapper
a.button.button-green(href="", tg-nav="create-project") Create project

84
app/styles/modules/home-projects-list.scss
View File

@ -1,6 +1,7 @@
.home-projects-list {
align-items: center;
background-image: url('/images/project-selector.jpg');
background-position: center center;
background-size: cover;
display: flex;
height: 100%;
@ -15,6 +16,7 @@
.all-projects {
background-color: rgba(0, 0, 0, .5);
flex-grow: 0;
flex-wrap: wrap;
margin-left: 2rem;
min-width: 285px;
padding: 1rem;
@ -22,31 +24,70 @@
color: $whitish;
padding-left: 1rem;
}
.pagination-list {
height: 385px;
overflow: hidden;
}
ul {
left: 0;
margin-bottom: 0;
position: relative;
top: 0;
width: 100%;
}
li {
border-bottom: 2px solid $gray;
}
a {
@extend %large;
@extend %title;
color: $whitish;
display: block;
padding: 1rem;
text-transform: uppercase;
width: 100%;
&.active,
&:hover {
@include transition (background-color .3s linear);
background-color: $gray;
.icon {
@include transition (opacity .3s linear);
opacity: 1;
a {
@extend %large;
@extend %title;
color: $whitish;
display: block;
padding: 1rem;
text-transform: uppercase;
width: 100%;
&.active,
&:hover {
@include transition (background-color .3s linear);
background-color: $gray;
.icon {
@include transition (opacity .3s linear);
opacity: 1;
}
}
}
}
.create-project-button-wrapper {
position: relative;
width: 100%;
}
.button-green {
color: $whitish;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 100%;
}
.pagination-next,
.pagination-previous {
background-color: $button-gray;
color: $whitish;
display: block;
padding: .1rem 0;
text-align: center;
visibility: hidden;
width: 100%;
&:hover {
@include transition (background .3s linear);
background-color: $button-gray / 2;
}
}
.pagination-next {
margin-bottom: 1rem;
}
}
.home-projects-list-inner {
align-items: strech;
display: flex;
height: 575px;
max-width: 1300px;
@ -56,7 +97,6 @@
display: flex;
flex-grow: 0;
flex-wrap: wrap;
justify-content: space-between;
margin: 0;
li {
background-color: rgba(255, 255, 255, .5);
@ -64,12 +104,16 @@
flex-grow: 0;
flex-shrink: 0;
flex-wrap: wrap;
max-width: 32%;
height: 280px;
margin-right: 1rem;
max-width: 23.5%;
padding: 2rem;
&:nth-child(-n+3) {
&:nth-child(-n+4) {
margin-bottom: 1rem;
}
&:nth-child(4n) {
margin-right: 0;
}
}
h2,
a,

2
scsslint.yml
View File

@ -77,7 +77,7 @@ linters:
SelectorDepth:
enabled: true
max_depth: 3
max_depth: 4
Shorthand:
enabled: true