mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2025-01-13 03:37:26 +03:00
Updated main list paginator to be sticky
This commit is contained in:
parent
3851342e1b
commit
9d1e48ee90
3 changed files with 13 additions and 3 deletions
src/short-urls
|
@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
|
||||||
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
|
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { isPageDisabled, keyForPage, progressivePagination } from '../utils/helpers/pagination';
|
import { isPageDisabled, keyForPage, progressivePagination } from '../utils/helpers/pagination';
|
||||||
|
import './Paginator.scss';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
serverId: PropTypes.string.isRequired,
|
serverId: PropTypes.string.isRequired,
|
||||||
|
@ -36,7 +37,7 @@ const Paginator = ({ paginator = {}, serverId }) => {
|
||||||
));
|
));
|
||||||
|
|
||||||
return (
|
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}>
|
<PaginationItem disabled={currentPage === 1}>
|
||||||
<PaginationLink
|
<PaginationLink
|
||||||
previous
|
previous
|
||||||
|
|
7
src/short-urls/Paginator.scss
Normal file
7
src/short-urls/Paginator.scss
Normal 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);
|
||||||
|
}
|
|
@ -25,8 +25,10 @@ const ShortUrls = (SearchBar, ShortUrlsList) => {
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<div className="form-group"><SearchBar /></div>
|
<div className="form-group"><SearchBar /></div>
|
||||||
<ShortUrlsList {...props} shortUrlsList={data} key={urlsListKey} />
|
<div>
|
||||||
<Paginator paginator={pagination} serverId={serverId} />
|
<ShortUrlsList {...props} shortUrlsList={data} key={urlsListKey} />
|
||||||
|
<Paginator paginator={pagination} serverId={serverId} />
|
||||||
|
</div>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue