Install routine freshup (#3721)

* navigation: disable next steps

* change icon to full icon (incl. text)

* navigation is a ordered list

* set mouse title on each navigation item

* navigation: next steps in grey italc

app/install.php

@@ -655,7 +655,7 @@ if (_t('gen.dir') === 'rtl') {
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="initial-scale=1.0" />
 		<script id="jsonVars" type="application/json">{}</script>
-		<title><?= _t('install.title') ?></title>
+		<title><?= _t('install.title') ?>: <?= _t('install.step', STEP+1) ?></title>
 		<link rel="stylesheet" href="../themes/base-theme/template.css?<?= @filemtime(PUBLIC_PATH . '/themes/base-theme/template.css') ?>" />
 		<link rel="stylesheet" href="../themes/Origine/origine.css?<?= @filemtime(PUBLIC_PATH . '/themes/Origine/origine.css') ?>" />
 		<meta name="robots" content="noindex,nofollow" />
@@ -664,24 +664,54 @@ if (_t('gen.dir') === 'rtl') {
 
 <header class="header">
 	<div class="item title">
-		<h1><a href="index.php"><?= _t('install.title') ?></a></h1>
-		<h2><?= _t('install.step', STEP) ?></h2>
+		<div id="logo-wrapper">
+			<a href="./">
+				<img class="logo" src="../themes/icons/FreshRSS-logo.svg" alt="">
+			</a>
+		</div>
 	</div>
 </header>
 
 <main id="global">
 	<nav class="nav nav-list aside">
-		<ul>
-			<li class="nav-header"><?= _t('install.steps') ?></li>
-			<li class="item<?= STEP == 0 ? ' active' : '' ?>"><a href="?step=0"><?= _t('install.language') ?></a></li>
-			<li class="item<?= STEP == 1 ? ' active' : '' ?>"><a href="?step=1"><?= _t('install.check') ?></a></li>
-			<li class="item<?= STEP == 2 ? ' active' : '' ?>"><a href="?step=2"><?= _t('install.bdd.conf') ?></a></li>
-			<li class="item<?= STEP == 3 ? ' active' : '' ?>"><a href="?step=3"><?= _t('install.conf') ?></a></li>
-			<li class="item<?= STEP == 4 ? ' active' : '' ?>"><a href="?step=4"><?= _t('install.this_is_the_end') ?></a></li>
-		</ul>
+		<div class="nav-header"><?= _t('install.steps') ?></div>
+		<ol>
+			<li class="item<?= STEP == 0 ? ' active' : '' ?>">
+				<a href="?step=0" title="<?= _t('install.step', 0) ?>: <?= _t('install.language') ?>"><?= _t('install.language') ?></a>
+			</li>
+			<li class="item<?= STEP == 1 ? ' active' : '' ?>">
+				<?php if (STEP > 0) {?>
+				<a href="?step=1" title="<?= _t('install.step', 1) ?>: <?= _t('install.check') ?>"><?= _t('install.check') ?></a>
+				<?php } else { ?>
+				<span><?= _t('install.check') ?></span>
+				<?php } ?>
+			</li>
+			<li class="item<?= STEP == 2 ? ' active' : '' ?>">
+				<?php if (STEP > 1) {?>
+				<a href="?step=2" title="<?= _t('install.step', 2) ?>: <?= _t('install.bdd.conf') ?>"><?= _t('install.bdd.conf') ?></a>
+				<?php } else { ?>
+				<span><?= _t('install.bdd.conf') ?></span>
+				<?php } ?>
+			</li>
+			<li class="item<?= STEP == 3 ? ' active' : '' ?>">
+				<?php if (STEP > 2) {?>
+				<a href="?step=3" title="<?= _t('install.step', 3) ?>: <?= _t('install.conf') ?>"><?= _t('install.conf') ?></a>
+				<?php } else { ?>
+				<span><?= _t('install.conf') ?></span>
+				<?php } ?>
+			</li>
+			<li class="item<?= STEP == 4 ? ' active' : '' ?>">
+				<?php if (STEP > 3) {?>
+				<a href="?step=4" title="<?= _t('install.step', 4) ?>: <?= _t('install.this_is_the_end') ?>"><?= _t('install.this_is_the_end') ?></a>
+				<?php } else { ?>
+				<span><?= _t('install.this_is_the_end') ?></span>
+				<?php } ?>
+			</li>
+		</ol>
 	</nav>
 
 	<div class="post">
+		<h1><?= _t('install.title') ?>: <?= _t('install.step', STEP+1) ?></h1>
 		<?php
 		switch (STEP) {
 		case 0:

p/themes/Origine/origine.css

@@ -266,10 +266,16 @@ a.btn {
 	text-align: center;
 }
 
-.nav-list .item > a {
+.nav-list .item > a,
+.nav-list .item > span {
 	padding: 0 10px;
 }
 
+.nav-list .item > span {
+	font-style: italic;
+	color: #888888;
+}
+
 .nav-list a:hover {
 	text-decoration: none;
 }

p/themes/Origine/origine.rtl.css

@@ -266,10 +266,16 @@ a.btn {
 	text-align: center;
 }
 
-.nav-list .item > a {
+.nav-list .item > a,
+.nav-list .item > span {
 	padding: 0 10px;
 }
 
+.nav-list .item > span {
+	font-style: italic;
+	color: #888888;
+}
+
 .nav-list a:hover {
 	text-decoration: none;
 }

p/themes/base-theme/template.css

@@ -266,7 +266,8 @@ a.btn {
 }
 
 .nav-list .item,
-.nav-list .item > a {
+.nav-list .item > a,
+.nav-list .item > span {
 	display: block;
 	overflow: hidden;
 	white-space: nowrap;
@@ -596,7 +597,6 @@ a.btn {
 
 .header > .item.title .logo {
 	display: inline-block;
-	width: 32px;
 	height: 32px;
 	vertical-align: middle;
 }

p/themes/base-theme/template.rtl.css

@@ -266,7 +266,8 @@ a.btn {
 }
 
 .nav-list .item,
-.nav-list .item > a {
+.nav-list .item > a,
+.nav-list .item > span {
 	display: block;
 	overflow: hidden;
 	white-space: nowrap;
@@ -596,7 +597,6 @@ a.btn {
 
 .header > .item.title .logo {
 	display: inline-block;
-	width: 32px;
 	height: 32px;
 	vertical-align: middle;
 }

p/themes/icons/FreshRSS-logo.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 256"
+	xmlns:xlink="http://www.w3.org/1999/xlink">
+	<title>Logo FreshRSS</title>
+	<circle fill="#0062BE" cx="128" cy="128" r="33"/>
+	<g fill="none" stroke="#0062BE" stroke-width="24">
+		<g stroke-opacity="0.3">
+			<path d="M12,128 A116,116 0 1,1 128,244"/>
+			<path d="M54,128 A74,74 0 1,1 128,202"/>
+		</g>
+		<path d="M128,12 A116,116 0 0,1 244,128"/>
+		<path d="M128,54 A74,74 0 0,1 202,128"/>
+	</g>
+	<g fill="#0062bd" stroke-width="0" font-family="'Open Sans'" font-weight="600" font-size="213">
+		<desc>FreshRSS</desc>
+		<path d="m 353.72168,206 -24.64893,0 0,-152.053711 85.80323,0 0,21.008789 -61.1543,0 0,47.529782 57.30615,0 0,21.1128 -57.30615,0 0,62.40234 z" />
+		<path d="m 498.39111,88.891602 q 7.38428,0 12.16846,1.040039 l -2.39209,22.776859 q -5.20019,-1.24805 -10.81641,-1.24805 -14.66455,0 -23.81689,9.56836 -9.04834,9.56836 -9.04834,24.85693 l 0,60.11426 -24.44092,0 0,-115.02832 19.13672,0 3.22412,20.28076 1.24805,0 q 5.72021,-10.29639 14.87256,-16.328612 9.25634,-6.032226 19.86474,-6.032226 z" />
+		<path d="m 582.21826,208.08008 q -26.83301,0 -42.01758,-15.60059 -15.08056,-15.70459 -15.08056,-43.16162 0,-28.18506 14.04052,-44.30566 14.04053,-16.120608 38.58545,-16.120608 22.77686,0 35.98536,13.832518 13.20849,13.83252 13.20849,38.06543 l 0,13.2085 -76.65088,0 q 0.52002,16.74463 9.04834,25.79297 8.52832,8.94433 24.0249,8.94433 10.19239,0 18.92872,-1.87207 8.84033,-1.97607 18.92871,-6.44824 l 0,19.86475 q -8.94434,4.26416 -18.09668,6.03222 -9.15235,1.76807 -20.90479,1.76807 z M 577.74609,107.4043 q -11.64843,0 -18.7207,7.38427 -6.96826,7.38428 -8.32031,21.52881 l 52.20996,0 q -0.20801,-14.24853 -6.86426,-21.52881 -6.65625,-7.38427 -18.30469,-7.38427 z" />
+		<path d="m 731.98389,173.23877 q 0,16.84863 -12.27246,25.89697 -12.27247,8.94434 -35.15332,8.94434 -22.98487,0 -36.92139,-6.96826 l 0,-21.1128 q 20.28076,9.36035 37.75342,9.36035 22.56884,0 22.56884,-13.62451 0,-4.36816 -2.49609,-7.28027 -2.49609,-2.91211 -8.21631,-6.03223 -5.72021,-3.12011 -15.9126,-7.07226 -19.86474,-7.69629 -26.93701,-15.39258 -6.96826,-7.69629 -6.96826,-19.96875 0,-14.76856 11.85645,-22.88086 11.96045,-8.216308 32.44921,-8.216308 20.28077,0 38.37745,8.216308 l -7.9043,18.40869 q -18.6167,-7.69629 -31.30518,-7.69629 -19.34472,0 -19.34472,11.02442 0,5.4082 4.99218,9.15234 5.0962,3.74414 22.04883,10.29639 14.24854,5.5122 20.69678,10.08838 6.44824,4.57617 9.56836,10.60839 3.12012,5.92823 3.12012,14.24854 z" />
+		<path d="m 859.49268,206 -24.54493,0 0,-70.72266 q 0,-13.3125 -5.4082,-19.86474 -5.3042,-6.55225 -16.95264,-6.55225 -15.39257,0 -22.67285,9.25635 -7.17627,9.15234 -7.17627,30.78516 l 0,57.09814 -24.44092,0 0,-161.830078 24.44092,0 0,41.081543 q 0,9.880371 -1.24804,21.112795 l 1.56005,0 q 4.99219,-8.320315 13.83252,-12.896487 8.94434,-4.576171 20.80079,-4.576171 41.80957,0 41.80957,42.121578 l 0,74.98682 z" />
+		<path d="m 920.95898,124.66895 17.26465,0 q 17.36866,0 25.16895,-6.44825 7.80029,-6.44824 7.80029,-19.136716 0,-12.896484 -8.42432,-18.512695 -8.42431,-5.616211 -25.37695,-5.616211 l -16.43262,0 0,49.713872 z m 0,20.59277 0,60.73828 -24.85693,0 0,-152.053711 42.95361,0 q 29.43311,0 43.57764,11.024414 14.14453,11.024414 14.14453,33.28125 0,28.393067 -29.53711,40.457517 L 1010.1943,206 l -28.28903,0 -36.40136,-60.73828 -24.54493,0 z" />
+		<path d="m 1119.8145,164.71045 q 0,20.28076 -14.6646,31.82519 -14.6645,11.54444 -40.4575,11.54444 -25.793,0 -42.2256,-8.0083 l 0,-23.50489 q 10.4004,4.88819 22.0488,7.69629 11.7525,2.80811 21.8408,2.80811 14.7686,0 21.7369,-5.61621 7.0722,-5.61621 7.0722,-15.08057 0,-8.52832 -6.4482,-14.45654 -6.4483,-5.92822 -26.625,-14.04053 -20.8008,-8.42432 -29.3291,-19.24072 -8.5283,-10.81641 -8.5283,-26.000978 0,-19.032715 13.5205,-29.953125 13.5205,-10.92041 36.2973,-10.92041 21.8409,0 43.4737,9.568359 l -7.9043,20.280762 q -20.2808,-8.52832 -36.1934,-8.52832 -12.0644,0 -18.3047,5.304199 -6.2402,5.200195 -6.2402,13.83252 0,5.928222 2.4961,10.192383 2.4961,4.16016 8.2163,7.9043 5.7202,3.74414 20.5928,9.88037 16.7446,6.96826 24.5449,13.00049 7.8003,6.03222 11.4404,13.62451 3.6402,7.59228 3.6402,17.88867 z" />
+		<path d="m 1237.1309,164.71045 q 0,20.28076 -14.6646,31.82519 -14.6645,11.54444 -40.4575,11.54444 -25.793,0 -42.2256,-8.0083 l 0,-23.50489 q 10.4004,4.88819 22.0488,7.69629 11.7525,2.80811 21.8409,2.80811 14.7685,0 21.7368,-5.61621 7.0722,-5.61621 7.0722,-15.08057 0,-8.52832 -6.4482,-14.45654 -6.4483,-5.92822 -26.625,-14.04053 -20.8008,-8.42432 -29.3291,-19.24072 -8.5283,-10.81641 -8.5283,-26.000978 0,-19.032715 13.5205,-29.953125 13.5205,-10.92041 36.2973,-10.92041 21.8409,0 43.4737,9.568359 l -7.9043,20.280762 q -20.2808,-8.52832 -36.1934,-8.52832 -12.0644,0 -18.3047,5.304199 -6.2402,5.200195 -6.2402,13.83252 0,5.928222 2.4961,10.192383 2.4961,4.16016 8.2163,7.9043 5.7202,3.74414 20.5928,9.88037 16.7446,6.96826 24.5449,13.00049 7.8003,6.03222 11.4404,13.62451 3.6402,7.59228 3.6402,17.88867 z" />
+	</g>
+</svg>
+