Improved: Article header (#4101)

* First draft for normal view

* Revert changes on the entry header

* Update normal.phtml

* Update normal.phtml

* RTL CSS

* CSS fixes

* Better tags style

* fix

* Update swage.scss

* fix

* Update swage.scss

* fixed .content header

* font-size in rem

* improved template

* dropdown menu if more than 7 tags

* configuration: show tags in topline

* Simplify loop logic

* Minor space

* config tags via reading (i18n still missed)

* fixed the whitespaces

* optimizations

* optimize header+footer

* Update normal.phtml

* fix css

* new config: show author+date in footer

* config feed name display

* improve HTML

* fix whitespaces

* i18n

* i18n: German translations

* fix i18n German

* fixed: uncouple from bottomline config

* reverted: tobline_tags

* equalities

* fixed: author in footer

* fixed data-leave-validation

* improved max numbers i18n label

* Config works now also in the reader view

* fix: footer border

* reader view: style article-header-topline

* fixed whitespace

* i18n fr

* Minor i18n fr

* Fix mistake i18n fr

* i18n fr more precise expression

* Fix JavaScript

* removed the link icon in the title

* clean CSS

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

1 files changed, 177 insertions, 42 deletions

diff --git a/app/views/index/reader.phtml b/app/views/index/reader.phtml
index 3bd644367..c9ef7fbd9 100644
--- a/app/views/index/reader.phtml
+++ b/app/views/index/reader.phtml
@@ -9,6 +9,7 @@ call_user_func($this->callbackBeforeEntries, $this);
 
 $lazyload = FreshRSS_Context::$user_conf->lazyload;
 $content_width = FreshRSS_Context::$user_conf->content_width;
+$MAX_TAGS_DISPLAYED = FreshRSS_Context::$user_conf->show_tags_max;
 ?>
 <main id="stream" class="reader">
 
@@ -27,52 +28,186 @@ $content_width = FreshRSS_Context::$user_conf->content_width;
 		if ($item == null) {
 			continue;
 		}
+		$this->entry = $item;
+
+		$tags = null;
+		$firstTags = array();
+		$remainingTags = array();
+
+		if (FreshRSS_Context::$user_conf->show_tags == 'h' || FreshRSS_Context::$user_conf->show_tags == 'f' || FreshRSS_Context::$user_conf->show_tags == 'b') {
+			$tags = $this->entry->tags();
+			if (!empty($tags)) {
+				if ($MAX_TAGS_DISPLAYED > 0) {
+					$firstTags = array_slice($tags, 0, $MAX_TAGS_DISPLAYED);
+					$remainingTags = array_slice($tags, $MAX_TAGS_DISPLAYED);
+				} else {
+					$firstTags = $tags;
+				}
+			}
+		}
 	?><div class="flux<?= !$item->isRead() ? ' not_read' : '' ?><?= $item->isFavorite() ? ' favorite' : '' ?>" id="flux_<?= $item->id() ?>">
-		<div class="flux_content" dir="auto">
+		<article class="flux_content" dir="auto">
+		
 			<div class="content <?= $content_width ?>">
-				<?php
-					$feed = FreshRSS_CategoryDAO::findFeed($this->categories, $item->feed());	//We most likely already have the feed object in cache
-					if (empty($feed)) $feed = $item->feed(true);
-					$favoriteUrl = array('c' => 'entry', 'a' => 'bookmark', 'params' => array('id' => $item->id()));
-					if ($item->isFavorite()) {
-						$favoriteUrl['params']['is_favorite'] = 0;
-					}
-					$readUrl = array('c' => 'entry', 'a' => 'read', 'params' => array('id' => $item->id()));
-					if ($item->isRead()) {
-						$readUrl['params']['is_read'] = 0;
-					}
-				?>
-				<?php if (FreshRSS_Auth::hasAccess()) { ?>
-				<a class="read" href="<?= Minz_Url::display($readUrl) ?>" title="<?= _t('conf.shortcut.mark_read') ?>"><?= _i($item->isRead() ? 'read' : 'unread') ?></a>
-				<a class="bookmark" href="<?= Minz_Url::display($favoriteUrl) ?>" title="<?= _t('conf.shortcut.mark_favorite') ?>"><?= _i($item->isFavorite() ? 'starred' : 'non-starred') ?></a>
-				<?php } ?>
-				<a class="website" href="<?= _url('index', 'reader', 'get', 'f_' . $feed->id()) ?>" title="<?= _t('gen.action.filter') ?>"><?php
-				if (FreshRSS_Context::$user_conf->show_favicons):
-				?><img class="favicon" src="<?= $feed->favicon() ?>" alt="✇" loading="lazy" /><?php
-				endif;
-				?><span><?= $feed->name() ?></span>
-				</a>
-				<h1 class="title"><a target="_blank" rel="noreferrer" class="go_website" href="<?= $item->link() ?>"><?= $item->title() ?></a></h1>
+				<header>
+					<?php
+						$feed = FreshRSS_CategoryDAO::findFeed($this->categories, $item->feed());	//We most likely already have the feed object in cache
+						if (empty($feed)) $feed = $item->feed(true);
+						$favoriteUrl = array('c' => 'entry', 'a' => 'bookmark', 'params' => array('id' => $item->id()));
+						if ($item->isFavorite()) {
+							$favoriteUrl['params']['is_favorite'] = 0;
+						}
+						$readUrl = array('c' => 'entry', 'a' => 'read', 'params' => array('id' => $item->id()));
+						if ($item->isRead()) {
+							$readUrl['params']['is_read'] = 0;
+						}
+					?>
+					<div class="article-header-topline">
+						<?php if (FreshRSS_Auth::hasAccess()) { ?>
+							<a class="read" href="<?= Minz_Url::display($readUrl) ?>" title="<?= _t('conf.shortcut.mark_read') ?>"><?= _i($item->isRead() ? 'read' : 'unread') ?></a>
+							<a class="bookmark" href="<?= Minz_Url::display($favoriteUrl) ?>" title="<?= _t('conf.shortcut.mark_favorite') ?>"><?= _i($item->isFavorite() ? 'starred' : 'non-starred') ?></a>
+						<?php } ?>
+						<?php if (FreshRSS_Context::$user_conf->show_feed_name === 't') { ?>
+							<a class="website" href="<?= _url('index', 'reader', 'get', 'f_' . $feed->id()) ?>" title="<?= _t('gen.action.filter') ?>">
+								<?php if (FreshRSS_Context::$user_conf->show_favicons): ?>
+									<img class="favicon" src="<?= $feed->favicon() ?>" alt="✇" loading="lazy" /><?php
+								endif; ?><span><?= $feed->name() ?></span></a>
+						<?php } ?>
+					</div>
+
+					<?php if (FreshRSS_Context::$user_conf->show_tags === 'h' || FreshRSS_Context::$user_conf->show_tags === 'b') { ?>
+						<div class="tags">
+							<?php
+							if (!empty($tags)) {
+								?><?= _i('tag') ?><ul class="list-tags"><?php
+								foreach ($firstTags as $tag) {
+									?><li class="item tag"><a class="link-tag" href="<?= _url('index', 'index', 'search', '#' . str_replace(' ', '+', htmlspecialchars_decode($tag, ENT_QUOTES))) ?>" title="<?= _t('gen.action.filter') ?>">#<?= $tag ?></a></li><?php
+								}
 
-				<div class="author"><?php
-					$authors = $item->authors();
-					if (is_array($authors)):
-						$first = true;
-						foreach ($authors as $author):
-							echo $first ? _t('gen.short.by_author') . ' ' : '· ';
-							$first = false;
-				?>
-<em><a href="<?= Minz_Url::display(Minz_Request::modifiedCurrentRequest(
-		['search' => 'author:' . str_replace(' ', '+', htmlspecialchars_decode($author, ENT_QUOTES))])
-	) ?>"><?= $author ?></a></em>
+								if (!empty($remainingTags)) { // more than 7 tags: show dropdown menu ?>
+									<li class="item tag">
+										<div class="dropdown">
+											<div id="dropdown-tags2-<?= $this->entry->id() ?>" class="dropdown-target"></div>
+											<a class="dropdown-toggle" href="#dropdown-tags2-<?= $this->entry->id() ?>"><?= _i('down') ?></a>
+											<ul class="dropdown-menu">
+												<li class="dropdown-header"><?= _t('index.tag.related') ?></li>
+												<?php
+												foreach ($remainingTags as $tag) {
+													?><li class="item"><a href="<?= _url('index', 'index', 'search', '#' . str_replace(' ', '+', htmlspecialchars_decode($tag, ENT_QUOTES))) ?>" title="<?= _t('gen.action.filter') ?>"><?= $tag ?></a></li><?php
+												} ?>
+											</ul>
+											<a class="dropdown-close" href="#close">❌</a>
+										</div>
+									</li>
+									<?php
+								} ?>
+								</ul><?php
+							} ?>
+						</div>
+					<?php } ?>
+
+					<h1 class="title"><a target="_blank" rel="noreferrer" class="go_website" href="<?= $item->link() ?>"><?= $item->title() ?></a></h1>
+					<?php if (FreshRSS_Context::$user_conf->show_author_date === 'h' || FreshRSS_Context::$user_conf->show_author_date === 'b') { ?>
+						<div class="subtitle">
+							<?php if (FreshRSS_Context::$user_conf->show_feed_name === 'a') { ?>
+								<div class="website"><a href="<?= _url('index', 'reader', 'get', 'f_' . $feed->id()) ?>" title="<?= _t('gen.action.filter') ?>">
+									<?php if (FreshRSS_Context::$user_conf->show_favicons): ?>
+										<img class="favicon" src="<?= $feed->favicon() ?>" alt="✇" loading="lazy" /><?php
+									endif; ?><span><?= $feed->name() ?></span></a></div>
+							<?php } ?>
+							<div class="author"><?php
+								$authors = $item->authors();
+								if (is_array($authors)) {
+									foreach ($authors as $author) {
+										?>
+										<a href="<?= Minz_Url::display(Minz_Request::modifiedCurrentRequest(['search' => 'author:' . str_replace(' ', '+', htmlspecialchars_decode($author, ENT_QUOTES))])) ?>">
+											<?= $author ?>
+										</a>
+										<?php
+									}
+								}
+								?>
+							</div>
+							<div class="date">
+								<time datetime="<?= $item->machineReadableDate() ?>"><?= $item->date() ?></time>
+							</div>
+						</div>
+					<?php } ?>
+				</header>
+				
+				<div class="text">
+					<?= $item->content() ?>
+				</div>
 				<?php
