Merge pull request #3459 from Simounet/fix/pagination

Pagination improved

app/Resources/static/themes/material/css/cards.scss

@@ -8,6 +8,7 @@ main {
   }
 
   ul.row {
+    margin: 0.4rem 0 0;
     padding: 0 0.75rem;
   }
 }

app/Resources/static/themes/material/css/entries.scss

@@ -12,12 +12,10 @@
 }
 
 .results {
-  height: 1em;
-
-  .nb-results,
-  .pagination {
-    margin: 15px 15px 0;
-  }
+  display: flex;
+  padding: 1rem 1rem 0;
+  flex-wrap: wrap;
+  justify-content: space-between;
 
   .nb-results {
     display: inline-flex;
@@ -29,10 +27,11 @@
 }
 
 .pagination {
-  float: right;
-
   ul {
-    margin: 0 !important;
+    display: flex;
+    margin: 0;
+    flex-wrap: wrap;
+    justify-content: space-around;
 
     .prev.disabled,
     .next.disabled {
@@ -44,10 +43,12 @@
     padding: 0;
   }
 
+  span,
   a {
     padding: 0 10px;
     height: 30px;
     display: block;
+    line-height: 30px;
   }
 
   .disabled {

app/Resources/static/themes/material/css/media_queries.scss

@@ -8,6 +8,10 @@
   footer {
     padding-left: 240px;
   }
+
+  .pagination {
+    margin-left: auto;
+  }
 }
 
 @media only screen and (max-width: 992px) {
@@ -18,10 +22,6 @@
     padding-left: 0;
   }
 
-  .pagination {
-    width: auto;
-  }
-
   .nav-panels .action {
     padding-right: 0.75rem;
   }
@@ -62,9 +62,13 @@
     display: none;
   }
 
-  .pagination li.prev,
-  .pagination li.next {
-    width: auto;
+  .pagination li {
+    margin-bottom: 0.5rem;
+
+    &.prev,
+    &.next {
+      width: auto;
+    }
   }
 
   .drag-target + .drag-target {

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

@@ -21,8 +21,8 @@
 {% block content %}
     {% set listMode = app.user.config.listMode %}
     {% set currentRoute = app.request.attributes.get('_route') %}
-    <div class="results clearfix">
-        <div class="nb-results left">
+    <div class="results">
+        <div class="nb-results">
             {{ 'entry.list.number_on_the_page'|transchoice(entries.count) }}
             <a href="{{ path('switch_view_mode') }}"><i class="material-icons">{% if listMode == 0 %}view_list{% else %}view_module{% endif %}</i></a>
             {% if app.user.config.rssToken %}
@@ -34,7 +34,6 @@
         {% endif %}
     </div>
 
-    <br />
     <ul class="{% if listMode == 1 %}collection{% else %}row data{% endif %}">
         {% for entry in entries %}
             <li id="entry-{{ entry.id|e }}" class="col {% if listMode == 0 %}l3 m6{% else %}collection-item{% endif %} s12">
@@ -52,7 +51,9 @@
     </ul>
 
     {% if entries.getNbPages > 1 %}
-        {{ pagerfanta(entries, 'twitter_bootstrap_translated', {'proximity': 1}) }}
+        <div class="results">
+            {{ pagerfanta(entries, 'twitter_bootstrap_translated', {'proximity': 1}) }}
+        </div>
     {% endif %}
 
     <!-- Export -->