LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-08-28 16:01:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

pagination styles

Browse source
This commit is contained in:
Jeremy Kauffman 2017-07-29 15:34:22 -04:00
parent d7ceeb15cf
commit 16c2eb9479
2 changed files with 33 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ui/js/page/channel/view.jsx
View file

@ -77,6 +77,12 @@ class ChannelPage extends React.PureComponent {
<ReactPaginate <ReactPaginate
pageCount={totalPages} pageCount={totalPages}
pageRangeDisplayed={2} pageRangeDisplayed={2}
previousLabel="‹"
nextLabel="›"
activeClassName="pagination__item--selected"
pageClassName="pagination__item"
previousClassName="pagination__item pagination__item--previous"
nextClassName="pagination__item pagination__item--next"
marginPagesDisplayed={2} marginPagesDisplayed={2}
onPageChange={e => this.changePage(e.selected + 1)} onPageChange={e => this.changePage(e.selected + 1)}
initialPage={parseInt(page - 1)} initialPage={parseInt(page - 1)}

40
ui/scss/component/_pagination.scss
View file

@ -1,18 +1,32 @@
ul.pagination { @import "../global";
display: inline-block;
.pagination {
display: block;
padding: 0; padding: 0;
margin: 0; margin: 0 auto;
text-align: center;
} }
ul.pagination li { .pagination__item {
display: inline; display: inline-block;
float: left; line-height: $spacing-vertical * 1.5;
padding: 8px 16px; height: $spacing-vertical * 1.5;
} border-radius: 2px;
&:not(.pagination__item--selected):hover {
ul.pagination li:not(.selected) { background: rgba(0, 0, 0, 0.2);
background: white; > a { cursor: hand }
a { }
cursor: hand; > a {
display: inline-block;
padding: 0 $spacing-vertical * 2 / 3;
} }
} }
.pagination__item--previous, .pagination__item--next {
font-size: 1.2em;
}
.pagination__item--selected {
color: white;
background: $color-primary;
}