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

31 files changed, 87 insertions, 136 deletions

diff --git a/p/scripts/global_view.js b/p/scripts/global_view.js
index 2b57ecf9e..e1afae0b8 100644
--- a/p/scripts/global_view.js
+++ b/p/scripts/global_view.js
@@ -19,7 +19,7 @@ function load_panel(link) {
 			return;
 		}
 		const html = this.response;
-		const foreign = html.querySelectorAll('.nav_menu, #stream .day, #stream .flux, #mark-read-pagination, #stream.prompt');
+		const foreign = html.querySelectorAll('.nav_menu, #stream .day, #stream .flux, #stream-footer, #stream.prompt');
 		const panel = document.getElementById('panel');
 		foreign.forEach(function (el) {
 			panel.appendChild(document.adoptNode(el));
diff --git a/p/scripts/main.js b/p/scripts/main.js
index af34368b4..c9627b606 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -712,9 +712,9 @@ function onScroll() {
 		});
 	}
 	if (context.auto_load_more) {
-		const pagination = document.getElementById('mark-read-pagination');
-		if (pagination && box_to_follow.offsetHeight > 0 &&
-			box_to_follow.scrollTop + box_to_follow.offsetHeight + (window.innerHeight / 2) >= pagination.offsetTop) {
+		const streamFooter = document.getElementById('stream-footer');
+		if (streamFooter && box_to_follow.offsetHeight > 0 &&
+			box_to_follow.scrollTop + box_to_follow.offsetHeight + (window.innerHeight / 2) >= streamFooter.offsetTop) {
 			load_more_posts();
 		}
 	}
@@ -1570,16 +1570,16 @@ function load_more_posts() {
 	req.responseType = 'document';
 	req.onload = function (e) {
 		const html = this.response;
-		const formPagination = document.getElementById('mark-read-pagination');
+		const streamFooter = document.getElementById('stream-footer');
 
 		const streamAdopted = document.adoptNode(html.getElementById('stream'));
 		streamAdopted.querySelectorAll('.flux, .day').forEach(function (div) {
-			box_load_more.insertBefore(div, formPagination);
+			box_load_more.insertBefore(div, streamFooter);
 		});
 
-		const paginationOld = formPagination.querySelector('.pagination');
-		const paginationNew = streamAdopted.querySelector('.pagination');
-		formPagination.replaceChild(paginationNew, paginationOld);
+		const streamFooterOld = streamFooter.querySelector('.stream-footer-inner');
+		const streamFooterNew = streamAdopted.querySelector('.stream-footer-inner');
+		streamFooter.replaceChild(streamFooterNew, streamFooterOld);
 
 		const bigMarkAsRead = document.getElementById('bigMarkAsRead');
 		const readAll = document.querySelector('#nav_menu_read_all .read_all');
@@ -1620,16 +1620,16 @@ function init_load_more(box) {
 	box_load_more = box;
 	document.body.dispatchEvent(freshrssLoadMoreEvent);
 
-	const next_link = document.getElementById('load_more');
-	if (!next_link) {
+	const next_button = document.getElementById('load_more');
+	if (!next_button) {
 		// no more article to load
 		url_load_more = '';
 		return;
 	}
 
-	url_load_more = next_link.href;
+	url_load_more = next_button.getAttribute('formaction');
 
-	next_link.onclick = function (e) {
+	next_button.onclick = function (e) {
 		load_more_posts();
 		return false;
 	};
diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index a45a8cdcc..6f315ddd6 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -427,12 +427,6 @@ a.btn {
 	border-top: 1px solid #292929;
 }
 
-.pagination .loading,
-.pagination a:hover.loading {
-	background: url("loader.gif") center center no-repeat #fff;
-	font-size: 0;
-}
-
 /*=== Boxes */
 .box {
 	background: #1f1f1f;
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index b6f6e94f9..98d450273 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -427,12 +427,6 @@ a.btn {
 	border-top: 1px solid #292929;
 }
 
-.pagination .loading,
-.pagination a:hover.loading {
-	background: url("loader.gif") center center no-repeat #fff;
-	font-size: 0;
-}
-
 /*=== Boxes */
 .box {
 	background: #1f1f1f;
diff --git a/p/themes/Ansum/_components.scss b/p/themes/Ansum/_components.scss
index 105352b8a..b5ed5ae25 100644
--- a/p/themes/Ansum/_components.scss
+++ b/p/themes/Ansum/_components.scss
@@ -192,12 +192,11 @@
 			}
 		}
 	}
+}
 
-	.loading,
-	a:hover.loading {
-		background: url("loader.gif") center center no-repeat #34495e;
-		font-size: 0;
-	}
+#load_more.loading,
+#load_more.loading:hover {
+	background: url("loader.gif") center center no-repeat #34495e;
 }
 
 .content .pagination {
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 8e74736b4..e709e2acb 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -357,10 +357,9 @@ form th {
 	background: #363330;
 	color: #f5f0ec;
 }
-.pagination .loading,
-.pagination a:hover.loading {
+#load_more.loading,
+#load_more.loading:hover {
 	background: url("loader.gif") center center no-repeat #34495e;
-	font-size: 0;
 }
 
 .content .pagination {
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 34dcd75e6..d8dc71e15 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -357,10 +357,9 @@ form th {
 	background: #363330;
 	color: #f5f0ec;
 }
-.pagination .loading,
-.pagination a:hover.loading {
+#load_more.loading,
+#load_more.loading:hover {
 	background: url("loader.gif") center center no-repeat #34495e;
-	font-size: 0;
 }
 
 .content .pagination {
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index af47db818..5f0257e99 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -514,13 +514,6 @@ a.btn {
 	border-top: 1px solid #ddd;
 }
 
-.pagination .loading,
-.pagination a:hover.loading {
-	background: url("loader.gif") center center no-repeat #fff;
-	height: 55px;
-	font-size: 0
-}
-
 /*=== Boxes */
 .box {
 	background: #f9f7f4;
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index 56cf33a5f..9b5257680 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -514,13 +514,6 @@ a.btn {
 	border-top: 1px solid #ddd;
 }
 
-.pagination .loading,
-.pagination a:hover.loading {
-	background: url("loader.gif") center center no-repeat #fff;
-	height: 55px;
-	font-size: 0
-}
-
 /*=== Boxes */
 .box {
 	background: #f9f7f4;
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index fa200c115..fc6cd4ccb 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -459,10 +459,9 @@ a.btn {
 	border-top: 1px solid #333;
 }
 
-.pagination .loading,
-.pagination a:hover.loading {
+#load_more.loading,
+#load_more.loading:hover {
 	background: url("loader.gif") center center no-repeat;
-	font-size: 0;
 }
 
 /*=== Boxes */
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index a2da93863..869498e9c 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -459,10 +459,9 @@ a.btn {
 	border-top: 1px solid #333;
 }
 
-.pagination .loading,
-.pagination a:hover.loading {
+#load_more.loading,
+#load_more.loading:hover {
 	background: url("loader.gif") center center no-repeat;
-	font-size: 0;
 }
 
 /*=== Boxes */
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index c4374a675..71af37796 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -460,10 +460,9 @@ a.btn {
 	color: #ecf0f1;
 }
 
-.pagination .loading,
-.pagination a:hover.loading {
+#load_more.loading,
+#load_more.loading:hover {
 	background: url("loader.gif") center center no-repeat #34495e;
-	font-size: 0;
 }
 
 /*=== Boxes */
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index eb6120555..bfa52815a 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -460,10 +460,9 @@ a.btn {
 	color: #ecf0f1;
 }
 
-.pagination .loading,
-.pagination a:hover.loading {
+#load_more.loading,
+#load_more.loading:hover {
 	background: url("loader.gif") center center no-repeat #34495e;
-	font-size: 0;
 }
 
 /*=== Boxes */
diff --git a/p/themes/Mapco/_components.scss b/p/themes/Mapco/_components.scss
index 11b1ca92c..5d7bfd285 100644
--- a/p/themes/Mapco/_components.scss
+++ b/p/themes/Mapco/_components.scss
@@ -188,11 +188,11 @@
 		}
 	}
 
-	.loading,
-	a:hover.loading {
-		background: url("loader.gif") center center no-repeat #34495e;
-		font-size: 0;
-	}
+}
+
+#load_more.loading,
+#load_more.loading:hover {
+	background: url("loader.gif") center center no-repeat #34495e;
 }
 
 .content .pagination {
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index 16a840c41..6ec1ffb60 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -354,10 +354,9 @@ form th {
 	background: #303136;
 	color: #eff0f2;
 }
-.pagination .loading,
-.pagination a:hover.loading {
+#load_more.loading,
+#load_more.loading:hover {
 	background: url("loader.gif") center center no-repeat #34495e;
-	font-size: 0;
 }
 
 .content .pagination {
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index e91161df9..e761439dc 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -354,10 +354,9 @@ form th {
 	background: #303136;
 	color: #eff0f2;
 }
-.pagination .loading,
-.pagination a:hover.loading {
+#load_more.loading,
+#load_more.loading:hover {
 	background: url("loader.gif") center center no-repeat #34495e;
-	font-size: 0;
 }
 
 .content .pagination {
diff --git a/p/themes/Origine-compact/origine-compact.css b/p/themes/Origine-compact/origine-compact.css
index 6a2a045b6..011934d55 100644
--- a/p/themes/Origine-compact/origine-compact.css
+++ b/p/themes/Origine-compact/origine-compact.css
@@ -506,12 +506,6 @@ a.btn,
 	border-top: 1px solid #aaa;
 }
 
-.pagination .loading,
-.pagination a:hover.loading {
-	background: url("loader.gif") center center no-repeat #fff;
-	font-size: 0;
-}
-
 /*=== Boxes */
 .box {
 	background: #fff;
diff --git a/p/themes/Origine-compact/origine-compact.rtl.css b/p/themes/Origine-compact/origine-compact.rtl.css
index 2c3256006..2a464410c 100644
--- a/p/themes/Origine-compact/origine-compact.rtl.css
+++ b/p/themes/Origine-compact/origine-compact.rtl.css
@@ -506,12 +506,6 @@ a.btn,
 	border-top: 1px solid #aaa;
 }
 
-.pagination .loading,
-.pagination a:hover.loading {
-	background: url("loader.gif") center center no-repeat #fff;
-	font-size: 0;
-}
-
 /*=== Boxes */
 .box {
 	background: #fff;
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 0ac90100b..d28dac24b 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -488,12 +488,6 @@ a.btn {
 	border-top: 1px solid #aaa;
 }
 
-.pagination .loading,
-.pagination a:hover.loading {
-	background: url("loader.gif") center center no-repeat #fff;
-	font-size: 0;
-}
-
 /*=== Boxes */
 .box {
 	background: #fff;
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index c7d6695e5..37f5453e7 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -488,12 +488,6 @@ a.btn {
 	border-top: 1px solid #aaa;
 }
 
-.pagination .loading,
-.pagination a:hover.loading {
-	background: url("loader.gif") center center no-repeat #fff;
-	font-size: 0;
-}
-
 /*=== Boxes */
 .box {
 	background: #fff;
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index d8fc4f05e..587bcedeb 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -452,12 +452,6 @@ a.btn {
 	border-top: 1px solid #aaa;
 }
 
-.pagination .loading,
-.pagination a:hover.loading {
-	background: url("loader.gif") center center no-repeat #fff;
-	font-size: 0;
-}
-
 /*=== Boxes */
 .box {
 	border: 1px solid #aaa;
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index 877fc5f35..3a097d22a 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -452,12 +452,6 @@ a.btn {
 	border-top: 1px solid #aaa;
 }
 
-.pagination .loading,
-.pagination a:hover.loading {
-	background: url("loader.gif") center center no-repeat #fff;
-	font-size: 0;
-}
-
 /*=== Boxes */
 .box {
 	border: 1px solid #aaa;
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index 7a77c4d6a..288bf95ca 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -499,12 +499,6 @@ a.btn {
 	border-top: 1px solid #ddd;
 }
 
-.pagination .loading,
-.pagination a:hover.loading {
-	background: url("loader.gif") center center no-repeat #fff;
-	font-size: 0;
-}
-
 /*=== Boxes */
 .box {
 	background: #ede7de;
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index 98147089a..88af06bcd 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -499,12 +499,6 @@ a.btn {
 	border-top: 1px solid #ddd;
 }
 
-.pagination .loading,
-.pagination a:hover.loading {
-	background: url("loader.gif") center center no-repeat #fff;
-	font-size: 0;
-}
-
 /*=== Boxes */
 .box {
 	background: #ede7de;
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index ebd04b550..be973ea26 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -400,10 +400,10 @@ form th {
 	background: #22303d;
 	color: #e3e3e3;
 }
-.pagination .loading,
-.pagination a:hover.loading {
+
+#load_more.loading,
+#load_more.loading:hover {
 	background: url(loader.gif) center center no-repeat #22303d;
-	font-size: 0;
 }
 
 .content {
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 795dc2398..887dcd9d9 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -400,10 +400,10 @@ form th {
 	background: #22303d;
 	color: #e3e3e3;
 }
-.pagination .loading,
-.pagination a:hover.loading {
+
+#load_more.loading,
+#load_more.loading:hover {
 	background: url(loader.gif) center center no-repeat #22303d;
-	font-size: 0;
 }
 
 .content {
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
index f47e2dec7..fa37f6698 100644
--- a/p/themes/Swage/swage.scss
+++ b/p/themes/Swage/swage.scss
@@ -508,14 +508,14 @@ form {
 			}
 		}
 	}
+}
 
-	.loading,
-	a:hover.loading {
-		background: url(loader.gif) center center no-repeat $color_aside;
-		font-size: 0;
-	}
+#load_more.loading,
+#load_more.loading:hover {
+	background: url(loader.gif) center center no-repeat $color_aside;
 }
 
+
 .content {
 	padding: 20px 10px;
 
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;
 	}