Merge pull request #1918 from wallabag/improve-pagination

Improve pagination when user has lot of entries

app/AppKernel.php

@@ -22,19 +22,22 @@ class AppKernel extends Kernel
             new Nelmio\ApiDocBundle\NelmioApiDocBundle(),
             new Nelmio\CorsBundle\NelmioCorsBundle(),
             new Liip\ThemeBundle\LiipThemeBundle(),
-            new Wallabag\CoreBundle\WallabagCoreBundle(),
-            new Wallabag\ApiBundle\WallabagApiBundle(),
             new Bazinga\Bundle\HateoasBundle\BazingaHateoasBundle(),
             new Lexik\Bundle\FormFilterBundle\LexikFormFilterBundle(),
             new FOS\OAuthServerBundle\FOSOAuthServerBundle(),
-            new Wallabag\UserBundle\WallabagUserBundle(),
             new Stof\DoctrineExtensionsBundle\StofDoctrineExtensionsBundle(),
             new Scheb\TwoFactorBundle\SchebTwoFactorBundle(),
             new KPhoen\RulerZBundle\KPhoenRulerZBundle(),
-            new Wallabag\ImportBundle\WallabagImportBundle(),
             new Doctrine\Bundle\MigrationsBundle\DoctrineMigrationsBundle(),
             new Craue\ConfigBundle\CraueConfigBundle(),
             new Lexik\Bundle\MaintenanceBundle\LexikMaintenanceBundle(),
+            new WhiteOctober\PagerfantaBundle\WhiteOctoberPagerfantaBundle(),
+
+            // wallabag bundles
+            new Wallabag\CoreBundle\WallabagCoreBundle(),
+            new Wallabag\ApiBundle\WallabagApiBundle(),
+            new Wallabag\UserBundle\WallabagUserBundle(),
+            new Wallabag\ImportBundle\WallabagImportBundle(),
             new Wallabag\AnnotationBundle\WallabagAnnotationBundle(),
         ];
 

app/config/services.yml

@@ -6,7 +6,7 @@ services:
     filesystem_cache:
         class: Doctrine\Common\Cache\FilesystemCache
         arguments:
-            - %kernel.cache_dir%/doctrine/metadata
+            - "%kernel.cache_dir%/doctrine/metadata"
 
     twig.extension.text:
         class: Twig_Extensions_Extension_Text

composer.json

@@ -80,7 +80,8 @@
         "craue/config-bundle": "~1.4",
         "mnapoli/piwik-twig-extension": "^1.0",
         "lexik/maintenance-bundle": "~2.1",
-        "ocramius/proxy-manager": "1.*"
+        "ocramius/proxy-manager": "1.*",
+        "white-october/pagerfanta-bundle": "^1.0"
     },
     "require-dev": {
         "doctrine/doctrine-fixtures-bundle": "~2.2",

src/Wallabag/CoreBundle/Resources/config/services.yml

@@ -3,14 +3,14 @@ services:
         class: Wallabag\CoreBundle\Helper\DetectActiveTheme
         arguments:
             - "@security.token_storage"
-            - %wallabag_core.theme%
+            - "%wallabag_core.theme%"
 
     # custom form type
     wallabag_core.form.type.config:
         class: Wallabag\CoreBundle\Form\Type\ConfigType
         arguments:
-            - %liip_theme.themes%
-            - %wallabag_core.languages%
+            - "%liip_theme.themes%"
+            - "%wallabag_core.languages%"
         tags:
             - { name: form.type }
 
@@ -32,7 +32,7 @@ services:
     wallabag_core.table_prefix_subscriber:
         class: Wallabag\CoreBundle\Subscriber\TablePrefixSubscriber
         arguments:
-            - %database_table_prefix%
+            - "%database_table_prefix%"
         tags:
             - { name: doctrine.event_subscriber }
 
@@ -92,10 +92,10 @@ services:
         class: Wallabag\CoreBundle\EventListener\RegistrationConfirmedListener
         arguments:
             - "@doctrine.orm.entity_manager"
-            - %wallabag_core.theme%
-            - %wallabag_core.items_on_page%
-            - %wallabag_core.rss_limit%
-            - %wallabag_core.language%
+            - "%wallabag_core.theme%"
+            - "%wallabag_core.items_on_page%"
+            - "%wallabag_core.rss_limit%"
+            - "%wallabag_core.language%"
         tags:
             - { name: kernel.event_subscriber }
 

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;

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;
 }

src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entries.html.twig

@@ -6,16 +6,9 @@
     {% block pager %}
         <div class="results">
             <div class="nb-results">{{ 'entry.list.number_on_the_page'|transchoice(entries.count) }}</div>
-                <div class="pagination">
+            <div class="pagination">
                 <a href="#" id="filter">{{ 'entry.filters.title'|trans }}</a>
-                {% if entries is not empty %}
-                    –
-                    {% for p in range(1, entries.nbPages) if entries.nbPages > 1 %}
-                        <li>
-                            <a href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'page': p})) }}" class="{{ currentPage == p ? 'current':''}}" >{{ p }}</a>
-                        </li>
-                    {% endfor %}
-                {% endif %}
+                {{ pagerfanta(entries, 'twitter_bootstrap_translated', {'proximity': 1}) }}
             </div>
         </div>
     {% endblock %}

src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig

@@ -21,13 +21,7 @@
         <div class="nb-results left">
             {{ 'entry.list.number_on_the_page'|transchoice(entries.count) }}
         </div>
-        <ul class="pagination right">
-            {% for p in range(1, entries.nbPages) if entries.nbPages > 1 %}
-                <li class="{{ currentPage == p ? 'active':'waves-effect'}}">
-                    <a href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'page': p})) }}">{{ p }}</a>
-                </li>
-            {% endfor %}
-        </ul>
+        {{ pagerfanta(entries, 'twitter_bootstrap_translated', {'proximity': 1}) }}
     </div>
     {% endblock %}
     <br />

src/Wallabag/CoreBundle/Tests/Controller/EntryControllerTest.php

@@ -522,7 +522,7 @@ class EntryControllerTest extends WallabagCoreTestCase
 
         $client->submit($form, $data);
 
-        $parameters = '?entry_filter%5BreadingTime%5D%5Bleft_number%5D=&entry_filter%5BreadingTime%5D%5Bright_number%5D=';
+        $parameters = '?entry_filter%5BreadingTime%5D%5Bleft_number%5D=&entry_filter%5BreadingTime%5D%5Bright_number%5D=';
 
         $client->request('GET', 'unread/list'.$parameters);