Pagination

app/coffee/modules/issues/list.coffee

@@ -143,12 +143,12 @@ IssuesDirective = ($log, $location) ->
 
     linkPagination = ($scope, $el, $attrs, $ctrl) ->
         # Constants
-        afterCurrent = 5
-        beforeCurrent = 5
+        afterCurrent = 2
+        beforeCurrent = 4
         atBegin = 2
         atEnd = 2
 
-        $pagEl = $el.find("section.issues-paginator")
+        $pagEl = $el.find(".issues-paginator")
 
         getNumPages = ->
             numPages = $scope.count / $scope.paginatedBy

app/partials/issues.jade

@@ -20,3 +20,5 @@ block content
                 include views/components/mainTitle
             include views/modules/list-filters
             include views/modules/issues-table
+            div.paginator.issues-paginator
+                //-Included paginator via JS

app/partials/views/modules/issues-table.jade

@@ -12,5 +12,3 @@ section.issues-table.basic-table
             a(href="", tg-bo-html="issue.subject")
         div.issue-field(tg-issue-status="issue")
         div.assigned-field(tg-issue-assignedto="issue")
-
-section.issues-paginator

app/styles/components/paginator.scss

@@ -0,0 +1,34 @@
+.paginator {
+    margin-bottom: 2rem;
+    ul {
+        margin-left: 1rem;
+    }
+    li {
+        display: inline-block;
+    }
+    a,
+    .active span,
+    .dots {
+        @include transition (all .3s linear);
+        background: $gray-light;
+        color: $white;
+        margin-right: .1rem;
+        padding: .5rem 1rem;
+    }
+    a {
+        &:hover {
+            @include transition (all .3s linear);
+            background: $button-gray-hover;
+            color: $white;
+        }
+    }
+    .active {
+        span {
+            background: $fresh-taiga;
+        }
+    }
+    .dots {
+        background: transparent;
+        color: $gray-light;
+    }
+}

app/styles/layout/issues.scss

@@ -6,4 +6,4 @@
         opacity: 1;
         padding: 2em 1em;
     }
-}
+}

app/styles/main.scss

@@ -26,6 +26,7 @@ $prefix-for-spec:      true;
 @import 'components/taskboard-task';
 @import 'components/notification-message';
 @import 'components/basic-table';
+@import 'components/paginator';
 
 //Modules
 @import 'modules/nav';

app/styles/modules/issues-table.scss

@@ -1,5 +1,6 @@
 .issues-table {
     @include table-flex();
+    margin-bottom: 2rem;
     .row {
         &:hover {
             background: lighten($green-taiga, 60%);