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
2026-04-12 18:37:51 -04:00 · 2022-02-06 17:29:56 +01:00
parent 1c5cf71859
commit dfee46792f
53 changed files with 191 additions and 208 deletions
--- a/app/Controllers/indexController.php
+++ b/app/Controllers/indexController.php
@@ -65,7 +65,7 @@ class FreshRSS_index_Controller extends FreshRSS_ActionController {

 		$this->view->callbackBeforeEntries = function ($view) {
 			try {
-				FreshRSS_Context::$number++;	//+1 for pagination
+				FreshRSS_Context::$number++;	//+1 for articles' page
 				$view->entries = FreshRSS_index_Controller::listEntriesByContext();
 				FreshRSS_Context::$number--;
 				ob_start();	//Buffer "one entry at a time"
@@ -77,7 +77,7 @@ class FreshRSS_index_Controller extends FreshRSS_ActionController {

 		$this->view->callbackBeforePagination = function ($view, $nbEntries, $lastEntry) {
 			if ($nbEntries >= FreshRSS_Context::$number) {
-				//We have enough entries: we discard the last one to use it for the next pagination
+				//We have enough entries: we discard the last one to use it for the next articles' page
 				ob_clean();
 				FreshRSS_Context::$next_id = $lastEntry->id();
 			}
--- a/app/i18n/cz/gen.php
+++ b/app/i18n/cz/gen.php
@@ -179,10 +179,7 @@ return array(
 	'pagination' => array(
 		'first' => 'První',
 		'last' => 'Poslední',
-		'load_more' => 'Načíst více článků',
-		'mark_all_read' => 'Označit vše jako přečtené',
 		'next' => 'Další',
-		'nothing_to_load' => 'Nejsou zde žádné další články',
 		'previous' => 'Předchozí',
 	),
 	'period' => array(
@@ -227,4 +224,9 @@ return array(
 		'or' => 'nebo',
 		'yes' => 'Ano',
 	),
+	'stream' => array(
+		'load_more' => 'Načíst více článků',
+		'mark_all_read' => 'Označit vše jako přečtené',
+		'nothing_to_load' => 'Nejsou zde žádné další články',
+	),
 );
--- a/app/i18n/de/gen.php
+++ b/app/i18n/de/gen.php
@@ -179,10 +179,7 @@ return array(
 	'pagination' => array(
 		'first' => 'Erste',
 		'last' => 'Letzte',
-		'load_more' => 'Weitere Artikel laden',
-		'mark_all_read' => 'Alle als gelesen markieren',
 		'next' => 'Nächste',
-		'nothing_to_load' => 'Es gibt keine weiteren Artikel',
 		'previous' => 'Vorherige',
 	),
 	'period' => array(
@@ -227,4 +224,9 @@ return array(
 		'or' => 'oder',
 		'yes' => 'Ja',
 	),
+	'stream' => array(
+		'load_more' => 'Weitere Artikel laden',
+		'mark_all_read' => 'Alle als gelesen markieren',
+		'nothing_to_load' => 'Es gibt keine weiteren Artikel',
+	),
 );
--- a/app/i18n/en-us/gen.php
+++ b/app/i18n/en-us/gen.php
@@ -179,10 +179,7 @@ return array(
 	'pagination' => array(
 		'first' => 'First',	// IGNORE
 		'last' => 'Last',	// IGNORE
-		'load_more' => 'Load more articles',	// IGNORE
-		'mark_all_read' => 'Mark all as read',	// IGNORE
 		'next' => 'Next',	// IGNORE
-		'nothing_to_load' => 'There are no more articles',	// IGNORE
 		'previous' => 'Previous',	// IGNORE
 	),
 	'period' => array(
@@ -227,4 +224,9 @@ return array(
 		'or' => 'or',	// IGNORE
 		'yes' => 'Yes',	// IGNORE
 	),
+	'stream' => array(
+		'load_more' => 'Load more articles',	// IGNORE
+		'mark_all_read' => 'Mark all as read',	// IGNORE
+		'nothing_to_load' => 'There are no more articles',	// IGNORE
+	),
 );
--- a/app/i18n/en/gen.php
+++ b/app/i18n/en/gen.php
@@ -179,10 +179,7 @@ return array(
 	'pagination' => array(
 		'first' => 'First',
 		'last' => 'Last',
-		'load_more' => 'Load more articles',
-		'mark_all_read' => 'Mark all as read',
 		'next' => 'Next',
-		'nothing_to_load' => 'There are no more articles',
 		'previous' => 'Previous',
 	),
 	'period' => array(
@@ -227,4 +224,9 @@ return array(
 		'or' => 'or',
 		'yes' => 'Yes',
 	),
+	'stream' => array(
+		'load_more' => 'Load more articles',
+		'mark_all_read' => 'Mark all as read',
+		'nothing_to_load' => 'There are no more articles',
+	),
 );
--- a/app/i18n/es/gen.php
+++ b/app/i18n/es/gen.php
@@ -179,10 +179,7 @@ return array(
 	'pagination' => array(
 		'first' => 'Primero',
 		'last' => 'Último',
-		'load_more' => 'Cargar más artículos',
-		'mark_all_read' => 'Marcar todo como leído',
 		'next' => 'Siguiente',
-		'nothing_to_load' => 'No hay más artículos',
 		'previous' => 'Anterior',
 	),
 	'period' => array(
@@ -227,4 +224,9 @@ return array(
 		'or' => 'o',
 		'yes' => 'Sí',
 	),
+	'stream' => array(
+		'load_more' => 'Cargar más artículos',
+		'mark_all_read' => 'Marcar todo como leído',
+		'nothing_to_load' => 'No hay más artículos',
+	),
 );
--- a/app/i18n/fr/gen.php
+++ b/app/i18n/fr/gen.php
@@ -179,10 +179,7 @@ return array(
 	'pagination' => array(
 		'first' => 'Début',
 		'last' => 'Fin',
-		'load_more' => 'Charger plus d’articles',
-		'mark_all_read' => 'Tout marquer comme lu',
 		'next' => 'Suivant',
-		'nothing_to_load' => 'Fin des articles',
 		'previous' => 'Précédent',
 	),
 	'period' => array(
@@ -227,4 +224,9 @@ return array(
 		'or' => 'ou',
 		'yes' => 'Oui',
 	),
+	'stream' => array(
+		'load_more' => 'Charger plus d’articles',
+		'mark_all_read' => 'Tout marquer comme lu',
+		'nothing_to_load' => 'Fin des articles',
+	),
 );
--- a/app/i18n/he/gen.php
+++ b/app/i18n/he/gen.php
@@ -179,10 +179,7 @@ return array(
 	'pagination' => array(
 		'first' => 'הראשון',
 		'last' => 'אחרון',
-		'load_more' => 'טעינת מאמרים נוספים',
-		'mark_all_read' => 'סימון הכל כנקרא',
 		'next' => 'הבא',
-		'nothing_to_load' => 'אין מאמרים נוספים',
 		'previous' => 'הקודם',
 	),
 	'period' => array(
@@ -227,4 +224,9 @@ return array(
 		'or' => 'או',
 		'yes' => 'כן',
 	),
+	'stream' => array(
+		'load_more' => 'טעינת מאמרים נוספים',
+		'mark_all_read' => 'סימון הכל כנקרא',
+		'nothing_to_load' => 'אין מאמרים נוספים',
+	),
 );
--- a/app/i18n/it/gen.php
+++ b/app/i18n/it/gen.php
@@ -179,10 +179,7 @@ return array(
 	'pagination' => array(
 		'first' => 'Prima',
 		'last' => 'Ultima',
-		'load_more' => 'Carica altri articoli',
-		'mark_all_read' => 'Segna tutto come letto',
 		'next' => 'Successiva',
-		'nothing_to_load' => 'Non ci sono altri articoli',
 		'previous' => 'Precedente',
 	),
 	'period' => array(
@@ -227,4 +224,9 @@ return array(
 		'or' => 'o',
 		'yes' => 'Si',
 	),
+	'stream' => array(
+		'load_more' => 'Carica altri articoli',
+		'mark_all_read' => 'Segna tutto come letto',
+		'nothing_to_load' => 'Non ci sono altri articoli',
+	),
 );
--- a/app/i18n/ja/gen.php
+++ b/app/i18n/ja/gen.php
@@ -179,10 +179,7 @@ return array(
 	'pagination' => array(
 		'first' => '先頭',
 		'last' => '最後',
-		'load_more' => '記事をもっと読み込む',
-		'mark_all_read' => 'すべての記事を既読にする',
 		'next' => 'つぎへ',
-		'nothing_to_load' => 'これ以上の記事はありません',
 		'previous' => '前へ',
 	),
 	'period' => array(
@@ -227,4 +224,9 @@ return array(
 		'or' => 'または',
 		'yes' => 'OK',
 	),
+	'stream' => array(
+		'load_more' => '記事をもっと読み込む',
+		'mark_all_read' => 'すべての記事を既読にする',
+		'nothing_to_load' => 'これ以上の記事はありません',
+	),
 );
--- a/app/i18n/ko/gen.php
+++ b/app/i18n/ko/gen.php
@@ -179,10 +179,7 @@ return array(
 	'pagination' => array(
 		'first' => '처음으로',
 		'last' => '마지막으로',
-		'load_more' => '글 더 불러오기',
-		'mark_all_read' => '모두 읽음으로 표시',
 		'next' => '다음',
-		'nothing_to_load' => '더 이상 글이 없습니다',
 		'previous' => '이전',
 	),
 	'period' => array(
@@ -227,4 +224,9 @@ return array(
 		'or' => '또는',
 		'yes' => '네',
 	),
+	'stream' => array(
+		'load_more' => '글 더 불러오기',
+		'mark_all_read' => '모두 읽음으로 표시',
+		'nothing_to_load' => '더 이상 글이 없습니다',
+	),
 );
--- a/app/i18n/nl/gen.php
+++ b/app/i18n/nl/gen.php
@@ -179,10 +179,7 @@ return array(
 	'pagination' => array(
 		'first' => 'Eerste',
 		'last' => 'Laatste',
-		'load_more' => 'Laad meer artikelen',
-		'mark_all_read' => 'Markeer alle als gelezen',
 		'next' => 'Volgende',
-		'nothing_to_load' => 'Er zijn geen artikelen meer',
 		'previous' => 'Vorige',
 	),
 	'period' => array(
@@ -227,4 +224,9 @@ return array(
 		'or' => 'of',
 		'yes' => 'Ja',
 	),
+	'stream' => array(
+		'load_more' => 'Laad meer artikelen',
+		'mark_all_read' => 'Markeer alle als gelezen',
+		'nothing_to_load' => 'Er zijn geen artikelen meer',
+	),
 );
--- a/app/i18n/oc/gen.php
+++ b/app/i18n/oc/gen.php
@@ -179,10 +179,7 @@ return array(
 	'pagination' => array(
 		'first' => 'Debuta',
 		'last' => 'Fin',
-		'load_more' => 'Cargar mai d’articles',
-		'mark_all_read' => 'O marcar tot coma legit',
 		'next' => 'Seguent',
-		'nothing_to_load' => 'I a pas mai d’articles',
 		'previous' => 'Precedent',
 	),
 	'period' => array(
@@ -227,4 +224,9 @@ return array(
 		'or' => 'o',
 		'yes' => 'Òc',
 	),
+	'stream' => array(
+		'load_more' => 'Cargar mai d’articles',
+		'mark_all_read' => 'O marcar tot coma legit',
+		'nothing_to_load' => 'I a pas mai d’articles',
+	),
 );
--- a/app/i18n/pl/gen.php
+++ b/app/i18n/pl/gen.php
@@ -179,10 +179,7 @@ return array(
 	'pagination' => array(
 		'first' => 'Początek',
 		'last' => 'Koniec',
-		'load_more' => 'Załaduj więcej wiadomości',
-		'mark_all_read' => 'Oznacz wszystkie jako przeczytane',
 		'next' => 'Następne',
-		'nothing_to_load' => 'Koniec listy wiadomości',
 		'previous' => 'Poprzednie',
 	),
 	'period' => array(
@@ -227,4 +224,9 @@ return array(
 		'or' => 'lub',
 		'yes' => 'Tak',
 	),
+	'stream' => array(
+		'load_more' => 'Załaduj więcej wiadomości',
+		'mark_all_read' => 'Oznacz wszystkie jako przeczytane',
+		'nothing_to_load' => 'Koniec listy wiadomości',
+	),
 );
--- a/app/i18n/pt-br/gen.php
+++ b/app/i18n/pt-br/gen.php
@@ -179,10 +179,7 @@ return array(
 	'pagination' => array(
 		'first' => 'Primeiro',
 		'last' => 'Último',
-		'load_more' => 'Carregar mais artigos',
-		'mark_all_read' => 'Marcar todos como lidos',
 		'next' => 'Próximo',
-		'nothing_to_load' => 'Não há mais artigos',
 		'previous' => 'Anterior',
 	),
 	'period' => array(
@@ -227,4 +224,9 @@ return array(
 		'or' => 'ou',
 		'yes' => 'Sim',
 	),
+	'stream' => array(
+		'load_more' => 'Carregar mais artigos',
+		'mark_all_read' => 'Marcar todos como lidos',
+		'nothing_to_load' => 'Não há mais artigos',
+	),
 );
--- a/app/i18n/ru/gen.php
+++ b/app/i18n/ru/gen.php
@@ -179,10 +179,7 @@ return array(
 	'pagination' => array(
 		'first' => 'Первая',
 		'last' => 'Последняя',
-		'load_more' => 'Загрузить больше статей',
-		'mark_all_read' => 'Отметить всё прочитанным',
 		'next' => 'Следующая',
-		'nothing_to_load' => 'Больше нет статей',
 		'previous' => 'Предыдущая',
 	),
 	'period' => array(
@@ -227,4 +224,9 @@ return array(
 		'or' => 'или',
 		'yes' => 'Да',
 	),
+	'stream' => array(
+		'load_more' => 'Загрузить больше статей',
+		'mark_all_read' => 'Отметить всё прочитанным',
+		'nothing_to_load' => 'Больше нет статей',
+	),
 );
--- a/app/i18n/sk/gen.php
+++ b/app/i18n/sk/gen.php
@@ -179,10 +179,7 @@ return array(
 	'pagination' => array(
 		'first' => 'Prvý',
 		'last' => 'Posledný',
-		'load_more' => 'Načítať viac článkov',
-		'mark_all_read' => 'Označiť všetko prečítané',
 		'next' => 'Ďalší',
-		'nothing_to_load' => 'Žiadne nové články',
 		'previous' => 'Predošlý',
 	),
 	'period' => array(
@@ -227,4 +224,9 @@ return array(
 		'or' => 'alebo',
 		'yes' => 'Áno',
 	),
+	'stream' => array(
+		'load_more' => 'Načítať viac článkov',
+		'mark_all_read' => 'Označiť všetko prečítané',
+		'nothing_to_load' => 'Žiadne nové články',
+	),
 );
--- a/app/i18n/tr/gen.php
+++ b/app/i18n/tr/gen.php
@@ -179,10 +179,7 @@ return array(
 	'pagination' => array(
 		'first' => 'İlk',
 		'last' => 'Son',
-		'load_more' => 'Daha fazla makale yükle',
-		'mark_all_read' => 'Tümünü okundu say',
 		'next' => 'Sonraki',
-		'nothing_to_load' => 'Başka makale yok',
 		'previous' => 'Önceki',
 	),
 	'period' => array(
@@ -227,4 +224,9 @@ return array(
 		'or' => 'ya da',
 		'yes' => 'Evet',
 	),
+	'stream' => array(
+		'load_more' => 'Daha fazla makale yükle',
+		'mark_all_read' => 'Tümünü okundu say',
+		'nothing_to_load' => 'Başka makale yok',
+	),
 );
--- a/app/i18n/zh-cn/gen.php
+++ b/app/i18n/zh-cn/gen.php
@@ -179,10 +179,7 @@ return array(
 	'pagination' => array(
 		'first' => '首页',
 		'last' => '末页',
-		'load_more' => '载入更多文章',
-		'mark_all_read' => '全部设为已读',
 		'next' => '下一页',
-		'nothing_to_load' => '没有更多文章',
 		'previous' => '上一页',
 	),
 	'period' => array(
@@ -227,4 +224,9 @@ return array(
 		'or' => '或',
 		'yes' => '是',
 	),
+	'stream' => array(
+		'load_more' => '载入更多文章',
+		'mark_all_read' => '全部设为已读',
+		'nothing_to_load' => '没有更多文章',
+	),
 );
--- a/app/views/helpers/stream-footer.phtml
+++ b/app/views/helpers/stream-footer.phtml
@@ -21,34 +21,30 @@
 <?php
 $hasAccess = FreshRSS_Auth::hasAccess();
 if ($hasAccess) { ?>
-<form id="mark-read-pagination" method="post">
+<form id="stream-footer" action="" method="post">
 <input type="hidden" name="_csrf" value="<?= FreshRSS_Auth::csrfToken() ?>" />
 <?php } else { ?>
-<div id="mark-read-pagination">
+<div id="stream-footer">
 <?php }?>
-<ul class="pagination">
-	<li class="item pager-next">
+	<div class="stream-footer-inner">
 	<?php if (FreshRSS_Context::$next_id) { ?>
-		<a id="load_more" href="<?= Minz_Url::display($url_next) ?>">
-			<?= _t('gen.pagination.load_more') ?>
-		</a>
+		<button id="load_more" type="submit" class="btn" formaction="<?= Minz_Url::display($url_next) ?>"><?= _t('gen.stream.load_more') ?></button>
 	<?php } elseif ($hasAccess) { ?>
 		<button id="bigMarkAsRead"
 			class="as-link <?= FreshRSS_Context::$user_conf->reading_confirm ? 'confirm" disabled="disabled' : '' ?>"
-			form="mark-read-pagination"
+			form="stream-footer"
 			formaction="<?= Minz_Url::display($url_mark_read) ?>"
 			type="submit">
-			<?= _t('gen.pagination.nothing_to_load') ?><br />
+			<?= _t('gen.stream.nothing_to_load') ?><br />
 			<span class="bigTick">✓</span><br />
-			<?= _t('gen.pagination.mark_all_read') ?>
+			<?= _t('gen.stream.mark_all_read') ?>
 		</button>
 	<?php } else { ?>
 		<div id="bigMarkAsRead">
-			<?= _t('gen.pagination.nothing_to_load') ?><br />
+			<?= _t('gen.stream.nothing_to_load') ?><br />
 		</div>
 	<?php } ?>
-	</li>
-</ul>
+	</div>
 <?php if ($hasAccess) { ?>
 </form>
 <?php } else {?>
--- a/app/views/index/normal.phtml
+++ b/app/views/index/normal.phtml
@@ -110,7 +110,7 @@ $today = @strtotime('today');

 	if ($nbEntries > 0):
 		call_user_func($this->callbackBeforePagination, $this, $nbEntries, $lastEntry);
-		$this->renderHelper('pagination');
+		$this->renderHelper('stream-footer');
 ?></main><?php
 	else:
 		ob_end_clean();	//Discard the articles headers, as we have no articles
--- a/app/views/index/reader.phtml
+++ b/app/views/index/reader.phtml
@@ -74,7 +74,7 @@ $content_width = FreshRSS_Context::$user_conf->content_width;

 	if ($nbEntries > 0):
 		call_user_func($this->callbackBeforePagination, $this, $nbEntries, $lastEntry);
-		$this->renderHelper('pagination');
+		$this->renderHelper('stream-footer');
 ?></main><?php
 	else:
 		ob_end_clean();	//Discard the articles headers, as we have no articles
--- 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));
--- 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;
 	};
--- 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;
--- 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;
--- 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 {
--- 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 {
--- 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 {
--- 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;
--- 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;
--- 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 */
--- 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 */
--- 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 */
--- 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 */
--- 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 {
--- 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 {
--- 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 {
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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 {
--- 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 {
--- 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;

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

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

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