Resolve "BS4: Pagination is pipeline's page has no styling"
This commit is contained in:
Sam Beckham
Clement Ho
parent
27fcc4d246
commit
df5b4c0038
11 changed files with 25 additions and 102 deletions
|
|
@ -124,15 +124,18 @@
|
|||
break;
|
||||
}
|
||||
},
|
||||
hideOnSmallScreen(item) {
|
||||
return !item.first && !item.last && !item.next && !item.prev && !item.active;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
v-if="showPagination"
|
||||
class="gl-pagination"
|
||||
class="gl-pagination prepend-top-default"
|
||||
>
|
||||
<ul class="pagination clearfix">
|
||||
<ul class="pagination justify-content-center">
|
||||
<li
|
||||
v-for="(item, index) in getItems"
|
||||
:key="index"
|
||||
|
|
@ -142,12 +145,17 @@
|
|||
'js-next-button': item.next,
|
||||
'js-last-button': item.last,
|
||||
'js-first-button': item.first,
|
||||
'd-none d-md-block': hideOnSmallScreen(item),
|
||||
separator: item.separator,
|
||||
active: item.active,
|
||||
disabled: item.disabled
|
||||
disabled: item.disabled || item.separator
|
||||
}"
|
||||
class="page-item"
|
||||
>
|
||||
<a @click.prevent="changePage(item.title, item.disabled)">
|
||||
<a
|
||||
@click.prevent="changePage(item.title, item.disabled)"
|
||||
class="page-link"
|
||||
>
|
||||
{{ item.title }}
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,91 +1,6 @@
|
|||
.gl-pagination {
|
||||
text-align: center;
|
||||
border-top: 1px solid $border-color;
|
||||
margin: 0;
|
||||
margin-top: 0;
|
||||
|
||||
.pagination {
|
||||
padding: 0;
|
||||
margin: 20px 0;
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.separator,
|
||||
.separator:hover {
|
||||
a {
|
||||
cursor: default;
|
||||
background-color: $gray-light;
|
||||
padding: $gl-vert-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.gap,
|
||||
.gap:hover {
|
||||
background-color: $gray-light;
|
||||
padding: $gl-vert-padding;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.card > .gl-pagination {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Extra-small screen pagination.
|
||||
*/
|
||||
@media (max-width: 320px) {
|
||||
.gl-pagination {
|
||||
.first,
|
||||
.last {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Small screen pagination
|
||||
*/
|
||||
@include media-breakpoint-down(xs) {
|
||||
.gl-pagination {
|
||||
.pagination li a {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Medium screen pagination
|
||||
*/
|
||||
@media (min-width: map-get($grid-breakpoints, xs)) and (max-width: map-get($grid-breakpoints, sm)) {
|
||||
.gl-pagination {
|
||||
.page-item {
|
||||
display: none;
|
||||
|
||||
&.active,
|
||||
&.sibling {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,5 +5,5 @@
|
|||
-# total_pages: total number of pages
|
||||
-# per_page: number of items to fetch per page
|
||||
-# remote: data-remote
|
||||
%li.first.page-item
|
||||
%li.page-item.js-first-button
|
||||
= link_to_unless current_page.first?, raw(t 'views.pagination.first'), url, remote: remote, class: 'page-link'
|
||||
|
|
|
|||
|
|
@ -4,5 +4,5 @@
|
|||
-# total_pages: total number of pages
|
||||
-# per_page: number of items to fetch per page
|
||||
-# remote: data-remote
|
||||
%li.page-item.disabled
|
||||
%li.page-item.disabled.d-none.d-md-block
|
||||
= link_to raw(t 'views.pagination.truncate'), '#', class: 'page-link'
|
||||
|
|
|
|||
|
|
@ -5,5 +5,5 @@
|
|||
-# total_pages: total number of pages
|
||||
-# per_page: number of items to fetch per page
|
||||
-# remote: data-remote
|
||||
%li.last.page-item
|
||||
%li.page-item.js-last-button
|
||||
= link_to_unless current_page.last?, raw(t 'views.pagination.last'), url, {remote: remote, class: 'page-link'}
|
||||
|
|
|
|||
|
|
@ -8,5 +8,5 @@
|
|||
|
||||
- page_url = current_page.last? ? '#' : url
|
||||
|
||||
%li.page-item{ class: ('disabled' if current_page.last?) }
|
||||
%li.page-item.js-next-button{ class: ('disabled' if current_page.last?) }
|
||||
= link_to raw(t 'views.pagination.next'), page_url, rel: 'next', remote: remote, class: 'page-link'
|
||||
|
|
|
|||
|
|
@ -6,5 +6,5 @@
|
|||
-# total_pages: total number of pages
|
||||
-# per_page: number of items to fetch per page
|
||||
-# remote: data-remote
|
||||
%li.page-item.js-pagination-page{ class: [active_when(page.current?), ('sibling' if page.next? || page.prev?)] }
|
||||
%li.page-item.js-pagination-page{ class: [active_when(page.current?), ('sibling' if page.next? || page.prev?), ('d-none d-md-block' if !page.current?) ] }
|
||||
= link_to page, url, { remote: remote, rel: page.next? ? 'next' : page.prev? ? 'prev' : nil, class: 'page-link' }
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
-# remote: data-remote
|
||||
-# paginator: the paginator that renders the pagination tags inside
|
||||
= paginator.render do
|
||||
.gl-pagination
|
||||
.gl-pagination.prepend-top-default
|
||||
%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
|
||||
|
|
|
|||
|
|
@ -8,5 +8,5 @@
|
|||
|
||||
- page_url = current_page.first? ? '#' : url
|
||||
|
||||
%li.page-item{ class: ('disabled' if current_page.first?) }
|
||||
%li.page-item.js-previous-button{ class: ('disabled' if current_page.first?) }
|
||||
= link_to raw(t 'views.pagination.previous'), page_url, rel: 'prev', remote: remote, class: 'page-link'
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.gl-pagination
|
||||
%ul.pagination.clearfix
|
||||
.gl-pagination.prepend-top-default
|
||||
%ul.pagination.justify-content-center
|
||||
- if previous_path
|
||||
%li.page-item.prev
|
||||
= link_to(t('views.pagination.previous'), previous_path, rel: 'prev', class: 'page-link')
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ describe('Pagination component', () => {
|
|||
|
||||
expect(
|
||||
component.$el.querySelector('.js-previous-button').classList.contains('disabled'),
|
||||
).toEqual(true);
|
||||
).toEqual(true);
|
||||
|
||||
component.$el.querySelector('.js-previous-button a').click();
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue