Improve UI/UX install process (#5147)

* less buttons on step 1

* add form-group

* jump to next step as link not as button

* improve navigation bar HTML structure

* sync password-show button with extra.js

* fix CSS

* i18n: step 4: split text strings for help text (max chars default user)

* show menu button if mobile view

* improve header layout with empty div

* step 5: button in form-actions

* improve buttons in goup-controls

* Favicon added

* Button: Font color  hover btn-attention

* install check step: add subtitles

* fix .btn

* improve tabindex

* improve showPW_this()

21 files changed, 84 insertions, 21 deletions

diff --git a/app/i18n/cz/install.php b/app/i18n/cz/install.php
index 4e553c20c..0f8909cba 100644
--- a/app/i18n/cz/install.php
+++ b/app/i18n/cz/install.php
@@ -110,7 +110,10 @@ return array(
 		'ok' => 'Obecná nastavení byla uložena.',
 	),
 	'congratulations' => 'Gratulujeme!',
-	'default_user' => 'Uživatelské jméno výchozího uživatele <small>(maximálně 16 alfanumerických znaků)</small>',
+	'default_user' => array(
+		'_' => 'Uživatelské jméno výchozího uživatele',
+		'max_char' => 'maximálně 16 alfanumerických znaků',
+	),
 	'fix_errors_before' => 'Opravte prosím všechny chyby před přechodem na další krok.',
 	'javascript_is_better' => 'Práce s FreshRSS je příjemnější se zapnutým JavaScript',
 	'js' => array(
diff --git a/app/i18n/de/install.php b/app/i18n/de/install.php
index dfc1c8b9b..4a13379e4 100644
--- a/app/i18n/de/install.php
+++ b/app/i18n/de/install.php
@@ -110,7 +110,10 @@ return array(
 		'ok' => 'Die allgemeine Konfiguration ist gespeichert worden.',
 	),
 	'congratulations' => 'Glückwunsch!',
-	'default_user' => 'Benutzername des Standardbenutzers <small>(maximal 16 alphanumerische Zeichen)</small>',
+	'default_user' => array(
+		'_' => 'Benutzername des Standardbenutzers',
+		'max_char' => 'maximal 16 alphanumerische Zeichen',
+	),
 	'fix_errors_before' => 'Bitte den Fehler korrigieren, bevor zum nächsten Schritt gesprungen wird.',
 	'javascript_is_better' => 'FreshRSS ist ansprechender mit aktiviertem JavaScript',
 	'js' => array(
diff --git a/app/i18n/el/install.php b/app/i18n/el/install.php
index 1b6886dba..b306db7ec 100644
--- a/app/i18n/el/install.php
+++ b/app/i18n/el/install.php
@@ -110,7 +110,10 @@ return array(
 		'ok' => 'Οι γενικές ρυθμίσεις αποθηκεύτηκαν.',
 	),
 	'congratulations' => 'Συγχαρητήρια!',
-	'default_user' => 'Όνομα χρήστη για τον προεπιλεγμένο χρήστη <small>(μέγιστο 16 αλφαριθμητικοί χαρακτήρες)</small>',
+	'default_user' => array(
+		'_' => 'Όνομα χρήστη για τον προεπιλεγμένο χρήστη',
+		'max_char' => 'μέγιστο 16 αλφαριθμητικοί χαρακτήρες',
+	),
 	'fix_errors_before' => 'Παρακαλούμε διορθώστε τα σφάλματα πριν συνεχίσετε στο επόμενο βήμα.',
 	'javascript_is_better' => 'Το FreshRSS είναι πιο ευχάριστο με ενεργοποιημένη την JavaScript',
 	'js' => array(
diff --git a/app/i18n/en-us/install.php b/app/i18n/en-us/install.php
index 7b10d9d6d..c742c0014 100644
--- a/app/i18n/en-us/install.php
+++ b/app/i18n/en-us/install.php
@@ -110,7 +110,10 @@ return array(
 		'ok' => 'General configuration has been saved.',	// IGNORE
 	),
 	'congratulations' => 'Congratulations!',	// IGNORE
-	'default_user' => 'Username of the default user <small>(maximum 16 alphanumeric characters)</small>',	// IGNORE
+	'default_user' => array(
+		'_' => 'Username of the default user',	// IGNORE
+		'max_char' => 'maximum 16 alphanumeric characters',	// IGNORE
+	),
 	'fix_errors_before' => 'Please fix errors before continuing to the next step.',	// IGNORE
 	'javascript_is_better' => 'FreshRSS is more pleasant with JavaScript enabled',	// IGNORE
 	'js' => array(
diff --git a/app/i18n/en/install.php b/app/i18n/en/install.php
index b2c55e2dd..5f2fea507 100644
--- a/app/i18n/en/install.php
+++ b/app/i18n/en/install.php
@@ -110,7 +110,10 @@ return array(
 		'ok' => 'General configuration has been saved.',
 	),
 	'congratulations' => 'Congratulations!',
-	'default_user' => 'Username of the default user <small>(maximum 16 alphanumeric characters)</small>',
+	'default_user' => array(
+		'_' => 'Username of the default user',
+		'max_char' => 'maximum 16 alphanumeric characters',
+	),
 	'fix_errors_before' => 'Please fix errors before continuing to the next step.',
 	'javascript_is_better' => 'FreshRSS is more pleasant with JavaScript enabled',
 	'js' => array(
diff --git a/app/i18n/es/install.php b/app/i18n/es/install.php
index 3c46d6e58..97e4e6f29 100644
--- a/app/i18n/es/install.php
+++ b/app/i18n/es/install.php
@@ -110,7 +110,10 @@ return array(
 		'ok' => 'La configuración general se ha guardado.',
 	),
 	'congratulations' => '¡Enhorabuena!',
-	'default_user' => 'Nombre de usuario para el usuario por defecto <small>(máximo de 16 caracteres alfanuméricos)</small>',
+	'default_user' => array(
+		'_' => 'Nombre de usuario para el usuario por defecto',
+		'max_char' => 'máximo de 16 caracteres alfanuméricos',
+	),
 	'fix_errors_before' => 'Por favor, soluciona los errores detectados antes de proceder con el siguiente paso.',
 	'javascript_is_better' => 'FreshRSS funciona mejor con JavaScript activado',
 	'js' => array(
diff --git a/app/i18n/fr/install.php b/app/i18n/fr/install.php
index d27fa6049..813c93db4 100644
--- a/app/i18n/fr/install.php
+++ b/app/i18n/fr/install.php
@@ -110,7 +110,10 @@ return array(
 		'ok' => 'La configuration générale a été enregistrée.',
 	),
 	'congratulations' => 'Félicitations !',
-	'default_user' => 'Nom de l’utilisateur par défaut <small>(16 caractères alphanumériques maximum)</small>',
+	'default_user' => array(
+		'_' => 'Nom de l’utilisateur par défaut',
+		'max_char' => '16 caractères alphanumériques maximum',
+	),
 	'fix_errors_before' => 'Veuillez corriger les erreurs avant de passer à l’étape suivante.',
 	'javascript_is_better' => 'FreshRSS est plus agréable à utiliser avec JavaScript activé',
 	'js' => array(
diff --git a/app/i18n/he/install.php b/app/i18n/he/install.php
index 782f926cc..b0b5c6c4f 100644
--- a/app/i18n/he/install.php
+++ b/app/i18n/he/install.php
@@ -110,7 +110,10 @@ return array(
 		'ok' => 'ההגדרות הכלליות נשמרו.',
 	),
 	'congratulations' => 'מזל טוב!',
-	'default_user' => 'שם המשתמש של משתמש ברירת המחדל <small>(לכל היותר 16 תווים אלפאנומריים)</small>',
+	'default_user' => array(
+		'_' => 'שם המשתמש של משתמש ברירת המחדל',
+		'max_char' => 'לכל היותר 16 תווים אלפאנומריים',
+	),
 	'fix_errors_before' => 'יש לתקן את השגיאות לפני המעבר לשלב הבא.',
 	'javascript_is_better' => 'FreshRSS מעדיף שתאפשרו JavaScript',
 	'js' => array(
diff --git a/app/i18n/id/install.php b/app/i18n/id/install.php
index d64384cfc..e8373d63e 100644
--- a/app/i18n/id/install.php
+++ b/app/i18n/id/install.php
@@ -110,7 +110,10 @@ return array(
 		'ok' => 'General configuration has been saved.',	// TODO
 	),
 	'congratulations' => 'Congratulations!',	// TODO
-	'default_user' => 'Username of the default user <small>(maximum 16 alphanumeric characters)</small>',	// TODO
+	'default_user' => array(
+		'_' => 'Username of the default user',	// TODO
+		'max_char' => 'maximum 16 alphanumeric characters',	// TODO
+	),
 	'fix_errors_before' => 'Please fix errors before continuing to the next step.',	// TODO
 	'javascript_is_better' => 'FreshRSS is more pleasant with JavaScript enabled',	// TODO
 	'js' => array(
diff --git a/app/i18n/it/install.php b/app/i18n/it/install.php
index 690e26b42..2e386c0d8 100644
--- a/app/i18n/it/install.php
+++ b/app/i18n/it/install.php
@@ -110,7 +110,10 @@ return array(
 		'ok' => 'Configurazioni generali salvate.',
 	),
 	'congratulations' => 'Congratulazione!',
-	'default_user' => 'Username utente predefinito <small>(massimo 16 caratteri alfanumerici)</small>',
+	'default_user' => array(
+		'_' => 'Username utente predefinito',
+		'max_char' => 'massimo 16 caratteri alfanumerici',
+	),
 	'fix_errors_before' => 'Per favore correggi gli errori prima di passare al passaggio successivo.',
 	'javascript_is_better' => 'FreshRSS funziona meglio con JavaScript abilitato',
 	'js' => array(
diff --git a/app/i18n/ja/install.php b/app/i18n/ja/install.php
index ff98d730d..cef3147be 100644
--- a/app/i18n/ja/install.php
+++ b/app/i18n/ja/install.php
@@ -110,7 +110,10 @@ return array(
 		'ok' => '一般設定は保存されました。',
 	),
 	'congratulations' => 'おめでとうございます!',
-	'default_user' => 'デフォルトのユーザー名 <small>(最大16文字の英数字)</small>',
+	'default_user' => array(
+		'_' => 'デフォルトのユーザー名',
+		'max_char' => '最大16文字の英数字',
+	),
 	'fix_errors_before' => 'エラーを次のステップへ移る前に修正してください。',
 	'javascript_is_better' => 'FreshRSS はJavascriptが有効だとより快適にご利用いただけます。',
 	'js' => array(
diff --git a/app/i18n/ko/install.php b/app/i18n/ko/install.php
index 95e328951..8fe7c951b 100644
--- a/app/i18n/ko/install.php
+++ b/app/i18n/ko/install.php
@@ -110,7 +110,10 @@ return array(
 		'ok' => '일반 설정이 저장되었습니다.',
 	),
 	'congratulations' => '축하합니다!',
-	'default_user' => '기본 사용자 이름<small>(알파벳과 숫자를 포함할 수 있고 최대 16 글자)</small>',
+	'default_user' => array(
+		'_' => '기본 사용자 이름',
+		'max_char' => '알파벳과 숫자를 포함할 수 있고 최대 16 글자',
+	),
 	'fix_errors_before' => '다음 단계로 가기 전에 문제를 해결하세요.',
 	'javascript_is_better' => 'FreshRSS는 자바스크립트를 사용할 때 더욱 쾌적하고 강력합니다',
 	'js' => array(
diff --git a/app/i18n/nl/install.php b/app/i18n/nl/install.php
index 0dcc0f2a5..6fb3beafa 100644
--- a/app/i18n/nl/install.php
+++ b/app/i18n/nl/install.php
@@ -110,7 +110,10 @@ return array(
 		'ok' => 'Algemene configuratie is opgeslagen.',
 	),
 	'congratulations' => 'Gefeliciteerd!',
-	'default_user' => 'Gebruikersnaam van de standaardgebruiker <small>(maximaal 16 alfanumerieke tekens)</small>',
+	'default_user' => array(
+		'_' => 'Gebruikersnaam van de standaardgebruiker',
+		'max_char' => 'maximaal 16 alfanumerieke tekens',
+	),
 	'fix_errors_before' => 'Repareer fouten alvorens U naar de volgende stap gaat.',
 	'javascript_is_better' => 'FreshRSS werkt beter JavaScript ingeschakeld',
 	'js' => array(
diff --git a/app/i18n/oc/install.php b/app/i18n/oc/install.php
index f7d6636b8..87a14ef8b 100644
--- a/app/i18n/oc/install.php
+++ b/app/i18n/oc/install.php
@@ -110,7 +110,10 @@ return array(
 		'ok' => 'La configuracion generala es enregistrada.',
 	),
 	'congratulations' => 'Òsca !',
-	'default_user' => 'Nom d’utilizaire per defaut <small>16 caractèrs alfanumerics maximum)</small>',
+	'default_user' => array(
+		'_' => 'Nom d’utilizaire per defaut',
+		'max_char' => '16 caractèrs alfanumerics maximum',
+	),
 	'fix_errors_before' => 'Mercés de corregir las errors seguentas abans de contunhar.',
 	'javascript_is_better' => 'FreshRSS es mai agradable amb lo JavaScript activat',
 	'js' => array(
diff --git a/app/i18n/pl/install.php b/app/i18n/pl/install.php
index bc6ad1778..60e7c3fa3 100644
--- a/app/i18n/pl/install.php
+++ b/app/i18n/pl/install.php
@@ -110,7 +110,10 @@ return array(
 		'ok' => 'General configuration has been saved.',	// TODO
 	),
 	'congratulations' => 'Congratulations!',	// TODO
-	'default_user' => 'Username of the default user <small>(maximum 16 alphanumeric characters)</small>',	// TODO
+	'default_user' => array(
+		'_' => 'Username of the default user',	// TODO
+		'max_char' => 'maximum 16 alphanumeric characters',	// TODO
+	),
 	'fix_errors_before' => 'Please fix errors before continuing to the next step.',	// TODO
 	'javascript_is_better' => 'FreshRSS is more pleasant with JavaScript enabled',	// TODO
 	'js' => array(
diff --git a/app/i18n/pt-br/install.php b/app/i18n/pt-br/install.php
index c7e856495..f4f82f018 100644
--- a/app/i18n/pt-br/install.php
+++ b/app/i18n/pt-br/install.php
@@ -110,7 +110,10 @@ return array(
 		'ok' => 'Configurações gerais foram salvas.',
 	),
 	'congratulations' => 'Parabéns!',
-	'default_user' => 'Usuário do usuário padrão <small>(máximo de 16 caracteres alfanuméricos)</small>',
+	'default_user' => array(
+		'_' => 'Usuário do usuário padrão',
+		'max_char' => 'máximo de 16 caracteres alfanuméricos',
+	),
 	'fix_errors_before' => 'Por favor solucione os erros antes de ir para o próximo passo.',
 	'javascript_is_better' => 'O FreshRSS é mais agradável com o JavaScript ativo',
 	'js' => array(
diff --git a/app/i18n/ru/install.php b/app/i18n/ru/install.php
index b4d9ebedb..f6c3b8abe 100644
--- a/app/i18n/ru/install.php
+++ b/app/i18n/ru/install.php
@@ -110,7 +110,10 @@ return array(
 		'ok' => 'Общие настройки сохранены.',
 	),
 	'congratulations' => 'Поздравляем!',
-	'default_user' => 'Имя пользователя по умолчанию <small>(не более 16 буквенно-цифровых символов)</small>',
+	'default_user' => array(
+		'_' => 'Имя пользователя по умолчанию',
+		'max_char' => 'не более 16 буквенно-цифровых символов',
+	),
 	'fix_errors_before' => 'Пожалуйста, исправьте ошибки, прежде чем перейти к следующему шагу.',
 	'javascript_is_better' => 'Пользоваться FreshRSS приятнее с включённым JavaScript',
 	'js' => array(
diff --git a/app/i18n/sk/install.php b/app/i18n/sk/install.php
index f3f5e0dd9..e57d0b34f 100644
--- a/app/i18n/sk/install.php
+++ b/app/i18n/sk/install.php
@@ -110,7 +110,10 @@ return array(
 		'ok' => 'Hlavné nastavenia boli uložené.',
 	),
 	'congratulations' => 'Nastavenia!',
-	'default_user' => 'Hlavné používateľské meno <small>(najviac 16 alfanumerických znakov)</small>',
+	'default_user' => array(
+		'_' => 'Hlavné používateľské meno',
+		'max_char' => 'najviac 16 alfanumerických znakov',
+	),
 	'fix_errors_before' => 'Prosím, pred pokračovaním opravte chyby.',
 	'javascript_is_better' => 'FreshRSS si užijete viac, keď povolíte JavaScript',
 	'js' => array(
diff --git a/app/i18n/tr/install.php b/app/i18n/tr/install.php
index 1a5da48e8..d9f86abd9 100644
--- a/app/i18n/tr/install.php
+++ b/app/i18n/tr/install.php
@@ -110,7 +110,10 @@ return array(
 		'ok' => 'Genel yapılandırma ayarları kayıt edildi.',
 	),
 	'congratulations' => 'Tebrikler!',
-	'default_user' => 'Öntanımlı kullanıcı adı <small>(en fazla 16 alfanümerik karakter)</small>',
+	'default_user' => array(
+		'_' => 'Öntanımlı kullanıcı adı',
+		'max_char' => 'en fazla 16 alfanümerik karakter',
+	),
 	'fix_errors_before' => 'Lütfen sonraki adıma geçmek için hataları düzeltin.',
 	'javascript_is_better' => 'FreshRSS JavaScript ile daha işlevseldir',
 	'js' => array(
diff --git a/app/i18n/zh-cn/install.php b/app/i18n/zh-cn/install.php
index 1d9d61e38..f3672c0bc 100644
--- a/app/i18n/zh-cn/install.php
+++ b/app/i18n/zh-cn/install.php
@@ -110,7 +110,10 @@ return array(
 		'ok' => '常规配置已保存',
 	),
 	'congratulations' => '恭喜！',
-	'default_user' => '默认用户名 <small>(最多 16 个数字或字母)</small>',
+	'default_user' => array(
+		'_' => '默认用户名',
+		'max_char' => '最多 16 个数字或字母',
+	),
 	'fix_errors_before' => '请在继续下一步前修复错误',
 	'javascript_is_better' => '启用 JavaScript 会使 FreshRSS 工作得更好',
 	'js' => array(
diff --git a/app/i18n/zh-tw/install.php b/app/i18n/zh-tw/install.php
index 3ed45497e..9394b1a86 100644
--- a/app/i18n/zh-tw/install.php
+++ b/app/i18n/zh-tw/install.php
@@ -110,7 +110,10 @@ return array(
 		'ok' => '常規配置已保存',
 	),
 	'congratulations' => '恭喜！',
-	'default_user' => '默認用戶名 <small>(最多 16 個數字或字母)</small>',
+	'default_user' => array(
+		'_' => '默認用戶名',
+		'max_char' => '最多 16 個數字或字母',
+	),
 	'fix_errors_before' => '請在繼續下一步前修復錯誤',
 	'javascript_is_better' => '啟用 JavaScript 會使 FreshRSS 工作得更好',
 	'js' => array(