[skip ci] Add pagination styles

app/assets/stylesheets/framework/pagination.scss

@@ -6,6 +6,7 @@
   .pagination {
     padding: 0;
+    margin: 20px 0;
     a {
       cursor: pointer;
@@ -44,7 +45,7 @@
       display: none;
     }
-    .page {
+    .page-item {
       display: none;
       &.active {
@@ -63,7 +64,7 @@
       padding: 6px 10px;
     }
-    .page {
+    .page-item {
       display: none;
       &.active {
@@ -78,7 +79,7 @@
  */
 @media (min-width: map-get($grid-breakpoints, xs)) and (max-width: map-get($grid-breakpoints, sm)) {
   .gl-pagination {
-    .page {
+    .page-item {
       display: none;
       &.active,

app/views/kaminari/gitlab/_first_page.html.haml

@@ -5,5 +5,5 @@
 -#    total_pages:   total number of pages
 -#    per_page:      number of items to fetch per page
 -#    remote:        data-remote
-%li.first
+%li.first.page-item
   = link_to_unless current_page.first?, raw(t 'views.pagination.first'), url, remote: remote

app/views/kaminari/gitlab/_gap.html.haml

@@ -4,6 +4,5 @@
 -#    total_pages:   total number of pages
 -#    per_page:      number of items to fetch per page
 -#    remote:        data-remote
-%li
-  %span.gap
-    = raw(t 'views.pagination.truncate')
+%li.page-item
+  = link_to raw(t 'views.pagination.truncate'), '#', class: 'page-link'

app/views/kaminari/gitlab/_last_page.html.haml

@@ -5,5 +5,5 @@
 -#    total_pages:   total number of pages
 -#    per_page:      number of items to fetch per page
 -#    remote:        data-remote
-%li.last
+%li.last.page-item
   = link_to_unless current_page.last?, raw(t 'views.pagination.last'), url, {remote: remote}

app/views/kaminari/gitlab/_next_page.html.haml

@@ -5,9 +5,8 @@
 -#    total_pages:   total number of pages
 -#    per_page:      number of items to fetch per page
 -#    remote:        data-remote
-- if current_page.last?
-  %li.next.disabled
-    %span= raw(t 'views.pagination.next')
-- else
-  %li.next
-    = link_to raw(t 'views.pagination.next'), url, rel: 'next', remote: remote
+
+- page_url = current_page.last? ? '#' : url
+
+%li.page-item{ class: ('disabled' if current_page.last?) }
+  = link_to raw(t 'views.pagination.next'), page_url, rel: 'next', remote: remote, class: 'page-link'

app/views/kaminari/gitlab/_page.html.haml

@@ -6,5 +6,5 @@
 -#    total_pages:   total number of pages
 -#    per_page:      number of items to fetch per page
 -#    remote:        data-remote
-%li.page{ class: [active_when(page.current?), ('sibling' if page.next? || page.prev?)] }
-  = link_to page, url, { remote: remote, rel: page.next? ? 'next' : page.prev? ? 'prev' : nil }
+%li.page-item{ class: [active_when(page.current?), ('sibling' if page.next? || page.prev?)] }
+  = link_to page, url, { remote: remote, rel: page.next? ? 'next' : page.prev? ? 'prev' : nil, class: 'page-link' }

app/views/kaminari/gitlab/_paginator.html.haml

@@ -7,7 +7,7 @@
 -#    paginator:     the paginator that renders the pagination tags inside
 = paginator.render do
   .gl-pagination
-    %ul.pagination.clearfix
+    %ul.pagination.justify-content-center
       - unless current_page.first?
         = first_page_tag unless total_pages < 5 # As kaminari will always show the first 5 pages
       = prev_page_tag

app/views/kaminari/gitlab/_prev_page.html.haml

@@ -5,9 +5,8 @@
 -#    total_pages:   total number of pages
 -#    per_page:      number of items to fetch per page
 -#    remote:        data-remote
-- if current_page.first?
-  %li.prev.disabled
-    %span= raw(t 'views.pagination.previous')
-- else
-  %li.prev
-    = link_to raw(t 'views.pagination.previous'), url, rel: 'prev', remote: remote
+
+- page_url = current_page.first? ? '#' : url
+
+%li.page-item{ class: ('disabled' if current_page.first?) }
+  = link_to raw(t 'views.pagination.next'), page_url, rel: 'next', remote: remote, class: 'page-link'