From 9d1e48ee905e5bd9e3d16018442c0768fa9c65bc Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Fri, 10 Apr 2020 13:42:16 +0200
Subject: [PATCH] Updated main list paginator to be sticky

---
 src/short-urls/Paginator.js   | 3 ++-
 src/short-urls/Paginator.scss | 7 +++++++
 src/short-urls/ShortUrls.js   | 6 ++++--
 3 files changed, 13 insertions(+), 3 deletions(-)
 create mode 100644 src/short-urls/Paginator.scss

diff --git a/src/short-urls/Paginator.js b/src/short-urls/Paginator.js
index 46783dc7..dd976954 100644
--- a/src/short-urls/Paginator.js
+++ b/src/short-urls/Paginator.js
@@ -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
diff --git a/src/short-urls/Paginator.scss b/src/short-urls/Paginator.scss
new file mode 100644
index 00000000..0e8142e2
--- /dev/null
+++ b/src/short-urls/Paginator.scss
@@ -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);
+}
diff --git a/src/short-urls/ShortUrls.js b/src/short-urls/ShortUrls.js
index e9aa96d6..a4cc23c4 100644
--- a/src/short-urls/ShortUrls.js
+++ b/src/short-urls/ShortUrls.js
@@ -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>
     );
   };