Enhance the way help elements are displayed (#2911)

* - Always display help under the targeted element.
- Use same help place for HTTP authentication in 'add' feed view than in 'update' feed view.
- Move help under input field in register view, as all other places (homogeneity).

* - Don't use "!important" as suggested by @Alkarex.

13 files changed, 31 insertions, 23 deletions

diff --git a/app/install.php b/app/install.php
index 957e7a1d6..ddb9d7eaa 100644
--- a/app/install.php
+++ b/app/install.php
@@ -621,7 +621,7 @@ function printStep3() {
 					<input type="password" id="passwordPlain" name="passwordPlain" pattern=".{7,}" autocomplete="off" <?= $auth_type === 'form' ? ' required="required"' : '' ?> tabindex="5" />
 					<a class="btn toggle-password" data-toggle="passwordPlain"><?= FreshRSS_Themes::icon('key') ?></a>
 				</div>
-				<?= _i('help') ?> <?= _t('install.auth.password_format') ?>
+				<p class="help"><?= _i('help') ?> <?= _t('install.auth.password_format') ?></p>
 				<noscript><b><?= _t('gen.js.should_be_activated') ?></b></noscript>
 			</div>
 		</div>
diff --git a/app/views/auth/register.phtml b/app/views/auth/register.phtml
index 10cffa0d1..3ee53356f 100644
--- a/app/views/auth/register.phtml
+++ b/app/views/auth/register.phtml
@@ -5,8 +5,9 @@
 		<input type="hidden" name="_csrf" value="<?= FreshRSS_Auth::csrfToken() ?>" />
 
 		<div class="form-group">
-			<label for="new_user_name"><?= _t('gen.auth.username'), '<br />', _i('help'), ' ', _t('gen.auth.username.format') ?></label>
+			<label for="new_user_name"><?= _t('gen.auth.username') ?></label>
 			<input id="new_user_name" name="new_user_name" type="text" size="16" required="required" autocomplete="off" pattern="<?= FreshRSS_user_Controller::USERNAME_PATTERN ?>" autocapitalize="off" />
+			<p class="help"><?= _i('help') ?> <?= _t('gen.auth.username.format') ?></p>
 		</div>
 
 		<?php if ($this->show_email_field) { ?>
@@ -19,12 +20,14 @@
 		<?php } ?>
 
 		<div class="form-group">
-			<label for="new_user_passwordPlain"><?= _t('gen.auth.password'), '<br />', _i('help'), ' ', _t('gen.auth.password.format') ?></label>
+			<label for="new_user_passwordPlain"><?= _t('gen.auth.password') ?></label>
 			<div class="stick">
 				<input type="password" id="new_user_passwordPlain" name="new_user_passwordPlain" required="required" autocomplete="new-password" pattern=".{7,}" />
 				<a class="btn toggle-password" data-toggle="new_user_passwordPlain"><?= _i('key') ?></a>
 			</div>
 			<noscript><b><?= _t('gen.js.should_be_activated') ?></b></noscript>
+			<p class="help"><?= _i('help') ?> <?= _t('gen.auth.password.format') ?></p>
+
 		</div>
 
 		<?php if ($this->show_tos_checkbox) { ?>
diff --git a/app/views/configure/archiving.phtml b/app/views/configure/archiving.phtml
index 7d76e4dcc..9c183f81f 100644
--- a/app/views/configure/archiving.phtml
+++ b/app/views/configure/archiving.phtml
@@ -6,7 +6,7 @@
 	<form method="post" action="<?= _url('configure', 'archiving') ?>">
 		<input type="hidden" name="_csrf" value="<?= FreshRSS_Auth::csrfToken() ?>" />
 		<legend><?= _t('conf.archiving') ?></legend>
-		<p><?= _i('help') ?> <?= _t('conf.archiving.help') ?></p>
+		<p class="help"><?= _i('help') ?> <?= _t('conf.archiving.help') ?></p>
 
 		<div class="form-group">
 			<label class="group-name" for="ttl_default"><?= _t('conf.archiving.ttl') ?></label>
@@ -132,7 +132,7 @@
 			<div class="group-controls">
 				<input type="hidden" name="optimiseDatabase" value="1" />
 				<button type="submit" class="btn btn-important"><?= _t('conf.archiving.optimize') ?></button>
-				<?= _i('help') ?> <?= _t('conf.archiving.optimize_help') ?>
+				<p class="help"><?= _i('help') ?> <?= _t('conf.archiving.optimize_help') ?></p>
 			</div>
 		</div>
 	</form>
diff --git a/app/views/configure/reading.phtml b/app/views/configure/reading.phtml
index cb74440a5..3cd0a718e 100644
--- a/app/views/configure/reading.phtml
+++ b/app/views/configure/reading.phtml
@@ -11,7 +11,7 @@
 			<label class="group-name" for="posts_per_page"><?= _t('conf.reading.articles_per_page') ?></label>
 			<div class="group-controls">
 				<input type="number" id="posts_per_page" name="posts_per_page" value="<?= FreshRSS_Context::$user_conf->posts_per_page ?>" min="5" max="500" data-leave-validation="<?= FreshRSS_Context::$user_conf->posts_per_page ?>"/>
-				<?= _i('help') ?> <?= _t('conf.reading.number_divided_when_reader') ?>
+				<p class="help"><?= _i('help') ?> <?= _t('conf.reading.number_divided_when_reader') ?></p>
 			</div>
 		</div>
 
diff --git a/app/views/configure/system.phtml b/app/views/configure/system.phtml
index 1a718e20f..75117ee1c 100644
--- a/app/views/configure/system.phtml
+++ b/app/views/configure/system.phtml
@@ -25,7 +25,7 @@
 			<label class="group-name" for="max-registrations"><?= _t('admin.system.registration.number') ?></label>
 			<div class="group-controls">
 				<input type="number" id="max-registrations" name="max-registrations" value="<?= FreshRSS_Context::$system_conf->limits['max_registrations'] ?>" min="0" data-leave-validation="<?= FreshRSS_Context::$system_conf->limits['max_registrations'] ?>"/>
-				<?= _i('help') ?> <?= _t('admin.system.registration.help') ?>
+				<p class="help"><?= _i('help') ?> <?= _t('admin.system.registration.help') ?></p>
 			</div>
 		</div>
 
@@ -74,7 +74,7 @@
 			<label class="group-name" for="cookie-duration"><?= _t('admin.system.cookie-duration.number') ?></label>
 			<div class="group-controls">
 				<input type="number" id="cookie-duration" name="cookie-duration" value="<?= FreshRSS_Context::$system_conf->limits['cookie_duration'] ?>" min="0" data-leave-validation="<?= FreshRSS_Context::$system_conf->limits['cookie_duration'] ?>"/>
-				<?= _i('help') ?> <?= _t('admin.system.cookie-duration.help') ?>
+				<p class="help"><?= _i('help') ?> <?= _t('admin.system.cookie-duration.help') ?></p>
 			</div>
 		</div>
 
diff --git a/app/views/feed/add.phtml b/app/views/feed/add.phtml
index 9cfe024fc..516ec9a8b 100644
--- a/app/views/feed/add.phtml
+++ b/app/views/feed/add.phtml
@@ -69,16 +69,13 @@
 			<label class="group-name" for="http_user"><?= _t('sub.feed.auth.username') ?></label>
 			<div class="group-controls">
 				<input type="text" name="http_user" id="http_user" class="extend" value="<?= empty($auth['username']) ? ' ' : $auth['username'] ?>" autocomplete="off" />
+				<p class="help"><?= _i('help') ?> <?= _t('sub.feed.auth.help') ?></p>
 			</div>
 
 			<label class="group-name" for="http_pass"><?= _t('sub.feed.auth.password') ?></label>
 			<div class="group-controls">
 				<input type="password" name="http_pass" id="http_pass" class="extend" value="<?= $auth['password'] ?>" autocomplete="new-password" />
 			</div>
-
-			<div class="group-controls">
-				<?= _i('help') ?> <?= _t('sub.feed.auth.help') ?>
-			</div>
 		</div>
 
 		<div class="form-group form-actions">
diff --git a/app/views/helpers/category/update.phtml b/app/views/helpers/category/update.phtml
index 9e55e613d..350a57287 100644
--- a/app/views/helpers/category/update.phtml
+++ b/app/views/helpers/category/update.phtml
@@ -21,7 +21,7 @@
 			<label class="group-name" for="position"><?= _t('sub.category.position') ?></label>
 			<div class="group-controls">
 				<input type="number" name="position" id="position" min="1" value="<?= $this->category->attributes('position') ?>" />
-				<?= _i('help') ?> <?= _t('sub.category.position_help') ?>
+				<p class="help"><?= _i('help') ?> <?= _t('sub.category.position_help') ?></p>
 			</div>
 		</div>
 
diff --git a/app/views/helpers/feed/update.phtml b/app/views/helpers/feed/update.phtml
index 0a3852e22..0cc98e2bc 100644
--- a/app/views/helpers/feed/update.phtml
+++ b/app/views/helpers/feed/update.phtml
@@ -254,7 +254,7 @@
 			<label class="group-name" for="http_user_feed<?= $this->feed->id() ?>"><?= _t('sub.feed.auth.username') ?></label>
 			<div class="group-controls">
 				<input type="text" name="http_user_feed<?= $this->feed->id() ?>" id="http_user_feed<?= $this->feed->id() ?>" class="extend" value="<?= empty($auth['username']) ? ' ' : $auth['username'] ?>" autocomplete="off" />
-				<?= _i('help') ?> <?= _t('sub.feed.auth.help') ?>
+				<p class="help"><?= _i('help') ?> <?= _t('sub.feed.auth.help') ?></p>
 			</div>
 
 			<label class="group-name" for="http_pass_feed<?= $this->feed->id() ?>"><?= _t('sub.feed.auth.password') ?></label>
@@ -278,7 +278,7 @@
 					<input type="text" name="path_entries" id="path_entries" class="extend" value="<?= $this->feed->pathEntries() ?>" placeholder="<?= _t('gen.short.blank_to_disable') ?>" />
 					<a id="popup-preview-selector" class="btn" href="<?= _url('feed', 'contentSelectorPreview', 'id', $this->feed->id(), 'selector', 'selector-token') ?>"><?= _i('look') ?></a>
 				</div>
-				<?= _i('help') ?> <?= _t('sub.feed.css_help') ?>
+				<p class="help"><?= _i('help') ?> <?= _t('sub.feed.css_help') ?></p>
 			</div>
 		</div>
 
@@ -347,7 +347,7 @@
 						echo htmlspecialchars($filterRead->getRawInput(), ENT_NOQUOTES, 'UTF-8'), PHP_EOL;
 					}
 				?></textarea>
-				<?= _i('help') ?> <?= _t('sub.feed.filteractions.help') ?>
+				<p class="help"><?= _i('help') ?> <?= _t('sub.feed.filteractions.help') ?></p>
 			</div>
 		</div>
 
@@ -364,13 +364,13 @@
 				<a class="btn btn-important" href="<?= _url('feed', 'clearCache', 'id', $this->feed->id()) ?>">
 					<?= _t('sub.feed.maintenance.clear_cache') ?>
 				</a>
-				<?= _i('help') ?> <?= _t('sub.feed.maintenance.clear_cache_help') ?>
+				<p class="help"><?= _i('help') ?> <?= _t('sub.feed.maintenance.clear_cache_help') ?></p>
 			</div>
 			<div class="group-controls">
 				<a class="btn btn-important" href="<?= _url('feed', 'reload', 'id', $this->feed->id()) ?>">
 					<?= _t('sub.feed.maintenance.reload_articles') ?>
 				</a>
-				<?= _i('help') ?> <?= _t('sub.feed.maintenance.reload_articles_help') ?>
+				<p class="help"><?= _i('help') ?> <?= _t('sub.feed.maintenance.reload_articles_help') ?></p>
 			</div>
 		</div>
 	</form>
diff --git a/app/views/user/details.phtml b/app/views/user/details.phtml
index e23e645ae..ee5e381fd 100644
--- a/app/views/user/details.phtml
+++ b/app/views/user/details.phtml
@@ -51,7 +51,7 @@
                     <input type="password" id="newPasswordPlain" name="newPasswordPlain" autocomplete="new-password" pattern=".{7,}" <?= cryptAvailable() ? '' : 'disabled="disabled" ' ?>/>
                     <a class="btn toggle-password" data-toggle="password-<?= $this->username; ?>"><?= _i('key') ?></a>
                 </div>
-                <?= _i('help'); ?> <?= _t('admin.user.password_format') ?>
+                <p class="help"><?= _i('help'); ?> <?= _t('admin.user.password_format') ?></p>
             </div>
         </div>
 
diff --git a/app/views/user/manage.phtml b/app/views/user/manage.phtml
index 6ab31e6c6..627d229d2 100644
--- a/app/views/user/manage.phtml
+++ b/app/views/user/manage.phtml
@@ -53,7 +53,7 @@
 					<input type="password" id="new_user_passwordPlain" name="new_user_passwordPlain" autocomplete="new-password" pattern=".{7,}" />
 					<a class="btn toggle-password" data-toggle="new_user_passwordPlain"><?= _i('key') ?></a>
 				</div>
-				<?= _i('help') ?> <?= _t('admin.user.password_format') ?>
+				<p class="help"><?= _i('help') ?> <?= _t('admin.user.password_format') ?></p>
 				<noscript><b><?= _t('gen.js.should_be_activated') ?></b></noscript>
 			</div>
 		</div>
diff --git a/app/views/user/profile.phtml b/app/views/user/profile.phtml
index 5357c2bfd..9e272b20a 100644
--- a/app/views/user/profile.phtml
+++ b/app/views/user/profile.phtml
@@ -43,7 +43,7 @@
 					<input type="password" id="newPasswordPlain" name="newPasswordPlain" autocomplete="new-password" pattern=".{7,}" <?= cryptAvailable() ? '' : 'disabled="disabled" ' ?>/>
 					<a class="btn toggle-password" data-toggle="newPasswordPlain"><?= _i('key') ?></a>
 				</div>
-				<?= _i('help') ?> <?= _t('conf.profile.password_format') ?>
+				<p class="help"><?= _i('help') ?> <?= _t('conf.profile.password_format') ?></p>
 				<noscript><b><?= _t('gen.js.should_be_activated') ?></b></noscript>
 			</div>
 		</div>
@@ -55,7 +55,7 @@
 			<div class="group-controls">
 				<input type="text" id="token" name="token" value="<?= $token ?>" placeholder="<?= _t('gen.short.blank_to_disable') ?>"<?php
 					echo FreshRSS_Auth::accessNeedsAction() ? '' : ' disabled="disabled"'; ?> data-leave-validation="<?= $token ?>"/>
-				<?= _i('help') ?> <?= _t('admin.auth.token_help') ?>
+				<p class="help"><?= _i('help') ?> <?= _t('admin.auth.token_help') ?></p>
 				<kbd><?= Minz_Url::display(array('a' => 'rss', 'params' => array('user' => Minz_Session::param('currentUser'), 'token' => $token, 'hours' => FreshRSS_Context::$user_conf->since_hours_posts_per_rss)), 'html', true) ?></kbd>
 			</div>
 		</div>
@@ -81,7 +81,7 @@
 						<input type="password" id="apiPasswordPlain" name="apiPasswordPlain" autocomplete="new-password" pattern=".{7,}" <?= cryptAvailable() ? '' : 'disabled="disabled" ' ?>/>
 						<a class="btn toggle-password" data-toggle="apiPasswordPlain"><?= _i('key') ?></a>
 					</div>
-					<?= _i('help') ?> <kbd><a href="../api/"><?= Minz_Url::display('/api/', 'html', true) ?></a></kbd>
+					<p class="help"><?= _i('help') ?> <kbd><a href="../api/"><?= Minz_Url::display('/api/', 'html', true) ?></a></kbd></p>
 				</div>
 			</div>
 
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 07927b88d..151a00910 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -59,6 +59,10 @@ p {
 	font-size: 1em;
 }
 
+p.help, .prompt p.help {
+	margin: 5px 0 0.5em;
+}
+
 sup {
 	line-height: 25px;
 	position: relative;
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index d5eb11426..638aea6b9 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -59,6 +59,10 @@ p {
 	font-size: 1em;
 }
 
+p.help, .prompt p.help {
+	margin: 5px 0 0.5em;
+}
+
 sup {
 	line-height: 25px;
 	position: relative;