Hide advanced options in new feed form (#3516)

* Hide new feed advanced options in a details tag

The form was huge and hard to process for beginners. Most of the fields
are optional 99% of time, there is no need to have them so proeminently.

* Remove sub.feed.auth.configuration i18n key

* Sync RTL css files

* Fix stylelint

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

* Fix "for" attributes in add feed form

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

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

26 files changed, 85 insertions, 89 deletions

diff --git a/app/i18n/cz/sub.php b/app/i18n/cz/sub.php
index 19c0bf2a7..15e4c0423 100644
--- a/app/i18n/cz/sub.php
+++ b/app/i18n/cz/sub.php
@@ -26,7 +26,6 @@ return array(
 		'advanced' => 'Pokročilé',
 		'archiving' => 'Archivace',
 		'auth' => array(
-			'configuration' => 'Přihlášení',
 			'help' => 'Umožní přístup k RSS kanálům chráneným HTTP autentizací',
 			'http' => 'HTTP přihlášení',
 			'password' => 'Heslo',
diff --git a/app/i18n/de/sub.php b/app/i18n/de/sub.php
index 8698268f3..c23328568 100644
--- a/app/i18n/de/sub.php
+++ b/app/i18n/de/sub.php
@@ -26,7 +26,6 @@ return array(
 		'advanced' => 'Erweitert',
 		'archiving' => 'Archivierung',
 		'auth' => array(
-			'configuration' => 'Anmelden',
 			'help' => 'Die Verbindung erlaubt Zugriff auf HTTP-geschützte RSS-Feeds',
 			'http' => 'HTTP-Authentifizierung',
 			'password' => 'HTTP-Passwort',
diff --git a/app/i18n/en-us/sub.php b/app/i18n/en-us/sub.php
index ee8ece901..3ccfc6816 100644
--- a/app/i18n/en-us/sub.php
+++ b/app/i18n/en-us/sub.php
@@ -26,7 +26,6 @@ return array(
 		'advanced' => 'Advanced',
 		'archiving' => 'Archiving',
 		'auth' => array(
-			'configuration' => 'Login',
 			'help' => 'Allows access to HTTP protected RSS feeds',
 			'http' => 'HTTP Authentication',
 			'password' => 'HTTP password',
diff --git a/app/i18n/en/sub.php b/app/i18n/en/sub.php
index dd230ba1b..737df94be 100644
--- a/app/i18n/en/sub.php
+++ b/app/i18n/en/sub.php
@@ -26,7 +26,6 @@ return array(
 		'advanced' => 'Advanced',
 		'archiving' => 'Archiving',
 		'auth' => array(
-			'configuration' => 'Login',
 			'help' => 'Allows access to HTTP protected RSS feeds',
 			'http' => 'HTTP Authentication',
 			'password' => 'HTTP password',
diff --git a/app/i18n/es/sub.php b/app/i18n/es/sub.php
index 856b4556e..60907fad2 100755
--- a/app/i18n/es/sub.php
+++ b/app/i18n/es/sub.php
@@ -26,7 +26,6 @@ return array(
 		'advanced' => 'Avanzado',
 		'archiving' => 'Archivo',
 		'auth' => array(
-			'configuration' => 'Identificación',
 			'help' => 'Permitir acceso a fuentes RSS protegidas con HTTP',
 			'http' => 'Identificación HTTP',
 			'password' => 'Contraseña HTTP',
diff --git a/app/i18n/fr/sub.php b/app/i18n/fr/sub.php
index a2a3d4bc2..56d716a8e 100644
--- a/app/i18n/fr/sub.php
+++ b/app/i18n/fr/sub.php
@@ -26,7 +26,6 @@ return array(
 		'advanced' => 'Avancé',
 		'archiving' => 'Archivage',
 		'auth' => array(
-			'configuration' => 'Identification',
 			'help' => 'La connexion permet d’accéder aux flux protégés par une authentification HTTP.',
 			'http' => 'Authentification HTTP',
 			'password' => 'Mot de passe HTTP',
diff --git a/app/i18n/he/sub.php b/app/i18n/he/sub.php
index 5984d5f6c..1553c3076 100644
--- a/app/i18n/he/sub.php
+++ b/app/i18n/he/sub.php
@@ -26,7 +26,6 @@ return array(
 		'advanced' => 'מתקדם',
 		'archiving' => 'ארכוב',
 		'auth' => array(
-			'configuration' => 'כניסה לחשבון',
 			'help' => 'החיבור מתיר לגשת להזנות RSS מוגנות',
 			'http' => 'HTTP אימות',
 			'password' => 'HTTP סיסמה',
diff --git a/app/i18n/it/sub.php b/app/i18n/it/sub.php
index 3cb71c485..153605584 100644
--- a/app/i18n/it/sub.php
+++ b/app/i18n/it/sub.php
@@ -26,7 +26,6 @@ return array(
 		'advanced' => 'Avanzate',
 		'archiving' => 'Archiviazione',
 		'auth' => array(
-			'configuration' => 'Autenticazione',
 			'help' => 'Accesso per feeds protetti',
 			'http' => 'Autenticazione HTTP',
 			'password' => 'HTTP password',	// TODO - Translation
diff --git a/app/i18n/kr/sub.php b/app/i18n/kr/sub.php
index 1c04e9fb9..8d3f781c4 100644
--- a/app/i18n/kr/sub.php
+++ b/app/i18n/kr/sub.php
@@ -26,7 +26,6 @@ return array(
 		'advanced' => '고급 설정',
 		'archiving' => '보관',
 		'auth' => array(
-			'configuration' => '로그인',
 			'help' => 'HTTP 접속이 제한되는 RSS 피드에 접근합니다',
 			'http' => 'HTTP 인증',
 			'password' => 'HTTP 암호',
diff --git a/app/i18n/nl/sub.php b/app/i18n/nl/sub.php
index 9656529b1..18b5360b4 100644
--- a/app/i18n/nl/sub.php
+++ b/app/i18n/nl/sub.php
@@ -26,7 +26,6 @@ return array(
 		'advanced' => 'Geavanceerd',
 		'archiving' => 'Archiveren',
 		'auth' => array(
-			'configuration' => 'Log in',
 			'help' => 'Verbinding toestaan toegang te krijgen tot HTTP beveiligde RSS-feeds',
 			'http' => 'HTTP Authenticatie',
 			'password' => 'HTTP wachtwoord',
diff --git a/app/i18n/oc/sub.php b/app/i18n/oc/sub.php
index ff02b8786..82960c52e 100644
--- a/app/i18n/oc/sub.php
+++ b/app/i18n/oc/sub.php
@@ -26,7 +26,6 @@ return array(
 		'advanced' => 'Avançat',
 		'archiving' => 'Archivar',
 		'auth' => array(
-			'configuration' => 'Identificacion',
 			'help' => 'Permet l’accès als fluxes protegits per una autentificacion HTTP',
 			'http' => 'Autentificacion HTTP',
 			'password' => 'Senhal HTTP',
diff --git a/app/i18n/pl/sub.php b/app/i18n/pl/sub.php
index bea398af5..20d008b3d 100644
--- a/app/i18n/pl/sub.php
+++ b/app/i18n/pl/sub.php
@@ -26,7 +26,6 @@ return array(
 		'advanced' => 'Zaawansowane',
 		'archiving' => 'Archiwizacja',
 		'auth' => array(
-			'configuration' => 'Uwierzytelnianie',
 			'help' => 'Pozwala na dostęp do kanałów chronionych hasłem HTTP',
 			'http' => 'HTTP Authentication',	// TODO - Translation
 			'password' => 'Hasło HTTP',
diff --git a/app/i18n/pt-br/sub.php b/app/i18n/pt-br/sub.php
index 286c1c5bd..b02c5674a 100644
--- a/app/i18n/pt-br/sub.php
+++ b/app/i18n/pt-br/sub.php
@@ -26,7 +26,6 @@ return array(
 		'advanced' => 'Avançado',
 		'archiving' => 'Arquivar',
 		'auth' => array(
-			'configuration' => 'Entrar',
 			'help' => 'Permite acesso a feeds RSS protegidos por HTTP',
 			'http' => 'Autenticação HTTP',
 			'password' => 'Senha HTTP',
diff --git a/app/i18n/ru/sub.php b/app/i18n/ru/sub.php
index 05a8024f5..d98d78f9a 100644
--- a/app/i18n/ru/sub.php
+++ b/app/i18n/ru/sub.php
@@ -26,7 +26,6 @@ return array(
 		'advanced' => 'Advanced',	// TODO - Translation
 		'archiving' => 'Archivage',
 		'auth' => array(
-			'configuration' => 'Login',	// TODO - Translation
 			'help' => 'Connection allows to access HTTP protected RSS feeds',
 			'http' => 'HTTP Authentication',	// TODO - Translation
 			'password' => 'HTTP password',	// TODO - Translation
diff --git a/app/i18n/sk/sub.php b/app/i18n/sk/sub.php
index 98a436f02..6ae36c1f2 100644
--- a/app/i18n/sk/sub.php
+++ b/app/i18n/sk/sub.php
@@ -26,7 +26,6 @@ return array(
 		'advanced' => 'Pokročilé',
 		'archiving' => 'Archivovanie',
 		'auth' => array(
-			'configuration' => 'Prihlásenie',
 			'help' => 'Povoliť prístup do kanálov chránených cez HTTP.',
 			'http' => 'Prihlásenie cez HTTP',
 			'password' => 'Heslo pre HTTP',
diff --git a/app/i18n/tr/sub.php b/app/i18n/tr/sub.php
index e9f895dcf..318cc1d9b 100644
--- a/app/i18n/tr/sub.php
+++ b/app/i18n/tr/sub.php
@@ -26,7 +26,6 @@ return array(
 		'advanced' => 'Gelişmiş',
 		'archiving' => 'Arşiv',
 		'auth' => array(
-			'configuration' => 'Giriş',
 			'help' => 'HTTP korumalı RSS akışlarına bağlantı izni sağlar',
 			'http' => 'HTTP Kimlik Doğrulama',
 			'password' => 'HTTP şifre',
diff --git a/app/i18n/zh-cn/sub.php b/app/i18n/zh-cn/sub.php
index bb3a05b59..c2f7edcd6 100644
--- a/app/i18n/zh-cn/sub.php
+++ b/app/i18n/zh-cn/sub.php
@@ -26,7 +26,6 @@ return array(
 		'advanced' => '高级',
 		'archiving' => '归档',
 		'auth' => array(
-			'configuration' => '认证',
 			'help' => '用于连接启用 HTTP 认证的订阅源',
 			'http' => 'HTTP 认证',
 			'password' => 'HTTP 密码',
diff --git a/app/views/subscription/add.phtml b/app/views/subscription/add.phtml
index 8d1dc6d2d..9e652f702 100644
--- a/app/views/subscription/add.phtml
+++ b/app/views/subscription/add.phtml
@@ -44,69 +44,73 @@
 			</div>
 		</div>
 
-		<legend><?= _t('sub.feed.auth.configuration') ?></legend>
-		<div class="form-group">
-			<label class="group-name" for="http_user"><?= _t('sub.feed.auth.username') ?></label>
-			<div class="group-controls">
-				<input id="http_user" name="http_user" type="text" autocomplete="off"/>
+		<details class="form-advanced">
+			<summary class="form-advanced-title">
+				<?= _t('sub.feed.advanced') ?>
+			</summary>
+
+			<div class="form-group">
+				<label class="group-name" for="http_user"><?= _t('sub.feed.auth.username') ?></label>
+				<div class="group-controls">
+					<input id="http_user" name="http_user" type="text" autocomplete="off"/>
+				</div>
 			</div>
-		</div>
 
-		<div class="form-group">
-		<label class="group-name" for="http_pass"><?= _t('sub.feed.auth.password') ?></label>
-			<div class="group-controls">
-				<input id="http_pass" name="http_pass" type="text" value=" " autocomplete="new-password"/>
+			<div class="form-group">
+				<label class="group-name" for="http_pass"><?= _t('sub.feed.auth.password') ?></label>
+				<div class="group-controls">
+					<input id="http_pass" name="http_pass" type="text" value=" " autocomplete="new-password"/>
+				</div>
 			</div>
-		</div>
 
-		<legend><?= _t('sub.feed.advanced') ?></legend>
-		<div class="form-group">
-			<label class="group-name" for="path_entries"><?= _t('sub.feed.useragent') ?></label>
-			<div class="group-controls">
-				<div class="stick">
-					<input type="text" name="curl_params_useragent" id="curl_params_useragent" class="extend" value="" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
+			<div class="form-group">
+				<label class="group-name" for="curl_params_useragent"><?= _t('sub.feed.useragent') ?></label>
+				<div class="group-controls">
+					<div class="stick">
+						<input type="text" name="curl_params_useragent" id="curl_params_useragent" class="extend" value="" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
+					</div>
+					<p class="help"><?= _i('help') ?> <?= _t('sub.feed.useragent_help') ?></p>
 				</div>
-				<p class="help"><?= _i('help') ?> <?= _t('sub.feed.useragent_help') ?></p>
 			</div>
-		</div>
 
-		<div class="form-group">
-			<label class="group-name" for="path_entries"><?= _t('sub.feed.proxy') ?></label>
-			<div class="group-controls">
-				<select class="number" name="proxy_type" id="proxy_type"><?php
-					foreach(['' => '', 3 => 'NONE', 0 => 'HTTP', 2 => 'HTTPS', 4 => 'SOCKS4', 6 => 'SOCKS4A', 5 => 'SOCKS5', 7 => 'SOCKS5H'] as $k => $v) {
-						echo '<option value="' . $k . '">' . $v . '</option>';
-					}
-				?>
-				</select>
-				<div class="stick">
-					<input type="text" name="curl_params" id="curl_params" class="extend" value="" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
+			<div class="form-group">
+				<label class="group-name" for="proxy_type"><?= _t('sub.feed.proxy') ?></label>
+				<div class="group-controls">
+					<select class="number" name="proxy_type" id="proxy_type"><?php
+						foreach(['' => '', 3 => 'NONE', 0 => 'HTTP', 2 => 'HTTPS', 4 => 'SOCKS4', 6 => 'SOCKS4A', 5 => 'SOCKS5', 7 => 'SOCKS5H'] as $k => $v) {
+							echo '<option value="' . $k . '">' . $v . '</option>';
+						}
+					?>
+					</select>
+					<div class="stick">
+						<input type="text" name="curl_params" id="curl_params" class="extend" value="" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
+					</div>
+					<p class="help"><?= _i('help') ?> <?= _t('sub.feed.proxy_help') ?></p>
 				</div>
-				<p class="help"><?= _i('help') ?> <?= _t('sub.feed.proxy_help') ?></p>
 			</div>
-		</div>
 
-		<?php if (FreshRSS_Auth::hasAccess('admin')) { ?>
-		<div class="form-group">
-			<label class="group-name" for="timeout"><?= _t('sub.feed.timeout') ?></label>
-			<div class="group-controls">
-				<input type="number" name="timeout" id="timeout" min="3" max="120" value="" placeholder="<?= _t('gen.short.by_default') ?>" />
+			<?php if (FreshRSS_Auth::hasAccess('admin')) { ?>
+			<div class="form-group">
+				<label class="group-name" for="timeout"><?= _t('sub.feed.timeout') ?></label>
+				<div class="group-controls">
+					<input type="number" name="timeout" id="timeout" min="3" max="120" value="" placeholder="<?= _t('gen.short.by_default') ?>" />
+				</div>
 			</div>
-		</div>
 
-		<div class="form-group">
-			<label class="group-name" for="ssl_verify"><?= _t('sub.feed.ssl_verify') ?></label>
-			<div class="group-controls">
-				<label class="checkbox" for="ssl_verify">
-					<select name="ssl_verify" id="ssl_verify">
-						<option value=""><?= _t('gen.short.by_default') ?></option>
-						<option value="0"><?= _t('gen.short.no') ?></option>
-						<option value="1"><?= _t('gen.short.yes') ?></option>
-					</select>
-				</label>
+			<div class="form-group">
+				<label class="group-name" for="ssl_verify"><?= _t('sub.feed.ssl_verify') ?></label>
+				<div class="group-controls">
+					<label class="checkbox" for="ssl_verify">
+						<select name="ssl_verify" id="ssl_verify">
+							<option value=""><?= _t('gen.short.by_default') ?></option>
+							<option value="0"><?= _t('gen.short.no') ?></option>
+							<option value="1"><?= _t('gen.short.yes') ?></option>
+						</select>
+					</label>
+				</div>
 			</div>
-		</div>
-		<?php } ?>
+			<?php } ?>
+		</details>
 
 		<div class="form-group form-actions">
 			<div class="group-controls">
diff --git a/cli/i18n/ignore/en-us.php b/cli/i18n/ignore/en-us.php
index 7529d7d2d..2365bd17e 100644
--- a/cli/i18n/ignore/en-us.php
+++ b/cli/i18n/ignore/en-us.php
@@ -707,7 +707,6 @@ return array(
 	'sub.feed.add',
 	'sub.feed.advanced',
 	'sub.feed.archiving',
-	'sub.feed.auth.configuration',
 	'sub.feed.auth.help',
 	'sub.feed.auth.http',
 	'sub.feed.auth.password',
diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css
index 642d61adb..3dfb8760a 100644
--- a/p/themes/Alternative-Dark/adark.rtl.css
+++ b/p/themes/Alternative-Dark/adark.rtl.css
@@ -671,6 +671,10 @@ a.btn {
 	text-align: center;
 }
 
+.prompt label {
+	text-align: right;
+}
+
 .prompt form {
 	margin-top: 2rem;
 	margin-bottom: 3rem;
@@ -1001,7 +1005,7 @@ a.btn {
 /*=== Slider */
 #slider {
 	background: #171717;
-	border-left: 1px solid #333;
+	border-right: 1px solid #333;
 }
 
 /*=== SLIDESHOW */
diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css
index bd71669c0..fc5d9ce70 100644
--- a/p/themes/Ansum/ansum.rtl.css
+++ b/p/themes/Ansum/ansum.rtl.css
@@ -1099,7 +1099,6 @@ form th {
 .content code, .content.thin code {
 	padding: 2px 5px;
 	background: #fcfaf8;
-	color: #f5f0ec;
 	border: 1px solid #f5f0ec;
 	border-radius: 3px;
 }
diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css
index 8c8c5619e..23aa1dad2 100644
--- a/p/themes/BlueLagoon/BlueLagoon.rtl.css
+++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css
@@ -15,14 +15,6 @@ a, button.as-link {
 	outline: none;
 }
 
-/*=== Forms */
-.form-group {
-	display: inline-block;
-	float: right;
-	width: 100%;
-	height: auto;
-}
-
 legend {
 	margin: 20px 0 5px;
 	padding: 5px 0;
@@ -786,6 +778,10 @@ a.btn {
 	text-align: right;
 }
 
+.prompt label {
+	text-align: right;
+}
+
 .prompt .form-group {
 	margin-bottom: 1rem;
 }
diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css
index 44e793ee9..f78ee0574 100644
--- a/p/themes/Mapco/mapco.rtl.css
+++ b/p/themes/Mapco/mapco.rtl.css
@@ -1105,7 +1105,6 @@ form th {
 .content code, .content.thin code {
 	padding: 2px 5px;
 	background: #f9fafb;
-	color: #eff0f2;
 	border: 1px solid #eff0f2;
 	border-radius: 3px;
 }
diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css
index 00c2a42d7..a129c8f36 100644
--- a/p/themes/Screwdriver/screwdriver.rtl.css
+++ b/p/themes/Screwdriver/screwdriver.rtl.css
@@ -15,14 +15,6 @@ a, button.as-link {
 	outline: none;
 }
 
-/*=== Forms */
-.form-group {
-	display: inline-block;
-	float: right;
-	width: 100%;
-	height: auto;
-}
-
 legend {
 	margin: 20px 0 5px;
 	padding: 5px 0;
@@ -766,6 +758,7 @@ a.btn {
 	padding-right: .5rem;
 	padding-left: .5rem;
 	text-align: center;
+	text-shadow: 0 1px rgba(255,255,255,0.08);
 }
 
 .prompt form {
@@ -793,7 +786,6 @@ a.btn {
 .prompt input {
 	width: 100%;
 	box-sizing: border-box;
-
 }
 
 .prompt input#username,.prompt input#passwordPlain {
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 3ed28d3c1..45e776c02 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -212,6 +212,15 @@ td.numeric {
 	display: block;
 }
 
+.form-advanced-title {
+	padding: 15px 0;
+	width: 200px;
+	font-size: 1.1em;
+	font-weight: bold;
+	text-align: right;
+	cursor: pointer;
+}
+
 @supports (position: sticky) {
 	#mark-read-aside {
 		position: sticky;
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index f0d7c7807..23ea28cdf 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -16,6 +16,7 @@ html, body {
 	margin: 0;
 	padding: 0;
 	background: white;
+	color: black;
 	font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", sans-serif;
 	font-size: 100%;
 }
@@ -211,6 +212,15 @@ td.numeric {
 	display: block;
 }
 
+.form-advanced-title {
+	padding: 15px 0;
+	width: 200px;
+	font-size: 1.1em;
+	font-weight: bold;
+	text-align: left;
+	cursor: pointer;
+}
+
 @supports (position: sticky) {
 	#mark-read-aside {
 		position: sticky;
@@ -719,7 +729,7 @@ input[type="search"] {
 }
 
 .flux .item.title .author {
-	padding-left: 1rem;
+	padding-right: 1rem;
 	color: #555;
 	font-size: .9rem;
 	font-weight: normal;
@@ -1295,6 +1305,7 @@ input:checked + .slide-container .properties {
 
 	.aside:target {
 		width: 90%;
+		height: 100vh;
 	}
 
 	.aside_feed .configure-feeds {