Merge pull request #526 from inakijv/EZP-28461_pagination_consistency

[EZP-28461] Pagination design consistency
ezsystems · Jun 22, 2018 · c8e2e14 · c8e2e14
2 parents ecda9f5 + defe7cc
commit c8e2e14
Show file tree

Hide file tree

Showing 18 changed files with 55 additions and 41 deletions.
diff --git a/src/bundle/Resources/public/scss/_custom.scss b/src/bundle/Resources/public/scss/_custom.scss
@@ -41,7 +41,7 @@ $ez-alloyeditor-color-hover: #65B6F0;
 
 $ez-pagination-bg: transparent;
 $ez-pagination-margin: 0.25rem;
-$ez-pagination-font-size: 0.9rem;
+$ez-pagination-font-size: 1rem;
 $ez-pagination-page-link-radius: 50%;
 $ez-pagination-border-radius: 0.3rem;
 

diff --git a/src/bundle/Resources/public/scss/_pagination.scss b/src/bundle/Resources/public/scss/_pagination.scss
@@ -1,5 +1,17 @@
 .ez-pagination {
     font-size: $ez-pagination-font-size;
+
+    &__text {
+        font-size: .75rem;
+    }
+
+    &__btn {
+        font-size: 1rem;
+    }
+
+    &__spacing {
+        margin-top: -2rem;
+    }
 }
 
 .page-item {
@@ -25,8 +37,10 @@
 .page-item.prev, .page-item.next {
     &.disabled .page-link {
         color: $ez-white;
-        background-color: $ez-ground-base-medium;
-        border: $ez-ground-base-medium;
+        background-color: $ez-color-secondary;
+        border: $ez-color-secondary;
+        opacity: .3;
+        cursor: not-allowed;
     }
 }
 

diff --git a/src/bundle/Resources/views/admin/bookmark/list.html.twig b/src/bundle/Resources/views/admin/bookmark/list.html.twig
@@ -86,14 +86,14 @@
 
 
                 {% if pager.haveToPaginate %}
-                    <div class="row justify-content-center align-items-center mb-2">
-                        <span>
+                    <div class="row justify-content-center align-items-center ez-pagination__spacing mb-2">
+                        <span class="ez-pagination__text">
                             {{ 'pagination.viewing'|trans({
                                 '%viewing%': pager.currentPageResults|length,
                                 '%total%': pager.nbResults}, 'pagination')|desc('Viewing <strong>%viewing%</strong> out of <strong>%total%</strong> items')|raw }}
                         </span>
                     </div>
-                    <div class="row justify-content-center align-items-center">
+                    <div class="row justify-content-center align-items-center ez-pagination__btn mb-5">
                         {{ pagerfanta(pager, 'ez') }}
                     </div>
                 {% endif %}

diff --git a/src/bundle/Resources/views/admin/content_type/list.html.twig b/src/bundle/Resources/views/admin/content_type/list.html.twig
@@ -74,14 +74,14 @@
     {{ form_end(form_content_types_delete) }}
 
     {% if pager.haveToPaginate %}
-        <div class="row justify-content-center align-items-center mb-2">
-                <span>
+        <div class="row justify-content-center align-items-center mb-2 ez-pagination__spacing">
+                <span class="ez-pagination__text">
                     {{ 'pagination.viewing'|trans({
                         '%viewing%': pager.currentPageResults|length,
                         '%total%': pager.nbResults}, 'pagination')|desc('Viewing <strong>%viewing%</strong> out of <strong>%total%</strong> items')|raw }}
                 </span>
         </div>
-        <div class="row justify-content-center align-items-center">
+        <div class="row justify-content-center align-items-center ez-pagination__btn mb-5">
             {{ pagerfanta(pager, 'ez', {
                 'routeName': route_name,
                 'routeParams': {'contentTypeGroupId': group.id}

diff --git a/src/bundle/Resources/views/admin/content_type_group/list.html.twig b/src/bundle/Resources/views/admin/content_type_group/list.html.twig
@@ -98,14 +98,14 @@
         {{ form_end(form_content_type_groups_delete) }}
 
         {% if pager.haveToPaginate %}
-            <div class="row justify-content-center align-items-center mb-2">
-                <span>
+            <div class="row justify-content-center align-items-center mb-2 ez-pagination__spacing">
+                <span class="ez-pagination__text">
                     {{ 'pagination.viewing'|trans({
                         '%viewing%': pager.currentPageResults|length,
                         '%total%': pager.nbResults}, 'pagination')|desc('Viewing <strong>%viewing%</strong> out of <strong>%total%</strong> items')|raw }}
                 </span>
             </div>
-            <div class="row justify-content-center align-items-center">
+            <div class="row justify-content-center align-items-center ez-pagination__btn mb-5">
                 {{ pagerfanta(pager, 'ez') }}
             </div>
         {% endif %}

diff --git a/src/bundle/Resources/views/admin/language/list.html.twig b/src/bundle/Resources/views/admin/language/list.html.twig
@@ -113,13 +113,13 @@
 
         {% if pager.haveToPaginate %}
             <div class="row justify-content-center align-items-center mb-2">
-                <span>
+                <span class="ez-pagination__text">
                     {{ 'language.viewing'|trans({
                         '%viewing%': pager.currentPageResults|length,
                         '%total%': pager.nbResults})|desc('Viewing <strong>%viewing%</strong> out of <strong>%total%</strong> items')|raw }}
                 </span>
             </div>
-            <div class="row justify-content-center align-items-center">
+            <div class="row justify-content-center align-items-center ez-pagination__btn mb-5">
                 {{ pagerfanta(pager, 'ez') }}
             </div>
         {% endif %}

diff --git a/src/bundle/Resources/views/admin/policy/list.html.twig b/src/bundle/Resources/views/admin/policy/list.html.twig
@@ -97,14 +97,14 @@
     {{ form_end(form_policies_delete) }}
 
     {% if pager.haveToPaginate %}
-        <div class="row justify-content-center align-items-center mb-2">
-                <span>
+        <div class="row justify-content-center align-items-center mb-2 ez-pagination__spacing">
+                <span class="ez-pagination__text">
                     {{ 'pagination.viewing'|trans({
                         '%viewing%': pager.currentPageResults|length,
                         '%total%': pager.nbResults}, 'pagination')|desc('Viewing <strong>%viewing%</strong> out of <strong>%total%</strong> items')|raw }}
                 </span>
         </div>
-        <div class="row justify-content-center align-items-center">
+        <div class="row justify-content-center align-items-center ez-pagination__btn mb-5">
             {{ pagerfanta(pager, 'ez',{
                 'routeName': route_name,
                 'routeParams': {'_fragment': 'policies', 'roleId': role.id},

diff --git a/src/bundle/Resources/views/admin/role/list.html.twig b/src/bundle/Resources/views/admin/role/list.html.twig
@@ -117,13 +117,13 @@
 
         {% if pager.haveToPaginate %}
             <div class="row justify-content-center align-items-center mb-2">
-                <span>
+                <span class="ez-pagination__text">
                     {{ 'role.viewing'|trans({
                         '%viewing%': pager.currentPageResults|length,
                         '%total%': pager.nbResults})|desc('Viewing <strong>%viewing%</strong> out of <strong>%total%</strong> items')|raw }}
                 </span>
             </div>
-            <div class="row justify-content-center align-items-center">
+            <div class="row justify-content-center align-items-center ez-pagination__btn mb-5">
                 {{ pagerfanta(pager, 'ez') }}
             </div>
         {% endif %}

diff --git a/src/bundle/Resources/views/admin/role_assignment/list.html.twig b/src/bundle/Resources/views/admin/role_assignment/list.html.twig
@@ -88,14 +88,14 @@
     {{ form_end(form_role_assignments_delete) }}
 
     {% if pager.haveToPaginate %}
-        <div class="row justify-content-center align-items-center mb-2">
-                <span>
+        <div class="row justify-content-center align-items-center mb-2 ez-pagination__spacing">
+                <span class="ez-pagination__text">
                     {{ 'pagination.viewing'|trans({
                         '%viewing%': pager.currentPageResults|length,
                         '%total%': pager.nbResults}, 'pagination')|desc('Viewing <strong>%viewing%</strong> out of <strong>%total%</strong> items')|raw }}
                 </span>
         </div>
-        <div class="row justify-content-center align-items-center">
+        <div class="row justify-content-center align-items-center ez-pagination__btn mb-5">
             {{ pagerfanta(pager, 'ez',{
                 'routeName': route_name,
                 'routeParams': {'_fragment': 'users-and-groups', 'roleId': role.id},

diff --git a/src/bundle/Resources/views/admin/search/list.html.twig b/src/bundle/Resources/views/admin/search/list.html.twig
@@ -54,10 +54,10 @@
                         {% endfor %}
                         </tbody>
                     </table>
-                    <div class="row justify-content-center align-items-center">
-                        <h6>{{ 'search.viewing'|trans({'%viewing%': pagerfanta.currentPageResults|length, '%total%': pagerfanta.nbResults})|desc('Viewing %viewing% out of %total% sub-items') }}</h6>
+                    <div class="row justify-content-center align-items-center ez-pagination__spacing">
+                        <h6 class="ez-pagination__text">{{ 'search.viewing'|trans({'%viewing%': pagerfanta.currentPageResults|length, '%total%': pagerfanta.nbResults})|desc('Viewing %viewing% out of %total% sub-items') }}</h6>
                     </div>
-                    <div class="row justify-content-center align-items-center">
+                    <div class="row justify-content-center align-items-center ez-pagination__btn mb-5">
                         {% if pagerfanta.haveToPaginate %}
                             {{ pagination|raw }}
                         {% endif %}

diff --git a/src/bundle/Resources/views/admin/search/search.html.twig b/src/bundle/Resources/views/admin/search/search.html.twig
@@ -61,14 +61,14 @@
                         </table>
 
                         {% if pager.haveToPaginate %}
-                            <div class="row justify-content-center align-items-center mb-2">
-                                <span>
+                            <div class="row justify-content-center align-items-center mb-2 ez-pagination__spacing">
+                                <span class="ez-pagination__text">
                                     {{ 'pagination.viewing'|trans({
                                         '%viewing%': pager.currentPageResults|length,
                                         '%total%': pager.nbResults}, 'pagination')|desc('Viewing <strong>%viewing%</strong> out of <strong>%total%</strong> items')|raw }}
                                 </span>
                             </div>
-                            <div class="row justify-content-center align-items-center">
+                            <div class="row justify-content-center align-items-center ez-pagination__btn mb-5">
                                 {{ pagerfanta(pager, 'ez', {'pageParameter': '[search][page]'}) }}
                             </div>
                         {% endif %}

diff --git a/src/bundle/Resources/views/admin/section/assigned_content.html.twig b/src/bundle/Resources/views/admin/section/assigned_content.html.twig
@@ -63,7 +63,7 @@
         </tbody>
     </table>
 
-    <div class="row justify-content-center align-items-center">
+    <div class="row justify-content-center align-items-center ez-pagination__spacing mb-5">
         {% if pagerfanta.haveToPaginate %}
             {{ pagination|raw }}
         {% endif %}

diff --git a/src/bundle/Resources/views/admin/section/list.html.twig b/src/bundle/Resources/views/admin/section/list.html.twig
@@ -118,13 +118,13 @@
 
         {% if pager.haveToPaginate %}
             <div class="row justify-content-center align-items-center mb-2">
-                <span>
+                <span class="ez-pagination__text">
                     {{ 'section.viewing'|trans({
                     '%viewing%': pager.currentPageResults|length,
                     '%total%': pager.nbResults})|desc('Viewing <strong>%viewing%</strong> out of <strong>%total%</strong> items')|raw }}
                 </span>
             </div>
-            <div class="row justify-content-center align-items-center">
+            <div class="row justify-content-center align-items-center ez-pagination__btn mb-5">
                 {{ pagerfanta(pager, 'ez') }}
             </div>
         {% endif %}

diff --git a/src/bundle/Resources/views/admin/trash/list.html.twig b/src/bundle/Resources/views/admin/trash/list.html.twig
@@ -111,14 +111,14 @@
                 {{ form_end(form_trash_item_delete, { 'render_rest': false }) }}
 
                 {% if pager.haveToPaginate %}
-                    <div class="row justify-content-center align-items-center mb-2">
-                        <span>
+                    <div class="row justify-content-center align-items-center mb-2 ez-pagination__spacing">
+                        <span class="ez-pagination__text">
                             {{ 'pagination.viewing'|trans({
                                 '%viewing%': pager.currentPageResults|length,
                                 '%total%': pager.nbResults}, 'pagination')|desc('Viewing <strong>%viewing%</strong> out of <strong>%total%</strong> items')|raw }}
                         </span>
                     </div>
-                    <div class="row justify-content-center align-items-center">
+                    <div class="row justify-content-center align-items-center ez-pagination__btn mb-5">
                         {{ pagerfanta(pager, 'ez') }}
                     </div>
                 {% endif %}

diff --git a/src/bundle/Resources/views/content/tab/pagination.html.twig b/src/bundle/Resources/views/content/tab/pagination.html.twig
@@ -1,10 +1,10 @@
-<div class="row justify-content-center align-items-center mb-2">
-    <span>
+<div class="row justify-content-center align-items-center mb-2 ez-pagination__spacing">
+    <span class="ez-pagination__text">
         {{ 'pagination.viewing'|trans({
             '%viewing%': pager.currentPageResults|length,
             '%total%': pager.nbResults}, 'pagination')|desc('Viewing <strong>%viewing%</strong> out of <strong>%total%</strong> items')|raw }}
     </span>
 </div>
-<div class="row justify-content-center align-items-center mb-3">
+<div class="row justify-content-center align-items-center mb-3 ez-pagination__btn mb-4">
     {{ pagerfanta(pager, 'ez', paginatonParams) }}
 </div>
diff --git a/src/bundle/Resources/views/content/tab/versions/tab.html.twig b/src/bundle/Resources/views/content/tab/versions/tab.html.twig
@@ -22,13 +22,13 @@
 
         {% if draft_pager.haveToPaginate %}
             <div class="row justify-content-center align-items-center mb-2">
-                <span>
+                <span class="ez-pagination__text">
                     {{ 'pagination.viewing'|trans({
                         '%viewing%': draft_pager.currentPageResults|length,
                         '%total%': draft_pager.nbResults}, 'pagination')|desc('Viewing <strong>%viewing%</strong> out of <strong>%total%</strong> items')|raw }}
                 </span>
             </div>
-            <div class="row justify-content-center align-items-center mb-3">
+            <div class="row justify-content-center align-items-center ez-pagination__btn mb-4">
                 {{ pagerfanta(draft_pager, 'ez',{
                     'routeName': draft_pagination_params.route_name,
                     'routeParams': draft_pagination_params.route_params|merge({

diff --git a/src/bundle/Resources/views/link_manager/list.html.twig b/src/bundle/Resources/views/link_manager/list.html.twig
@@ -101,7 +101,7 @@
         </table>
 
         {% if urls.haveToPaginate %}
-            <div class="row justify-content-center align-items-center">
+            <div class="row justify-content-center align-items-center ez-pagination__spacing mb-5">
                 {{ pagerfanta(urls, 'ez', {'pageParameter': '[search_data][page]'}) }}
             </div>
         {% endif %}

diff --git a/src/bundle/Resources/views/link_manager/view.html.twig b/src/bundle/Resources/views/link_manager/view.html.twig
@@ -118,7 +118,7 @@
         </table>
 
         {% if usages.haveToPaginate %}
-            <div class="row justify-content-center align-items-center">
+            <div class="row justify-content-center align-items-center ez-pagination__spacing mb-5">
                 {{ pagerfanta(usages, 'ez') }}
             </div>
         {% endif %}