From 9cf60369262f4e48d99e2f821de6e3930061dd0b Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Fri, 29 Nov 2024 10:57:14 +0100
Subject: [PATCH] refactor(Paginatino.js): makes the pagionation component
 responsive on mobile displays

---
 public/js/components/Cis/Cms/News.js          |  5 +++--
 public/js/components/Pagination/Pagination.js | 16 ++++++++++------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/public/js/components/Cis/Cms/News.js b/public/js/components/Cis/Cms/News.js
index 85ccfb290..8e8c080f7 100644
--- a/public/js/components/Cis/Cms/News.js
+++ b/public/js/components/Cis/Cms/News.js
@@ -37,7 +37,8 @@ export default {
   template: /*html*/ `
   	<h2 >News</h2>
 	<hr/>
-    <pagination :page_size="page_size"  @page="loadNewPageContent" :maxPageCount="maxPageCount">
+	<pagination  :page_size="page_size"  @page="loadNewPageContent" :maxPageCount="maxPageCount">
+	</pagination>
     <div v-html="content"></div>
-    </pagination>`,
+    `,
 };
diff --git a/public/js/components/Pagination/Pagination.js b/public/js/components/Pagination/Pagination.js
index 60ab9c9a4..1a2b6fe0f 100644
--- a/public/js/components/Pagination/Pagination.js
+++ b/public/js/components/Pagination/Pagination.js
@@ -23,11 +23,15 @@ export default {
   },
   mounted() {},
   template: /*html*/ `
-    
-   <paginator v-model:rows="page_size" @page="(data)=>$emit('page',{...data, page:data.page+1})" :rows="page_size" :totalRecords="maxPageCount" :rowsPerPageOptions="[10, 20, 30]" ></paginator>
-    <slot>
-    Placeholder
-    </slot>
-   
+ 	<!-- Desktop -->
+	<div class="d-none d-md-block">
+		<paginator v-model:rows="page_size" @page="(data)=>$emit('page',{...data, page:data.page+1})" :rows="page_size" :totalRecords="maxPageCount" :rowsPerPageOptions="[10, 20, 30]" >
+		</paginator>
+	</div>
+	<!-- Mobile -->
+	<div class="d-block d-md-none">
+		<paginator v-model:rows="page_size" @page="(data)=>$emit('page',{...data, page:data.page+1})" :rows="page_size" :totalRecords="maxPageCount" :rowsPerPageOptions="[10, 20, 30]" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown">
+		</paginator>
+	</div>
   `,
 };