Permalink
Browse files

fix(pagination): Change classes from .hidden-* to .d-* (#840)

* fix(pagination): classes .hidden-* => .d-*

* fix(pagination-nav): Classes .hidden-* => .d-*
  • Loading branch information...
tmorehouse committed Aug 14, 2017
1 parent 8dc90bb commit 0f543a1fcea6de64a52f70ab38a4b576dfe54511
Showing with 16 additions and 18 deletions.
  1. +8 −10 lib/components/pagination-nav.vue
  2. +8 −8 lib/components/pagination.vue
@@ -42,7 +42,7 @@
</li>

<!-- First Ellipsis Bookend -->
<li v-if="showFirstDots" class="page-item disabled hidden-xs-down" role="separator">
<li v-if="showFirstDots" class="page-item disabled d-none d-sm-flex" role="separator">
<span class="page-link" v-html="ellipsisText"></span>
</li>

@@ -65,7 +65,7 @@
</li>

<!-- Last Ellipsis Bookend -->
<li v-if="showLastDots" class="page-item disabled hidden-xs-down" role="separator">
<li v-if="showLastDots" class="page-item disabled d-none d-sm-flex" role="separator">
<span class="page-link" v-html="ellipsisText"></span>
</li>

@@ -334,21 +334,21 @@ export default {
if (idx === 0) {
// Keep leftmost 3 buttons visible
for (let i = 3; i < pages.length; i++) {
pages[i].className = 'hidden-xs-down';
pages[i].className = 'd-none d-sm-flex';
}
} else if (idx === pages.length - 1) {
// Keep rightmost 3 buttons visible
for (let i = 0; i < pages.length - 3; i++) {
pages[i].className = 'hidden-xs-down';
pages[i].className = 'd-none d-sm-flex';
}
} else {
// hide left button(s)
for (let i = 0; i < idx - 1; i++) {
pages[i].className = 'hidden-xs-down';
pages[i].className = 'd-none d-sm-flex';
}
// hide right button(s)
for (let i = pages.length - 1; i > idx + 1; i--) {
pages[i].className = 'hidden-xs-down';
pages[i].className = 'd-none d-sm-flex';
}
}
}
@@ -396,20 +396,18 @@ export default {
return pagenum === this.currentPage;
},
pageItemClasses(page) {
const active = this.isActive(page.number);
return [
'page-item',
this.disabled ? 'disabled' : '',
active ? 'active' : '',
this.isActive(page.number) ? 'active' : '',
page.className
];
},
pageLinkClasses(page) {
const active = this.isActive(page.number);
return [
'page-link',
this.disabled ? 'disabled' : '',
active ? 'active' : ''
this.isActive(page.number) ? 'active' : ''
];
},
getButtons() {
@@ -47,7 +47,7 @@
</li>

<!-- First Ellipsis Bookend -->
<li v-if="showFirstDots" class="page-item disabled hidden-xs-down" role="separator">
<li v-if="showFirstDots" class="page-item disabled d-none d-sm-flex" role="separator">
<span class="page-link" v-html="ellipsisText"></span>
</li>

@@ -71,7 +71,7 @@
</li>

<!-- Last Ellipsis Bookend -->
<li v-if="showLastDots" class="page-item disabled hidden-xs-down" role="separator">
<li v-if="showLastDots" class="page-item disabled d-none d-sm-flex" role="separator">
<span class="page-link" v-html="ellipsisText"></span>
</li>

@@ -211,28 +211,28 @@ export default {
// Generate list of page numbers
const pages = makePageArray(startNum, numLinks);
// We limit to a total of 3 page buttons on small screens
// Ellipsis will also be hidden on small screens
// We limit to a total of 3 page buttons on xs screens
// Ellipsis will also be hidden on xs screens
if (pages.length > 3) {
const idx = this.currentPage - startNum;
if (idx === 0) {
// Keep leftmost 3 buttons visible
for (let i = 3; i < pages.length; i++) {
pages[i].className = 'hidden-xs-down';
pages[i].className = 'd-none d-sm-flex';
}
} else if (idx === pages.length - 1) {
// Keep rightmost 3 buttons visible
for (let i = 0; i < pages.length - 3; i++) {
pages[i].className = 'hidden-xs-down';
pages[i].className = 'd-none d-sm-flex';
}
} else {
// hide left button(s)
for (let i = 0; i < idx - 1; i++) {
pages[i].className = 'hidden-xs-down';
pages[i].className = 'd-none d-sm-flex';
}
// hide right button(s)
for (let i = pages.length - 1; i > idx + 1; i--) {
pages[i].className = 'hidden-xs-down';
pages[i].className = 'd-none d-sm-flex';
}
}
}

0 comments on commit 0f543a1

Please sign in to comment.