US/121 projects pagination
Juanfran
parent
93d74affd3
commit
3de9eff593
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
div(tg-projects-pagination)
|
||||
a.pagination-previous.icon.icon-arrow-up(href="")
|
||||
.pagination-list
|
||||
ul
|
||||
li(ng-repeat="project in ctrl.projects")
|
||||
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
|
||||
|
|
@ -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,9 +24,19 @@
|
|||
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;
|
||||
|
|
@ -43,10 +55,39 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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,
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ linters:
|
|||
|
||||
SelectorDepth:
|
||||
enabled: true
|
||||
max_depth: 3
|
||||
max_depth: 4
|
||||
|
||||
Shorthand:
|
||||
enabled: true
|
||||
|
|
|
|||
Loading…
Reference in New Issue