From dfee46792f91cc357f697f35e7429c0c196f6a16 Mon Sep 17 00:00:00 2001
From: maTh <math-home@web.de>
Date: Sun, 6 Feb 2022 17:29:56 +0100
Subject: Improved: "Pagination" + load more button (#4125)

* Frontend changes done

* Load more should work now also without JS

* Update template.rtl.css

* improved the themes' CSS

* Update template.rtl.css

* fix CI

* CSS prop. order fixed

* Rename pagination.phtml to stream-footer.phtml

* use the new template name

* rename key of i18n

* fixed CI, that does not like the white space

* rename pagination variable

* Update indexController.php
---
 p/themes/base-theme/base.css         |  4 ++--
 p/themes/base-theme/base.rtl.css     |  4 ++--
 p/themes/base-theme/template.css     | 17 +++++++++++++++++
 p/themes/base-theme/template.rtl.css | 17 +++++++++++++++++
 4 files changed, 38 insertions(+), 4 deletions(-)

(limited to 'p/themes/base-theme')

diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index dfa754bae..d9eca3d3f 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -366,8 +366,8 @@ a.btn {
 .pagination:last-child .item {
 }
 
-.pagination .loading,
-.pagination a:hover.loading {
+#load_more.loading,
+#load_more.loading:hover {
 	font-size: 0;
 }
 
diff --git a/p/themes/base-theme/base.rtl.css b/p/themes/base-theme/base.rtl.css
index 3cf89350b..e3f01c4eb 100644
--- a/p/themes/base-theme/base.rtl.css
+++ b/p/themes/base-theme/base.rtl.css
@@ -366,8 +366,8 @@ a.btn {
 .pagination:last-child .item {
 }
 
-.pagination .loading,
-.pagination a:hover.loading {
+#load_more.loading,
+#load_more.loading:hover {
 	font-size: 0;
 }
 
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 2642d9cac..fb151b116 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -461,6 +461,15 @@ a.btn {
 	line-height: 16px;
 }
 
+/* === stream-footer **/
+#stream-footer {
+	margin: 0 0 5em;
+	padding: 1em 0;
+	width: 100%;
+	border-top: 1px solid #aaa;
+	text-align: center;
+}
+
 /*=== Pagination */
 .pagination {
 	margin: 0;
@@ -1116,6 +1125,13 @@ br {
 	min-height: 40px;
 }
 
+#load_more.loading,
+#load_more.loading:hover {
+	padding: 10px 20px;
+	background: url("loader.gif") center center no-repeat #fff;
+	font-size: 0;
+}
+
 .loading {
 	background: url("loader.gif") center center no-repeat;
 	font-size: 0;
@@ -1682,6 +1698,7 @@ input:checked + .slide-container .properties {
 	.flux_header,
 	.flux_content .bottom,
 	.pagination,
+	#stream-footer,
 	#nav_entries {
 		display: none;
 	}
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index 0e5dbde39..511d8948d 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -461,6 +461,15 @@ a.btn {
 	line-height: 16px;
 }
 
+/* === stream-footer **/
+#stream-footer {
+	margin: 0 0 5em;
+	padding: 1em 0;
+	width: 100%;
+	border-top: 1px solid #aaa;
+	text-align: center;
+}
+
 /*=== Pagination */
 .pagination {
 	margin: 0;
@@ -1116,6 +1125,13 @@ br {
 	min-height: 40px;
 }
 
+#load_more.loading,
+#load_more.loading:hover {
+	padding: 10px 20px;
+	background: url("loader.gif") center center no-repeat #fff;
+	font-size: 0;
+}
+
 .loading {
 	background: url("loader.gif") center center no-repeat;
 	font-size: 0;
@@ -1682,6 +1698,7 @@ input:checked + .slide-container .properties {
 	.flux_header,
 	.flux_content .bottom,
 	.pagination,
+	#stream-footer,
 	#nav_entries {
 		display: none;
 	}
-- 
cgit v1.2.3