-						endforeach;
-						echo ' — ';
-					endif;
-				?><time datetime="<?= $item->machineReadableDate() ?>"><?= $item->date() ?></time></div><div class="text">
-				<?= $item->content() ?>
-			</div></div>
-		</div>
+				$display_authors_date = FreshRSS_Context::$user_conf->show_author_date === 'f' || FreshRSS_Context::$user_conf->show_author_date === 'b';
+				$display_tags = FreshRSS_Context::$user_conf->show_tags === 'f' || FreshRSS_Context::$user_conf->show_tags === 'b';
+
+				if ($display_authors_date || $display_tags) {
+					?>
+					<footer>
+						<?php if ($display_authors_date) { ?>
+							<div class="subtitle">
+								<?php if (FreshRSS_Context::$user_conf->show_feed_name === 'a') { ?>
+									<div class="website"><a href="<?= _url('index', 'reader', 'get', 'f_' . $feed->id()) ?>" title="<?= _t('gen.action.filter') ?>">
+										<?php if (FreshRSS_Context::$user_conf->show_favicons): ?>
+											<img class="favicon" src="<?= $feed->favicon() ?>" alt="✇" loading="lazy" /><?php
+										endif; ?><span><?= $feed->name() ?></span></a></div>
+								<?php } ?>
+								<div class="author"><?php
+									$authors = $item->authors();
+									if (is_array($authors)) {
+										foreach ($authors as $author) {
+											?>
+											<a href="<?= Minz_Url::display(Minz_Request::modifiedCurrentRequest(['search' => 'author:' . str_replace(' ', '+', htmlspecialchars_decode($author, ENT_QUOTES))])) ?>">
+												<?= $author ?>
+											</a>
+											<?php
+										}
+									}
+									?>
+								</div>
+								<div class="date">
+									<time datetime="<?= $item->machineReadableDate() ?>"><?= $item->date() ?></time>
+								</div>
+							</div>
+							<?php
+						}
+
+						if ($display_tags) { ?>
+							<div class="tags">
+								<?php
+								if (!empty($tags)) {
+									?><?= _i('tag') ?><ul class="list-tags"><?php
+									foreach ($firstTags as $tag) {
+										?><li class="item tag"><a class="link-tag" href="<?= _url('index', 'index', 'search', '#' . str_replace(' ', '+', htmlspecialchars_decode($tag, ENT_QUOTES))) ?>" title="<?= _t('gen.action.filter') ?>">#<?= $tag ?></a></li><?php
+									}
+
+									if (!empty($remainingTags)) { // more than 7 tags: show dropdown menu ?>
+										<li class="item tag">
+											<div class="dropdown">
+												<div id="dropdown-tags2-<?= $this->entry->id() ?>" class="dropdown-target"></div>
+												<a class="dropdown-toggle" href="#dropdown-tags2-<?= $this->entry->id() ?>"><?= _i('down') ?></a>
+												<ul class="dropdown-menu">
+													<li class="dropdown-header"><?= _t('index.tag.related') ?></li>
+													<?php
+													foreach ($remainingTags as $tag) {
+														?><li class="item"><a href="<?= _url('index', 'index', 'search', '#' . str_replace(' ', '+', htmlspecialchars_decode($tag, ENT_QUOTES))) ?>" title="<?= _t('gen.action.filter') ?>"><?= $tag ?></a></li><?php
+													} ?>
+												</ul>
+												<a class="dropdown-close" href="#close">❌</a>
+											</div>
+										</li>
+										<?php
+									} ?>
+									</ul><?php
+								} ?>
+							</div>
+						<?php } ?>
+					</footer>
+					<?php
+				} ?>
+			</div>
+		</article>
 	</div><?php
 	endforeach;