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

22 files changed, 103 insertions, 71 deletions

diff --git a/app/Controllers/indexController.php b/app/Controllers/indexController.php
index 8ec5bdb27..0fc7bb61a 100755
--- 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();
 			}
diff --git a/app/i18n/cz/gen.php b/app/i18n/cz/gen.php
index c4b9a22a4..70a82d776 100644
--- 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',
+	),
 );
diff --git a/app/i18n/de/gen.php b/app/i18n/de/gen.php
index 2023ce93d..7808e99e7 100644
--- 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',
+	),
 );
diff --git a/app/i18n/en-us/gen.php b/app/i18n/en-us/gen.php
index 6a7a26e81..ea05cfb20 100644
--- 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
+	),
 );
diff --git a/app/i18n/en/gen.php b/app/i18n/en/gen.php
index 4343f1485..ae09a83dd 100644
--- 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',
+	),
 );
diff --git a/app/i18n/es/gen.php b/app/i18n/es/gen.php
index 2f2adad49..b4a3bacbc 100755
--- 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',
+	),
 );
diff --git a/app/i18n/fr/gen.php b/app/i18n/fr/gen.php
index 04c5b0a76..da10f21fd 100644
--- 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',
+	),
 );
diff --git a/app/i18n/he/gen.php b/app/i18n/he/gen.php
index f24c51f00..906ced7a0 100644
--- 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' => 'אין מאמרים נוספים',
+	),
 );
diff --git a/app/i18n/it/gen.php b/app/i18n/it/gen.php
index d6361c45d..f3d237621 100644
--- 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',
+	),
 );
diff --git a/app/i18n/ja/gen.php b/app/i18n/ja/gen.php
index fac7c3ad2..a2efd0e5c 100644
--- 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' => 'これ以上の記事はありません',
+	),
 );
diff --git a/app/i18n/ko/gen.php b/app/i18n/ko/gen.php
index 1599f602d..e41f161e1 100644
--- 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' => '더 이상 글이 없습니다',
+	),
 );
diff --git a/app/i18n/nl/gen.php b/app/i18n/nl/gen.php
index 2f20a0cd0..1e50d3dbd 100644
--- 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',
+	),
 );
diff --git a/app/i18n/oc/gen.php b/app/i18n/oc/gen.php
index edd7b3850..b1fe438ac 100644
--- 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',
+	),
 );
diff --git a/app/i18n/pl/gen.php b/app/i18n/pl/gen.php
index e6dd0cbaa..3534780a8 100644
--- 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',
+	),
 );
diff --git a/app/i18n/pt-br/gen.php b/app/i18n/pt-br/gen.php
index cc3b6df0f..0e30634b6 100644
--- 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',
+	),
 );
diff --git a/app/i18n/ru/gen.php b/app/i18n/ru/gen.php
index fdf430ac1..fee014bbe 100644
--- 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' => 'Больше нет статей',
+	),
 );
diff --git a/app/i18n/sk/gen.php b/app/i18n/sk/gen.php
index 6ffda2251..faad543f3 100644
--- 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',
+	),
 );
diff --git a/app/i18n/tr/gen.php b/app/i18n/tr/gen.php
index b920c84fb..a4a963601 100644
--- 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',
+	),
 );
diff --git a/app/i18n/zh-cn/gen.php b/app/i18n/zh-cn/gen.php
index ae4f330fd..ad03d8ca1 100644
--- 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' => '没有更多文章',
+	),
 );
diff --git a/app/views/helpers/pagination.phtml b/app/views/helpers/stream-footer.phtml
index eed4f5dc2..ebce4d852 100755
--- a/app/views/helpers/pagination.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 {?>
diff --git a/app/views/index/normal.phtml b/app/views/index/normal.phtml
index 3909083e9..5dde2a171 100644
--- 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
diff --git a/app/views/index/reader.phtml b/app/views/index/reader.phtml
index 315d7d7aa..e4fb74708 100644
--- 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