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

29 files changed, 74 insertions, 123 deletions

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;
 	}