From 45038c52ce924f916b613043643e8f855e3c6276 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Popovics=20Andr=C3=A1s?=
 <popovicsandras@users.noreply.github.com>
Date: Mon, 11 Sep 2017 12:29:52 +0100
Subject: [PATCH] [ADF-1478] Make the pagination more responsive (#2315)

---
 .../pagination/pagination.component.html      |  8 ++--
 .../pagination/pagination.component.scss      | 42 +++++++++++++++++++
 2 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/ng2-components/ng2-alfresco-core/src/components/pagination/pagination.component.html b/ng2-components/ng2-alfresco-core/src/components/pagination/pagination.component.html
index 3487611014..28630fcf1f 100644
--- a/ng2-components/ng2-alfresco-core/src/components/pagination/pagination.component.html
+++ b/ng2-components/ng2-alfresco-core/src/components/pagination/pagination.component.html
@@ -1,4 +1,4 @@
-<div class="adf-pagination__block">
+<div class="adf-pagination__block adf-pagination__range-block">
     <span class="adf-pagination__range">
         {{
             'CORE.PAGINATION.ITEMS_RANGE' | translate: {
@@ -9,7 +9,7 @@
     </span>
 </div>
 
-<div class="adf-pagination__block">
+<div class="adf-pagination__block adf-pagination__perpage-block">
     <span>
         {{ 'CORE.PAGINATION.ITEMS_PER_PAGE' | translate }}
     </span>
@@ -32,7 +32,7 @@
     </md-menu>
 </div>
 
-<div class="adf-pagination__block">
+<div class="adf-pagination__block adf-pagination__actualinfo-block">
     <span class="adf-pagination__current-page">
         {{ 'CORE.PAGINATION.CURRENT_PAGE' | translate: { number: current } }}
     </span>
@@ -58,7 +58,7 @@
     </md-menu>
 </div>
 
-<div class="adf-pagination__block">
+<div class="adf-pagination__block adf-pagination__controls-block">
     <button
         class="adf-pagination__previous-button"
         md-icon-button
diff --git a/ng2-components/ng2-alfresco-core/src/components/pagination/pagination.component.scss b/ng2-components/ng2-alfresco-core/src/components/pagination/pagination.component.scss
index 4570fb4fec..5c707e98fe 100644
--- a/ng2-components/ng2-alfresco-core/src/components/pagination/pagination.component.scss
+++ b/ng2-components/ng2-alfresco-core/src/components/pagination/pagination.component.scss
@@ -29,6 +29,48 @@
             }
         }
 
+        @media (max-width: 500px) {
+
+            & {
+                flex-wrap: wrap;
+                padding-bottom: 24px;
+                padding-top: 8px;
+            }
+
+            &__range-block.adf-pagination__block:first-child {
+                order: 1;
+                width: 50%;
+                flex: 0 0 auto;
+                box-sizing: border-box;
+                padding-left: 16px;
+                justify-content: flex-start;
+            }
+    
+            &__perpage-block {
+                order: 3;
+                width: 50%;
+                box-sizing: border-box;
+                padding-left: 16px;
+                justify-content: flex-start;
+            }
+    
+            &__actualinfo-block {
+                order: 2;
+                width: 50%;
+                box-sizing: border-box;
+                padding-right: 16px;
+                justify-content: flex-end;
+            }
+    
+            &__controls-block {
+                order: 4;
+                width: 50%;
+                box-sizing: border-box;
+                padding-right: 16px;
+                justify-content: flex-end;
+            }                
+        }
+
         &__max-items {
             margin-left: 10px;
         }