diff --git a/packages/frontend/src/app/validator/[hash]/Validator.js b/packages/frontend/src/app/validator/[hash]/Validator.js index 1fa03f33..7f746a72 100644 --- a/packages/frontend/src/app/validator/[hash]/Validator.js +++ b/packages/frontend/src/app/validator/[hash]/Validator.js @@ -423,12 +423,13 @@ function Validator ({ hash }) { : } - {proposedBlocks.data?.resultSet?.length > 0 && + {proposedBlocks.data?.resultSet &&
paginationHandler(setProposedBlocks, pagination.selected)} pageCount={Math.ceil(proposedBlocks.data?.pagination?.total / pageSize) || 1} forcePage={currentPage} + pageRangeDisplayed={0} />
} @@ -445,13 +446,13 @@ function Validator ({ hash }) { : } - {transactions.data?.resultSet?.length > 0 && + {transactions.data?.resultSet &&
paginationHandler(setTransactions, pagination.selected)} pageCount={Math.ceil(transactions.data?.pagination?.total / pageSize) || 1} forcePage={currentPage} + pageRangeDisplayed={0} />
} diff --git a/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss b/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss index 90cebb92..21fbfa78 100644 --- a/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss +++ b/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss @@ -35,6 +35,20 @@ &__ListPagination { margin-top: 20px; + + .PageItem { + &--Previous, &--Next { + display: block; + } + + &--Previous { + margin-right: auto; + } + + &--Next { + margin-left: auto; + } + } } &__List { diff --git a/packages/frontend/src/components/pagination/index.js b/packages/frontend/src/components/pagination/index.js index 0083da14..3efba594 100644 --- a/packages/frontend/src/components/pagination/index.js +++ b/packages/frontend/src/components/pagination/index.js @@ -2,7 +2,13 @@ import './Pagination.scss' import ReactPaginate from 'react-paginate' -function Pagination ({ onPageChange, pageCount, forcePage }) { +function Pagination ({ + onPageChange, + pageCount, + forcePage, + pageRangeDisplayed = 2, + marginPagesDisplayed = 1 +}) { pageCount = Math.max(pageCount, 1) return ( @@ -10,8 +16,8 @@ function Pagination ({ onPageChange, pageCount, forcePage }) { breakLabel={'...'} nextLabel={'>'} onPageChange={onPageChange} - pageRangeDisplayed={2} - marginPagesDisplayed={1} + pageRangeDisplayed={pageRangeDisplayed} + marginPagesDisplayed={marginPagesDisplayed} pageCount={pageCount} previousLabel={'<'} pageClassName={'PageItem'}