mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-10-23 21:16:11 +03:00
Code Issues Projects Releases Packages Wiki Activity

Updated main list paginator to be sticky

Browse source
This commit is contained in:
Alejandro Celaya 2020-04-10 13:42:16 +02:00
parent 3851342e1b
commit 9d1e48ee90
3 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/short-urls/Paginator.js
View file

@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
import PropTypes from 'prop-types';
import { isPageDisabled, keyForPage, progressivePagination } from '../utils/helpers/pagination';
import './Paginator.scss';
const propTypes = {
serverId: PropTypes.string.isRequired,
@ -36,7 +37,7 @@ const Paginator = ({ paginator = {}, serverId }) => {
));
return (
<Pagination listClassName="flex-wrap justify-content-center">
<Pagination className="short-urls-paginator" listClassName="flex-wrap justify-content-center mb-0">
<PaginationItem disabled={currentPage === 1}>
<PaginationLink
previous

7
src/short-urls/Paginator.scss Normal file
View file

@ -0,0 +1,7 @@
.short-urls-paginator {
position: sticky;
bottom: 0;
background-color: rgba(white, .8);
padding: .75rem 0;
border-top: 1px solid rgba(black, .125);
}

6
src/short-urls/ShortUrls.js
View file

@ -25,8 +25,10 @@ const ShortUrls = (SearchBar, ShortUrlsList) => {
return (
<React.Fragment>
<div className="form-group"><SearchBar /></div>
<ShortUrlsList {...props} shortUrlsList={data} key={urlsListKey} />
<Paginator paginator={pagination} serverId={serverId} />
<div>
<ShortUrlsList {...props} shortUrlsList={data} key={urlsListKey} />
<Paginator paginator={pagination} serverId={serverId} />
</div>
</React.Fragment>
);
};