From mboxrd@z Thu Jan  1 00:00:00 1970
From: Peter =?utf-8?q?M=C3=BCller?= <peter.mueller@ipfire.org>
To: development@lists.ipfire.org
Subject: Re: [PATCH 2/2] pakfire.cgi: Improve HTML output and layout
Date: Tue, 28 Dec 2021 23:11:58 +0100
Message-ID: <0d7c91ef-ada1-008e-a7da-9ed8647b7be0@ipfire.org>
In-Reply-To: <20211227132137.1355-2-hofmann@leo-andres.de>
MIME-Version: 1.0
Content-Type: multipart/mixed; boundary="===============5471335002214964296=="
List-Id: <development.lists.ipfire.org>

--===============5471335002214964296==
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: quoted-printable

Acked-by: Peter M=C3=BCller <peter.mueller(a)ipfire.org>


> Add missing closing tags, indentation and CSS styling.
> Add link to reboot notice, left-align info list and resize packages
> lists for better readability.
>=20
> Signed-off-by: Leo-Andres Hofmann <hofmann(a)leo-andres.de>
> ---
>=20
> Hi all,
>=20
> this patch series implements everything that came up in the discussion so f=
ar and fixes a few HTML issues I found along the way.
> Because more changes are probably needed, I have not yet created a new patc=
hset. Instead, this patch builds on the first proposal.=20
>=20
> To test it, the following patches must therefore also be applied:
> https://patchwork.ipfire.org/patch/4842
> https://patchwork.ipfire.org/project/ipfire/list/?series=3D2452
>=20
> I hope this doesn't cause confusion again, if it does, I can of course buil=
d a new patchset :)
>=20
> Happy holidays!
> Leo
>=20
>  html/cgi-bin/pakfire.cgi | 137 ++++++++++++++++++++++++---------------
>  1 file changed, 84 insertions(+), 53 deletions(-)
>=20
> diff --git a/html/cgi-bin/pakfire.cgi b/html/cgi-bin/pakfire.cgi
> index 8516b07b1..51f586aa2 100644
> --- a/html/cgi-bin/pakfire.cgi
> +++ b/html/cgi-bin/pakfire.cgi
> @@ -100,6 +100,32 @@ if($cgiparams{'ACTION'} eq 'json-getstatus') {
>  ###--- HTML HEAD ---###
>  my $extraHead =3D <<END
>  <style>
> +	/* Main screen */
> +	table#pfmain {
> +		width: 100%;
> +		border-style: hidden;
> +		table-layout: fixed;
> +	}
> +
> +	#pfmain td {
> +		padding: 5px 20px 0;
> +		text-align: center;
> +	}
> +	#pfmain tr:not(:last-child) > td {
> +		padding-bottom: 1.5em;
> +	}
> +	#pfmain tr > td.heading {
> +		padding: 0;
> +		font-weight: bold;
> +		background-color: $color{'color20'};
> +	}
> +
> +	.pflist {
> +		width: 100%;
> +		text-align: left;
> +		margin-bottom: 0.8em;
> +	}
> +
>  	/* Pakfire log viewer */
>  	section#pflog-header {
>  		width: 100%;
> @@ -173,20 +199,23 @@ END
>  			print "$_\n";
>  		}
>  		print <<END;
> -		</pre>
> -		<tr><td colspan=3D'2'>$Lang::tr{'pakfire accept all'}
> -		<tr><td colspan=3D'2'>&nbsp;
> +		</pre></td></tr>
> +		<tr><td colspan=3D'2'>$Lang::tr{'pakfire accept all'}</td></tr>
> +		<tr><td colspan=3D'2'>&nbsp;</td></tr>
>  		<tr><td align=3D'right'><form method=3D'post' action=3D'$ENV{'SCRIPT_NAM=
E'}'>
>  							<input type=3D'hidden' name=3D'INSPAKS' value=3D'$cgiparams{'INSPAK=
S'}' />
>  							<input type=3D'hidden' name=3D'FORCE' value=3D'on' />
>  							<input type=3D'hidden' name=3D'ACTION' value=3D'install' />
>  							<input type=3D'image' alt=3D'$Lang::tr{'install'}' title=3D'$Lang::=
tr{'install'}' src=3D'/images/go-next.png' />
>  						</form>
> +				</td>
>  				<td align=3D'left'>
>  						<form method=3D'post' action=3D'$ENV{'SCRIPT_NAME'}'>
>  							<input type=3D'hidden' name=3D'ACTION' value=3D'' />
>  							<input type=3D'image' alt=3D'$Lang::tr{'abort'}' title=3D'$Lang::tr=
{'abort'}' src=3D'/images/dialog-error.png' />
>  						</form>
> +				</td>
> +			</tr>
>  		</table>
>  END
>  		&Header::closebox();
> @@ -210,20 +239,23 @@ END
>  			print "$_\n";
>  		}
>  		print <<END;
> -		</pre>
> -		<tr><td colspan=3D'2'>$Lang::tr{'pakfire uninstall all'}
> -		<tr><td colspan=3D'2'>&nbsp;
> +		</pre></td></tr>
> +		<tr><td colspan=3D'2'>$Lang::tr{'pakfire uninstall all'}</td></tr>
> +		<tr><td colspan=3D'2'>&nbsp;</td></tr>
>  		<tr><td align=3D'right'><form method=3D'post' action=3D'$ENV{'SCRIPT_NAM=
E'}'>
>  							<input type=3D'hidden' name=3D'DELPAKS' value=3D'$cgiparams{'DELPAK=
S'}' />
>  							<input type=3D'hidden' name=3D'FORCE' value=3D'on' />
>  							<input type=3D'hidden' name=3D'ACTION' value=3D'remove' />
>  							<input type=3D'image' alt=3D'$Lang::tr{'uninstall'}' title=3D'$Lang=
::tr{'uninstall'}' src=3D'/images/go-next.png' />
>  						</form>
> +				</td>
>  				<td align=3D'left'>
>  						<form method=3D'post' action=3D'$ENV{'SCRIPT_NAME'}'>
>  							<input type=3D'hidden' name=3D'ACTION' value=3D'' />
>  							<input type=3D'image' alt=3D'$Lang::tr{'abort'}' title=3D'$Lang::tr=
{'abort'}' src=3D'/images/dialog-error.png' />
>  						</form>
> +				</td>
> +			</tr>
>  		</table>
>  END
>  		&Header::closebox();
> @@ -311,70 +343,69 @@ my $packages_update_age =3D &General::age("/opt/pakfi=
re/db/lists/packages_list.db"
>  &Header::openbox("100%", "center", "Pakfire");
> =20
>  print <<END;
> -	<table width=3D'95%' cellpadding=3D'5'>
> +	<table id=3D"pfmain">
>  END
>  if ( -e "/var/run/need_reboot") {
> -	print "<tr><td align=3D'center' colspan=3D'2'><font color=3D'red'>$Lang::=
tr{'needreboot'}!</font></td></tr>";
> -	print "<tr><td colspan=3D'2'>&nbsp;</font></td></tr>"
> +	print "\t\t<tr><td colspan=3D'2'><a href=3D'/cgi-bin/shutdown.cgi'>$Lang:=
:tr{'needreboot'}!</a></td></tr>\n";
>  }
>  print <<END;
> -		<tr><td width=3D"50%" bgcolor=3D'$color{'color20'}' align=3D"center"><b>=
$Lang::tr{'pakfire system state'}:</b>
> -
> -			<td width=3D"50%" bgcolor=3D'$color{'color20'}' align=3D"center"><b>$La=
ng::tr{'available updates'}:</b></tr>
> -
> -		<tr><td align=3D"center">$Lang::tr{'pakfire core update level'}: $core_r=
elease<hr />
> -					$Lang::tr{'pakfire last update'} $core_update_age $Lang::tr{'pakfire =
ago'}<br />
> -					$Lang::tr{'pakfire last serverlist update'} $server_update_age $Lang:=
:tr{'pakfire ago'}<br />
> -					$Lang::tr{'pakfire last core list update'} $corelist_update_age $Lang=
::tr{'pakfire ago'}<br />
> +		<tr><td class=3D"heading">$Lang::tr{'pakfire system state'}:</td>
> +			<td class=3D"heading">$Lang::tr{'available updates'}:</td></tr>
> +
> +		<tr><td><strong>$Lang::tr{'pakfire core update level'}: $core_release</s=
trong>
> +				<hr>
> +				<div class=3D"pflist">
> +					$Lang::tr{'pakfire last update'} $core_update_age $Lang::tr{'pakfire =
ago'}<br>
> +					$Lang::tr{'pakfire last serverlist update'} $server_update_age $Lang:=
:tr{'pakfire ago'}<br>
> +					$Lang::tr{'pakfire last core list update'} $corelist_update_age $Lang=
::tr{'pakfire ago'}<br>
>  					$Lang::tr{'pakfire last package update'} $packages_update_age $Lang::=
tr{'pakfire ago'}
> -					<form method=3D'post' action=3D'$ENV{'SCRIPT_NAME'}'>
> -						<input type=3D'hidden' name=3D'ACTION' value=3D'update' /><br />
> -						<input type=3D'submit' value=3D'$Lang::tr{'calamaris refresh list'}'=
 /><br />
> -					</form>
> -<br />
> -				<td align=3D"center">
> +				</div>
>  				<form method=3D'post' action=3D'$ENV{'SCRIPT_NAME'}'>
> -					<select name=3D"UPDPAKS" size=3D"5" disabled>
> +					<input type=3D'hidden' name=3D'ACTION' value=3D'update' />
> +					<input type=3D'submit' value=3D'$Lang::tr{'calamaris refresh list'}' =
/>
> +				</form>
> +			</td>
> +			<td>
> +				<form method=3D'post' action=3D'$ENV{'SCRIPT_NAME'}'>
> +					<select name=3D"UPDPAKS" class=3D"pflist" size=3D"5" disabled>
>  END
> -						&Pakfire::dblist("upgrade", "forweb");
> +
> +	&Pakfire::dblist("upgrade", "forweb");
>  	print <<END;
>  					</select>
> -					<br />
>  					<input type=3D'hidden' name=3D'ACTION' value=3D'upgrade' />
>  					<input type=3D'image' alt=3D'$Lang::tr{'upgrade'}' title=3D'$Lang::tr=
{'upgrade'}' src=3D'/images/document-save.png' />
>  				 </form>
> +			</td>
> +		</tr>
> +		<tr><td class=3D"heading">$Lang::tr{'pakfire available addons'}</td>
> +			<td class=3D"heading">$Lang::tr{'pakfire installed addons'}</td></tr>
> =20
> -		<tr><td colspan=3D"2"><!-- Just an empty line -->&nbsp;
> -		<tr><td bgcolor=3D'$color{'color20'}' align=3D"center"><b>$Lang::tr{'pak=
fire available addons'}</b>
> -				<td bgcolor=3D'$color{'color20'}' align=3D"center"><b>$Lang::tr{'pakfi=
re installed addons'}</b>
> -		<tr><td style=3D"padding:5px 10px 20px 20px" align=3D"center">
> -			<p>$Lang::tr{'pakfire install description'}</p>
> -			<form method=3D'post' action=3D'$ENV{'SCRIPT_NAME'}'>
> -				<select name=3D"INSPAKS" size=3D"10" multiple>
> +		<tr><td><p>$Lang::tr{'pakfire install description'}</p>
> +				<form method=3D'post' action=3D'$ENV{'SCRIPT_NAME'}'>
> +					<select name=3D"INSPAKS" class=3D"pflist" size=3D"10" multiple>
>  END
> -			&Pakfire::dblist("notinstalled", "forweb");
> =20
> -print <<END;
> -				</select>
> -				<br />
> -				<input type=3D'hidden' name=3D'ACTION' value=3D'install' />
> -				<input type=3D'image' alt=3D'$Lang::tr{'install'}' title=3D'$Lang::tr{=
'install'}' src=3D'/images/list-add.png' />
> -			</form>
> -
> -		<td style=3D"padding:5px 10px 20px 20px" align=3D"center">
> -			<p>$Lang::tr{'pakfire uninstall description'}</p>
> -		 <form method=3D'post' action=3D'$ENV{'SCRIPT_NAME'}'>
> -			<select name=3D"DELPAKS" size=3D"10" multiple>
> +	&Pakfire::dblist("notinstalled", "forweb");
> +	print <<END;
> +					</select>
> +					<input type=3D'hidden' name=3D'ACTION' value=3D'install' />
> +					<input type=3D'image' alt=3D'$Lang::tr{'install'}' title=3D'$Lang::tr=
{'install'}' src=3D'/images/list-add.png' />
> +				</form>
> +			</td>
> +			<td><p>$Lang::tr{'pakfire uninstall description'}</p>
> +				<form method=3D'post' action=3D'$ENV{'SCRIPT_NAME'}'>
> +					<select name=3D"DELPAKS" class=3D"pflist" size=3D"10" multiple>
>  END
> =20
> -			&Pakfire::dblist("installed", "forweb");
> -
> -print <<END;
> -			</select>
> -			<br />
> -			<input type=3D'hidden' name=3D'ACTION' value=3D'remove' />
> -			<input type=3D'image' alt=3D'$Lang::tr{'remove'}' title=3D'$Lang::tr{'r=
emove'}' src=3D'/images/list-remove.png' />
> -		</form>
> +	&Pakfire::dblist("installed", "forweb");
> +	print <<END;
> +					</select>
> +					<input type=3D'hidden' name=3D'ACTION' value=3D'remove' />
> +					<input type=3D'image' alt=3D'$Lang::tr{'remove'}' title=3D'$Lang::tr{=
'remove'}' src=3D'/images/list-remove.png' />
> +				</form>
> +			</td>
> +		</tr>
>  	</table>
>  END
> =20
>=20

--===============5471335002214964296==--