Show feed name inside the article (#3081)

* Show feed name inside the article

#fix https://github.com/FreshRSS/FreshRSS/issues/3079

* Normal view add date in subtitle

#fix
https://github.com/FreshRSS/FreshRSS/issues/3079#issuecomment-650109551

28 files changed, 65 insertions, 41 deletions

diff --git a/app/views/index/normal.phtml b/app/views/index/normal.phtml
index e56e99561..88b194a65 100644
--- a/app/views/index/normal.phtml
+++ b/app/views/index/normal.phtml
@@ -72,20 +72,29 @@ $today = @strtotime('today');
 		?><div class="flux_content" dir="auto">
 			<div class="content <?= $content_width ?>">
 				<h1 class="title"><a target="_blank" rel="noreferrer" class="go_website" href="<?= $this->entry->link() ?>"><?= $this->entry->title() ?></a></h1>
-				<div class="author"><?php
-					$authors = $this->entry->authors();
-					if (is_array($authors)):
-						$first = true;
-						foreach ($authors as $author):
-							echo $first ? _t('gen.short.by_author') . ' ' : '· ';
-							$first = false;
-				?>
-<em><a href="<?= _url('index', 'index', 'search', 'author:' . str_replace(' ', '+', htmlspecialchars_decode($author, ENT_QUOTES))) ?>"><?= $author ?></a></em>
-				<?php	endforeach; ?>
-				</div><?php
-					endif;
+				<div class="subtitle">
+					<div class="website"><a href="<?= _url('index', 'index', 'get', 'f_' . $this->feed->id()) ?>">
+						<?php if (FreshRSS_Context::$user_conf->show_favicons): ?><img class="favicon" src="<?= $this->feed->favicon() ?>" alt="✇" loading="lazy" /><?php endif; ?>
+						<span><?= $this->feed->name() ?></span></a>
+					</div>
+					<div class="date"><?= $this->entry->date() ?></div>
+					<?php
+						$authors = $this->entry->authors();
+						if (!empty($authors) && is_array($authors)):
+							$first = true;
+					?>
+					<div class="author"><?php
+							foreach ($authors as $author):
+								echo $first ? _t('gen.short.by_author') . ' ' : '· ';
+								$first = false;
+					?>
+	<em><a href="<?= _url('index', 'index', 'search', 'author:' . str_replace(' ', '+', htmlspecialchars_decode($author, ENT_QUOTES))) ?>"><?= $author ?></a></em>
+					<?php	endforeach; ?>
+					</div><?php endif; ?>
+				</div>
+				<div class="text"><?php
 					echo $lazyload && $hidePosts ? lazyimg($this->entry->content()) : $this->entry->content();
-				?>
+				?></div>
 			</div><?php
 
 			$this->renderHelper('index/normal/entry_bottom');
diff --git a/app/views/index/reader.phtml b/app/views/index/reader.phtml
index c21fdb7f3..644cd09c6 100644
--- a/app/views/index/reader.phtml
+++ b/app/views/index/reader.phtml
@@ -63,10 +63,9 @@ $content_width = FreshRSS_Context::$user_conf->content_width;
 						echo ' — ';
 					endif;
 					echo $item->date();
-				?></div>
-
+				?></div><div class="text">
 				<?= $item->content() ?>
-			</div>
+			</div></div>
 		</div>
 	</div><?php
 	endforeach;
diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css
index d615f9e5b..2f34976fa 100644
--- a/p/themes/Alternative-Dark/adark.css
+++ b/p/themes/Alternative-Dark/adark.css
@@ -797,7 +797,7 @@ a.btn {
 	padding: 5px;
 }
 
-.flux .date {
+.flux .item.date {
 	color: #ababab;
 	font-size: 0.7rem;
 }
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index b0c43e566..4526745ea 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -797,7 +797,7 @@ a.btn {
 	padding: 5px;
 }
 
-.flux .date {
+.flux .item.date {
 	color: #ababab;
 	font-size: 0.7rem;
 }
diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css
index 92457f4e2..565e1edb5 100644
--- a/p/themes/Ansum/ansum.css
+++ b/p/themes/Ansum/ansum.css
@@ -1226,7 +1226,7 @@ form th {
 .flux .website .favicon {
   padding: 5px;
 }
-.flux .date {
+.flux .item.date {
   color: rgba(54, 51, 48, 0.5);
   font-size: 0.85rem;
 }
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index 7595939ca..8d1a9c96d 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -1227,7 +1227,7 @@ form th {
 .flux .website .favicon {
   padding: 5px;
 }
-.flux .date {
+.flux .item.date {
   color: rgba(54, 51, 48, 0.5);
   font-size: 0.85rem;
 }
diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css
index d3e4b74e4..6ad90e2dc 100644
--- a/p/themes/BlueLagoon/BlueLagoon.css
+++ b/p/themes/BlueLagoon/BlueLagoon.css
@@ -933,7 +933,7 @@ a.btn {
 	padding: 5px;
 }
 
-.flux .date {
+.flux .item.date {
 	color: #666;
 	font-size: 0.7rem;
 }
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index c1f68d94d..26c317f1d 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -941,7 +941,7 @@ a.btn {
 	padding: 5px;
 }
 
-.flux .date {
+.flux .item.date {
 	color: #666;
 	font-size: 0.7rem;
 }
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index ad9b62b9c..cf66b63e3 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -810,7 +810,7 @@ a.btn {
 	margin: 5px;
 }
 
-.flux .date {
+.flux .item.date {
 	color: #666;
 	font-size: 0.7rem;
 }
diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css
index 86d899265..c50f9a083 100644
--- a/p/themes/Dark/dark.rtl.css
+++ b/p/themes/Dark/dark.rtl.css
@@ -810,7 +810,7 @@ a.btn {
 	margin: 5px;
 }
 
-.flux .date {
+.flux .item.date {
 	color: #666;
 	font-size: 0.7rem;
 }
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index 79f41b3ba..ca148dcae 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -829,7 +829,7 @@ a.btn {
 	padding: 5px;
 }
 
-.flux .date {
+.flux .item.date {
 	color: #666;
 	font-size: 0.7rem;
 }
diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css
index 3dc4ccd04..7434dcc0c 100644
--- a/p/themes/Flat/flat.rtl.css
+++ b/p/themes/Flat/flat.rtl.css
@@ -829,7 +829,7 @@ a.btn {
 	padding: 5px;
 }
 
-.flux .date {
+.flux .item.date {
 	color: #666;
 	font-size: 0.7rem;
 }
diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css
index e77168792..90037e9ff 100644
--- a/p/themes/Mapco/mapco.css
+++ b/p/themes/Mapco/mapco.css
@@ -1234,7 +1234,7 @@ form th {
 .flux .website .favicon {
   padding: 5px;
 }
-.flux .date {
+.flux .item.date {
   color: rgba(48, 49, 54, 0.5);
   font-size: 0.85rem;
 }
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 672d1cf5d..e59728f55 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -1235,7 +1235,7 @@ form th {
 .flux .website .favicon {
   padding: 5px;
 }
-.flux .date {
+.flux .item.date {
   color: rgba(48, 49, 54, 0.5);
   font-size: 0.85rem;
 }
diff --git a/p/themes/Origine-compact/origine-compact.css b/p/themes/Origine-compact/origine-compact.css
index da0148981..0cdab1bcd 100644
--- a/p/themes/Origine-compact/origine-compact.css
+++ b/p/themes/Origine-compact/origine-compact.css
@@ -862,7 +862,7 @@ a.btn,
 	padding: 5px;
 }
 
-.flux .date {
+.flux .item.date {
 	color: #666;
 	font-size: 0.7rem;
 }
diff --git a/p/themes/Origine-compact/origine-compact.rtl.css b/p/themes/Origine-compact/origine-compact.rtl.css
index 723be582d..30fd8e8ee 100644
--- a/p/themes/Origine-compact/origine-compact.rtl.css
+++ b/p/themes/Origine-compact/origine-compact.rtl.css
@@ -862,7 +862,7 @@ a.btn,
 	padding: 5px;
 }
 
-.flux .date {
+.flux .item.date {
 	color: #666;
 	font-size: 0.7rem;
 }
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index caee8a90a..0aaf244cc 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -847,7 +847,7 @@ a.btn {
 	padding: 5px;
 }
 
-.flux .date {
+.flux .item.date {
 	color: #666;
 	font-size: 0.7rem;
 }
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index d216a2f45..73966e5ce 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -847,7 +847,7 @@ a.btn {
 	padding: 5px;
 }
 
-.flux .date {
+.flux .item.date {
 	color: #666;
 	font-size: 0.7rem;
 }
diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css
index c798fc1cb..88b7d2f24 100644
--- a/p/themes/Pafat/pafat.css
+++ b/p/themes/Pafat/pafat.css
@@ -823,7 +823,7 @@ a.btn {
 	padding: 5px;
 }
 
-.flux .date {
+.flux .item.date {
 	color: #666;
 	font-size: 0.7rem;
 }
diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css
index a7f4bb3d8..12835e13c 100644
--- a/p/themes/Pafat/pafat.rtl.css
+++ b/p/themes/Pafat/pafat.rtl.css
@@ -823,7 +823,7 @@ a.btn {
 	padding: 5px;
 }
 
-.flux .date {
+.flux .item.date {
 	color: #666;
 	font-size: 0.7rem;
 }
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index e4e85dbc0..87839702b 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -924,7 +924,7 @@ a.btn {
 	padding: 5px;
 }
 
-.flux .date {
+.flux .item.date {
 	color: #666;
 	font-size: 0.7rem;
 }
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index 47d67fccd..6d52dd09f 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -932,7 +932,7 @@ a.btn {
 	padding: 5px;
 }
 
-.flux .date {
+.flux .item.date {
 	color: #666;
 	font-size: 0.7rem;
 }
diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css
index 45bfd1cdc..505806109 100644
--- a/p/themes/Swage/swage.css
+++ b/p/themes/Swage/swage.css
@@ -753,7 +753,7 @@ form th {
 .flux.not_read:not(.current):hover .item.title {
   background: #fff3ed;
 }
-.flux .date {
+.flux .item.date {
   color: #969696;
   font-size: 0.7rem;
 }
diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css
index 87f0ca840..a21e32e45 100644
--- a/p/themes/Swage/swage.rtl.css
+++ b/p/themes/Swage/swage.rtl.css
@@ -753,7 +753,7 @@ form th {
 .flux.not_read:not(.current):hover .item.title {
   background: #fff3ed;
 }
-.flux .date {
+.flux .item.date {
   color: #969696;
   font-size: 0.7rem;
 }
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index 72020e8e6..b878d034a 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -653,7 +653,7 @@ a.btn {
 	padding: 5px;
 }
 
-.flux .date {
+.flux .item.date {
 	font-size: 0.7rem;
 }
 
diff --git a/p/themes/base-theme/base.rtl.css b/p/themes/base-theme/base.rtl.css
index 00c56641b..4da21b72e 100644
--- a/p/themes/base-theme/base.rtl.css
+++ b/p/themes/base-theme/base.rtl.css
@@ -653,7 +653,7 @@ a.btn {
 	padding: 5px;
 }
 
-.flux .date {
+.flux .item.date {
 	font-size: 0.7rem;
 }
 
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index f2baeb3d1..ed20043aa 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -781,6 +781,14 @@ input[type="search"] {
 	overflow: auto;
 }
 
+.subtitle > div {
+	display: inline;
+}
+
+.subtitle > div:not(:first-of-type)::before {
+	content: ' · ';
+}
+
 br {
 	line-height: 1em;
 }
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index cb2b5f474..eea8ae191 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -719,7 +719,7 @@ input[type="search"] {
 }
 
 .flux .item.title .author {
-	padding-right: 1rem;
+	padding-left: 1rem;
 	color: #555;
 	font-size: .9rem;
 	font-weight: normal;
@@ -781,6 +781,14 @@ input[type="search"] {
 	overflow: auto;
 }
 
+.subtitle > div {
+	display: inline;
+}
+
+.subtitle > div:not(:first-of-type)::before {
+	content: ' · ';
+}
+
 br {
 	line-height: 1em;
 }