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>

8 files changed, 159 insertions, 21 deletions

diff --git a/p/scripts/config.js b/p/scripts/config.js
index e3a85df15..01cd15a26 100644
--- a/p/scripts/config.js
+++ b/p/scripts/config.js
@@ -19,12 +19,20 @@ function updateSelectInput(ev) {
 	const input = document.getElementById(elem.dataset.name + '-input');
 	if (elem.selectedOptions[0].dataset.inputVisible == 'false') {
 		formGroup.style.display = 'none';
-		input.name = '';
-		elem.name = elem.dataset.name;
+		if (input) {
+			input.name = '';
+		}
+		if (elem.name == '') {
+			elem.name = elem.dataset.name;
+		}
 	} else {
 		formGroup.style.display = '';
-		input.name = elem.dataset.name;
-		elem.name = '';
+		if (input) {
+			input.name = elem.dataset.name;
+		}
+		if (elem.name === elem.dataset.name) {
+			elem.name = '';
+		}
 	}
 }
 
diff --git a/p/scripts/main.js b/p/scripts/main.js
index 461dc1b10..17c292b9f 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -1043,7 +1043,7 @@ function init_stream(stream) {
 			return ev.ctrlKey;
 		}
 
-		el = ev.target.closest('.flux .content a');
+		el = ev.target.closest('.flux .content .text a');
 		if (el) {
 			if (!el.closest('div').classList.contains('author')) {
 				el.target = '_blank';
diff --git a/p/themes/Ansum/_layout.scss b/p/themes/Ansum/_layout.scss
index b94097f16..727ebecd4 100644
--- a/p/themes/Ansum/_layout.scss
+++ b/p/themes/Ansum/_layout.scss
@@ -143,10 +143,6 @@
 	text-align: center;
 }
 
-#new-article:hover {
-	background: variables.$main-first-alt;
-}
-
 #new-article > a {
 	line-height: 3em;
 	font-weight: bold;
@@ -155,6 +151,7 @@
 
 #new-article > a:hover {
 	text-decoration: none;
+	background: variables.$main-first-alt;
 }
 
 /*=== Day indication */
diff --git a/p/themes/Mapco/_layout.scss b/p/themes/Mapco/_layout.scss
index 8e7c7aa98..0b37153a8 100644
--- a/p/themes/Mapco/_layout.scss
+++ b/p/themes/Mapco/_layout.scss
@@ -146,10 +146,6 @@
 	text-align: center;
 }
 
-#new-article:hover {
-	background: variables.$main-first-alt;
-}
-
 #new-article > a {
 	line-height: 3em;
 	font-weight: bold;
@@ -158,6 +154,7 @@
 
 #new-article > a:hover {
 	text-decoration: none;
+	background: variables.$main-first-alt;
 }
 
 /*=== Day indication */
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 636789c3f..4752159fc 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -844,7 +844,7 @@ a.btn {
 	padding: 20px 10px;
 }
 
-.content > h1.title > a {
+.content h1.title > a {
 	color: #000;
 }
 
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index f3905b069..0961a2e24 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -844,7 +844,7 @@ a.btn {
 	padding: 20px 10px;
 }
 
-.content > h1.title > a {
+.content h1.title > a {
 	color: #000;
 }
 
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 6ed321114..a51735dd8 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -1149,9 +1149,77 @@ a.website:hover .favicon {
 	max-width: 550px;
 }
 
-.content ul,
-.content ol,
-.content dd {
+.content .article-header-topline {
+	margin-bottom: 0.75rem;
+}
+
+.content > header,
+.content > footer {
+	color: #666;
+	font-size: .9rem;
+}
+
+.content > footer {
+	margin: 2rem 0 2rem;
+	padding-top: 1rem;
+	border-top: 2px solid #ccc;
+	clear: both;
+}
+
+.content > footer .subtitle {
+	padding-bottom: 1rem;
+}
+
+.content > header a,
+.content > footer a {
+	color: #666;
+	text-decoration: none;
+}
+
+.content > header a:hover,
+.content > footer a:hover {
+	color: #0062be;
+	text-decoration: underline;
+}
+
+.content > header .tags,
+.content > footer .tags {
+	display: flex;
+	line-height: 1;
+}
+
+.content > header .tags .icon,
+.content > footer .tags .icon {
+	padding: 2px 10px 0 0;
+}
+
+.content > header .tags .list-tags,
+.content > footer .tags .list-tags {
+	margin: 0;
+	padding: 0;
+	display: inline-block;
+	list-style: none;
+}
+
+.content > header .tags .list-tags .item.tag,
+.content > footer .tags .list-tags .item.tag {
+	display: inline-block;
+	padding-right: 0.75em;
+	line-height: normal;
+}
+
+.content > header .tags .list-tags .item.tag a.link-tag,
+.content > footer .tags .list-tags .item.tag a.link-tag {
+	display: inline;
+}
+
+.content > header h1 {
+	margin: 0.5em 0;
+}
+
+.content .text ul,
+.content .text ol,
+.content .text dd {
 	margin: 0 0 0 15px;
 	padding: 0 0 5px 15px;
 }
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index df46eff21..9d52dac07 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -1149,9 +1149,77 @@ a.website:hover .favicon {
 	max-width: 550px;
 }
 
-.content ul,
-.content ol,
-.content dd {
+.content .article-header-topline {
+	margin-bottom: 0.75rem;
+}
+
+.content > header,
+.content > footer {
+	color: #666;
+	font-size: .9rem;
+}
+
+.content > footer {
+	margin: 2rem 0 2rem;
+	padding-top: 1rem;
+	border-top: 2px solid #ccc;
+	clear: both;
+}
+
+.content > footer .subtitle {
+	padding-bottom: 1rem;
+}
+
+.content > header a,
+.content > footer a {
+	color: #666;
+	text-decoration: none;
+}
+
+.content > header a:hover,
+.content > footer a:hover {
+	color: #0062be;
+	text-decoration: underline;
+}
+
+.content > header .tags,
+.content > footer .tags {
+	display: flex;
+	line-height: 1;
+}
+
+.content > header .tags .icon,
+.content > footer .tags .icon {
+	padding: 2px 0 0 10px;
+}
+
+.content > header .tags .list-tags,
+.content > footer .tags .list-tags {
+	margin: 0;
+	padding: 0;
+	display: inline-block;
+	list-style: none;
+}
+
+.content > header .tags .list-tags .item.tag,
+.content > footer .tags .list-tags .item.tag {
+	display: inline-block;
+	padding-left: 0.75em;
+	line-height: normal;
+}
+
+.content > header .tags .list-tags .item.tag a.link-tag,
+.content > footer .tags .list-tags .item.tag a.link-tag {
+	display: inline;
+}
+
+.content > header h1 {
+	margin: 0.5em 0;
+}
+
+.content .text ul,
+.content .text ol,
+.content .text dd {
 	margin: 0 15px 0 0;
 	padding: 0 15px 5px 0;
 }