US/121 projects pagination

app/coffee/modules/project.coffee

@@ -11,7 +11,62 @@ class ProjectController extends taiga.Controller
 
     loadInitialData: ->
         return @rs.projects.list().then (projects) =>
-            @.projects = projects
+            @.projects = {'recents': projects.slice(0, 8), 'all': projects.slice(6)}
-            return projects
 
 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)

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
+                div(tg-projects-pagination)
-                    li(ng-repeat="project in ctrl.projects")
+                    a.pagination-previous.icon.icon-arrow-up(href="")
-                        a.button(href="", tg-bo-html="project.name", tg-nav="project-backlog:project=project.slug")
+                    .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

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 {
-    a {
+            @extend %large;
-        @extend %large;
+            @extend %title;
-        @extend %title;
+            color: $whitish;
-        color: $whitish;
+            display: block;
-        display: block;
+            padding: 1rem;
-        padding: 1rem;
+            text-transform: uppercase;
-        text-transform: uppercase;
+            width: 100%;
-        width: 100%;
+            &.active,
-        &.active,
+            &:hover {
-        &:hover {
+                @include transition (background-color .3s linear);
-            @include transition (background-color .3s linear);
+                background-color: $gray;
-            background-color: $gray;
+                .icon {
-            .icon {
+                    @include transition (opacity .3s linear);
-                @include transition (opacity .3s linear);
+                    opacity: 1;
-                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,

scsslint.yml

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