Merge pull request #1918 from wallabag/improve-pagination

Improve pagination when user has lot of entries

2 files changed, 27 insertions, 7 deletions

diff --git a/src/Wallabag/CoreBundle/Resources/public/themes/baggy/css/main.css b/src/Wallabag/CoreBundle/Resources/public/themes/baggy/css/main.css
index 1cb2ddf3..ba430cc4 100755
--- a/src/Wallabag/CoreBundle/Resources/public/themes/baggy/css/main.css
+++ b/src/Wallabag/CoreBundle/Resources/public/themes/baggy/css/main.css
@@ -512,7 +512,7 @@ img.preview {
   width: 50%;
 }
 
-.pagination {
+div.pagination ul {
   text-align: right;
   margin-bottom:50px;
 }
@@ -523,25 +523,25 @@ img.preview {
   color: #999;
 }
 
-.pagination > * {
+div.pagination ul > * {
   display: inline-block;
   margin-left: 0.5em;
 }
 
-.pagination a {
+div.pagination ul a {
   color: #999;
   text-decoration: none;
 }
 
-  .pagination a:hover, .pagination a:focus {
+div.pagination ul a:hover, div.pagination ul a:focus {
     text-decoration: underline;
-  }
+}
 
-.pagination .disabled {
+div.pagination ul .disabled {
   display: none;
 }
 
-.pagination .current {
+div.pagination ul .current {
   height: 25px;
   padding: 4px 8px;
   border: 1px solid #d5d5d5;
diff --git a/src/Wallabag/CoreBundle/Resources/public/themes/material/css/main.css b/src/Wallabag/CoreBundle/Resources/public/themes/material/css/main.css
index 96c38822..a3915b1d 100755
--- a/src/Wallabag/CoreBundle/Resources/public/themes/material/css/main.css
+++ b/src/Wallabag/CoreBundle/Resources/public/themes/material/css/main.css
@@ -80,6 +80,14 @@ main, #content, .valign-wrapper {
     margin-bottom: 0;
 }
 
+.pagination {
+    float: right;
+}
+
+.pagination ul {
+    margin: 0 !important;
+}
+
 .pagination li {
     padding: 0;
 }
@@ -90,6 +98,18 @@ main, #content, .valign-wrapper {
     display: block;
 }
 
+.pagination li.active span {
+    padding: 0px 10px;
+    height: 30px;
+    display: block;
+    color: #fff;
+}
+
+.pagination .disabled {
+    margin-right: 10px;
+    margin-left: 10px;
+}
+
 .page-footer .footer-copyright p {
     display: inline;
 }