From 3de9eff5939c5414da0fd98e1db010996380cae7 Mon Sep 17 00:00:00 2001 From: Juanfran Date: Wed, 23 Jul 2014 13:35:16 +0200 Subject: [PATCH] US/121 projects pagination --- app/coffee/modules/project.coffee | 59 ++++++++++++++- app/partials/projects.jade | 15 ++-- app/styles/modules/home-projects-list.scss | 84 ++++++++++++++++------ scsslint.yml | 2 +- 4 files changed, 133 insertions(+), 27 deletions(-) diff --git a/app/coffee/modules/project.coffee b/app/coffee/modules/project.coffee index 0ad36560..3e98221c 100644 --- a/app/coffee/modules/project.coffee +++ b/app/coffee/modules/project.coffee @@ -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) diff --git a/app/partials/projects.jade b/app/partials/projects.jade index b31f805a..69137ba4 100644 --- a/app/partials/projects.jade +++ b/app/partials/projects.jade @@ -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") \ No newline at end of file + 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 \ No newline at end of file diff --git a/app/styles/modules/home-projects-list.scss b/app/styles/modules/home-projects-list.scss index 31574dd1..f53d74f3 100644 --- a/app/styles/modules/home-projects-list.scss +++ b/app/styles/modules/home-projects-list.scss @@ -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, diff --git a/scsslint.yml b/scsslint.yml index a0d94d0f..f1c36725 100644 --- a/scsslint.yml +++ b/scsslint.yml @@ -77,7 +77,7 @@ linters: SelectorDepth: enabled: true - max_depth: 3 + max_depth: 4 Shorthand: enabled: true