[2/2] pakfire.cgi: Improve HTML output and layout

Message ID 20211227132137.1355-2-hofmann@leo-andres.de
State Accepted
Commit 219dacef2c36a00dc5d26a9c42b86513281683fa
Headers show
Series [1/2] pakfire: Implement feedback from mailing list discussion | expand

Commit Message

Leo-Andres Hofmann Dec. 27, 2021, 1:21 p.m. UTC
Add missing closing tags, indentation and CSS styling.
Add link to reboot notice, left-align info list and resize packages
lists for better readability.

Signed-off-by: Leo-Andres Hofmann <hofmann@leo-andres.de>
---

Hi all,

this patch series implements everything that came up in the discussion so far and fixes a few HTML issues I found along the way.
Because more changes are probably needed, I have not yet created a new patchset. Instead, this patch builds on the first proposal. 

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=2452

I hope this doesn't cause confusion again, if it does, I can of course build a new patchset :)

Happy holidays!
Leo

 html/cgi-bin/pakfire.cgi | 137 ++++++++++++++++++++++++---------------
 1 file changed, 84 insertions(+), 53 deletions(-)

Comments

Peter Müller Dec. 28, 2021, 10:11 p.m. UTC | #1
Acked-by: Peter Müller <peter.mueller@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.
> 
> Signed-off-by: Leo-Andres Hofmann <hofmann@leo-andres.de>
> ---
> 
> Hi all,
> 
> this patch series implements everything that came up in the discussion so far and fixes a few HTML issues I found along the way.
> Because more changes are probably needed, I have not yet created a new patchset. Instead, this patch builds on the first proposal. 
> 
> 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=2452
> 
> I hope this doesn't cause confusion again, if it does, I can of course build a new patchset :)
> 
> Happy holidays!
> Leo
> 
>  html/cgi-bin/pakfire.cgi | 137 ++++++++++++++++++++++++---------------
>  1 file changed, 84 insertions(+), 53 deletions(-)
> 
> 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 = <<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='2'>$Lang::tr{'pakfire accept all'}
> -		<tr><td colspan='2'>&nbsp;
> +		</pre></td></tr>
> +		<tr><td colspan='2'>$Lang::tr{'pakfire accept all'}</td></tr>
> +		<tr><td colspan='2'>&nbsp;</td></tr>
>  		<tr><td align='right'><form method='post' action='$ENV{'SCRIPT_NAME'}'>
>  							<input type='hidden' name='INSPAKS' value='$cgiparams{'INSPAKS'}' />
>  							<input type='hidden' name='FORCE' value='on' />
>  							<input type='hidden' name='ACTION' value='install' />
>  							<input type='image' alt='$Lang::tr{'install'}' title='$Lang::tr{'install'}' src='/images/go-next.png' />
>  						</form>
> +				</td>
>  				<td align='left'>
>  						<form method='post' action='$ENV{'SCRIPT_NAME'}'>
>  							<input type='hidden' name='ACTION' value='' />
>  							<input type='image' alt='$Lang::tr{'abort'}' title='$Lang::tr{'abort'}' src='/images/dialog-error.png' />
>  						</form>
> +				</td>
> +			</tr>
>  		</table>
>  END
>  		&Header::closebox();
> @@ -210,20 +239,23 @@ END
>  			print "$_\n";
>  		}
>  		print <<END;
> -		</pre>
> -		<tr><td colspan='2'>$Lang::tr{'pakfire uninstall all'}
> -		<tr><td colspan='2'>&nbsp;
> +		</pre></td></tr>
> +		<tr><td colspan='2'>$Lang::tr{'pakfire uninstall all'}</td></tr>
> +		<tr><td colspan='2'>&nbsp;</td></tr>
>  		<tr><td align='right'><form method='post' action='$ENV{'SCRIPT_NAME'}'>
>  							<input type='hidden' name='DELPAKS' value='$cgiparams{'DELPAKS'}' />
>  							<input type='hidden' name='FORCE' value='on' />
>  							<input type='hidden' name='ACTION' value='remove' />
>  							<input type='image' alt='$Lang::tr{'uninstall'}' title='$Lang::tr{'uninstall'}' src='/images/go-next.png' />
>  						</form>
> +				</td>
>  				<td align='left'>
>  						<form method='post' action='$ENV{'SCRIPT_NAME'}'>
>  							<input type='hidden' name='ACTION' value='' />
>  							<input type='image' alt='$Lang::tr{'abort'}' title='$Lang::tr{'abort'}' src='/images/dialog-error.png' />
>  						</form>
> +				</td>
> +			</tr>
>  		</table>
>  END
>  		&Header::closebox();
> @@ -311,70 +343,69 @@ my $packages_update_age = &General::age("/opt/pakfire/db/lists/packages_list.db"
>  &Header::openbox("100%", "center", "Pakfire");
>  
>  print <<END;
> -	<table width='95%' cellpadding='5'>
> +	<table id="pfmain">
>  END
>  if ( -e "/var/run/need_reboot") {
> -	print "<tr><td align='center' colspan='2'><font color='red'>$Lang::tr{'needreboot'}!</font></td></tr>";
> -	print "<tr><td colspan='2'>&nbsp;</font></td></tr>"
> +	print "\t\t<tr><td colspan='2'><a href='/cgi-bin/shutdown.cgi'>$Lang::tr{'needreboot'}!</a></td></tr>\n";
>  }
>  print <<END;
> -		<tr><td width="50%" bgcolor='$color{'color20'}' align="center"><b>$Lang::tr{'pakfire system state'}:</b>
> -
> -			<td width="50%" bgcolor='$color{'color20'}' align="center"><b>$Lang::tr{'available updates'}:</b></tr>
> -
> -		<tr><td align="center">$Lang::tr{'pakfire core update level'}: $core_release<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="heading">$Lang::tr{'pakfire system state'}:</td>
> +			<td class="heading">$Lang::tr{'available updates'}:</td></tr>
> +
> +		<tr><td><strong>$Lang::tr{'pakfire core update level'}: $core_release</strong>
> +				<hr>
> +				<div class="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='post' action='$ENV{'SCRIPT_NAME'}'>
> -						<input type='hidden' name='ACTION' value='update' /><br />
> -						<input type='submit' value='$Lang::tr{'calamaris refresh list'}' /><br />
> -					</form>
> -<br />
> -				<td align="center">
> +				</div>
>  				<form method='post' action='$ENV{'SCRIPT_NAME'}'>
> -					<select name="UPDPAKS" size="5" disabled>
> +					<input type='hidden' name='ACTION' value='update' />
> +					<input type='submit' value='$Lang::tr{'calamaris refresh list'}' />
> +				</form>
> +			</td>
> +			<td>
> +				<form method='post' action='$ENV{'SCRIPT_NAME'}'>
> +					<select name="UPDPAKS" class="pflist" size="5" disabled>
>  END
> -						&Pakfire::dblist("upgrade", "forweb");
> +
> +	&Pakfire::dblist("upgrade", "forweb");
>  	print <<END;
>  					</select>
> -					<br />
>  					<input type='hidden' name='ACTION' value='upgrade' />
>  					<input type='image' alt='$Lang::tr{'upgrade'}' title='$Lang::tr{'upgrade'}' src='/images/document-save.png' />
>  				 </form>
> +			</td>
> +		</tr>
> +		<tr><td class="heading">$Lang::tr{'pakfire available addons'}</td>
> +			<td class="heading">$Lang::tr{'pakfire installed addons'}</td></tr>
>  
> -		<tr><td colspan="2"><!-- Just an empty line -->&nbsp;
> -		<tr><td bgcolor='$color{'color20'}' align="center"><b>$Lang::tr{'pakfire available addons'}</b>
> -				<td bgcolor='$color{'color20'}' align="center"><b>$Lang::tr{'pakfire installed addons'}</b>
> -		<tr><td style="padding:5px 10px 20px 20px" align="center">
> -			<p>$Lang::tr{'pakfire install description'}</p>
> -			<form method='post' action='$ENV{'SCRIPT_NAME'}'>
> -				<select name="INSPAKS" size="10" multiple>
> +		<tr><td><p>$Lang::tr{'pakfire install description'}</p>
> +				<form method='post' action='$ENV{'SCRIPT_NAME'}'>
> +					<select name="INSPAKS" class="pflist" size="10" multiple>
>  END
> -			&Pakfire::dblist("notinstalled", "forweb");
>  
> -print <<END;
> -				</select>
> -				<br />
> -				<input type='hidden' name='ACTION' value='install' />
> -				<input type='image' alt='$Lang::tr{'install'}' title='$Lang::tr{'install'}' src='/images/list-add.png' />
> -			</form>
> -
> -		<td style="padding:5px 10px 20px 20px" align="center">
> -			<p>$Lang::tr{'pakfire uninstall description'}</p>
> -		 <form method='post' action='$ENV{'SCRIPT_NAME'}'>
> -			<select name="DELPAKS" size="10" multiple>
> +	&Pakfire::dblist("notinstalled", "forweb");
> +	print <<END;
> +					</select>
> +					<input type='hidden' name='ACTION' value='install' />
> +					<input type='image' alt='$Lang::tr{'install'}' title='$Lang::tr{'install'}' src='/images/list-add.png' />
> +				</form>
> +			</td>
> +			<td><p>$Lang::tr{'pakfire uninstall description'}</p>
> +				<form method='post' action='$ENV{'SCRIPT_NAME'}'>
> +					<select name="DELPAKS" class="pflist" size="10" multiple>
>  END
>  
> -			&Pakfire::dblist("installed", "forweb");
> -
> -print <<END;
> -			</select>
> -			<br />
> -			<input type='hidden' name='ACTION' value='remove' />
> -			<input type='image' alt='$Lang::tr{'remove'}' title='$Lang::tr{'remove'}' src='/images/list-remove.png' />
> -		</form>
> +	&Pakfire::dblist("installed", "forweb");
> +	print <<END;
> +					</select>
> +					<input type='hidden' name='ACTION' value='remove' />
> +					<input type='image' alt='$Lang::tr{'remove'}' title='$Lang::tr{'remove'}' src='/images/list-remove.png' />
> +				</form>
> +			</td>
> +		</tr>
>  	</table>
>  END
>  
>

Patch

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 = <<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='2'>$Lang::tr{'pakfire accept all'}
-		<tr><td colspan='2'>&nbsp;
+		</pre></td></tr>
+		<tr><td colspan='2'>$Lang::tr{'pakfire accept all'}</td></tr>
+		<tr><td colspan='2'>&nbsp;</td></tr>
 		<tr><td align='right'><form method='post' action='$ENV{'SCRIPT_NAME'}'>
 							<input type='hidden' name='INSPAKS' value='$cgiparams{'INSPAKS'}' />
 							<input type='hidden' name='FORCE' value='on' />
 							<input type='hidden' name='ACTION' value='install' />
 							<input type='image' alt='$Lang::tr{'install'}' title='$Lang::tr{'install'}' src='/images/go-next.png' />
 						</form>
+				</td>
 				<td align='left'>
 						<form method='post' action='$ENV{'SCRIPT_NAME'}'>
 							<input type='hidden' name='ACTION' value='' />
 							<input type='image' alt='$Lang::tr{'abort'}' title='$Lang::tr{'abort'}' src='/images/dialog-error.png' />
 						</form>
+				</td>
+			</tr>
 		</table>
 END
 		&Header::closebox();
@@ -210,20 +239,23 @@  END
 			print "$_\n";
 		}
 		print <<END;
-		</pre>
-		<tr><td colspan='2'>$Lang::tr{'pakfire uninstall all'}
-		<tr><td colspan='2'>&nbsp;
+		</pre></td></tr>
+		<tr><td colspan='2'>$Lang::tr{'pakfire uninstall all'}</td></tr>
+		<tr><td colspan='2'>&nbsp;</td></tr>
 		<tr><td align='right'><form method='post' action='$ENV{'SCRIPT_NAME'}'>
 							<input type='hidden' name='DELPAKS' value='$cgiparams{'DELPAKS'}' />
 							<input type='hidden' name='FORCE' value='on' />
 							<input type='hidden' name='ACTION' value='remove' />
 							<input type='image' alt='$Lang::tr{'uninstall'}' title='$Lang::tr{'uninstall'}' src='/images/go-next.png' />
 						</form>
+				</td>
 				<td align='left'>
 						<form method='post' action='$ENV{'SCRIPT_NAME'}'>
 							<input type='hidden' name='ACTION' value='' />
 							<input type='image' alt='$Lang::tr{'abort'}' title='$Lang::tr{'abort'}' src='/images/dialog-error.png' />
 						</form>
+				</td>
+			</tr>
 		</table>
 END
 		&Header::closebox();
@@ -311,70 +343,69 @@  my $packages_update_age = &General::age("/opt/pakfire/db/lists/packages_list.db"
 &Header::openbox("100%", "center", "Pakfire");
 
 print <<END;
-	<table width='95%' cellpadding='5'>
+	<table id="pfmain">
 END
 if ( -e "/var/run/need_reboot") {
-	print "<tr><td align='center' colspan='2'><font color='red'>$Lang::tr{'needreboot'}!</font></td></tr>";
-	print "<tr><td colspan='2'>&nbsp;</font></td></tr>"
+	print "\t\t<tr><td colspan='2'><a href='/cgi-bin/shutdown.cgi'>$Lang::tr{'needreboot'}!</a></td></tr>\n";
 }
 print <<END;
-		<tr><td width="50%" bgcolor='$color{'color20'}' align="center"><b>$Lang::tr{'pakfire system state'}:</b>
-
-			<td width="50%" bgcolor='$color{'color20'}' align="center"><b>$Lang::tr{'available updates'}:</b></tr>
-
-		<tr><td align="center">$Lang::tr{'pakfire core update level'}: $core_release<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="heading">$Lang::tr{'pakfire system state'}:</td>
+			<td class="heading">$Lang::tr{'available updates'}:</td></tr>
+
+		<tr><td><strong>$Lang::tr{'pakfire core update level'}: $core_release</strong>
+				<hr>
+				<div class="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='post' action='$ENV{'SCRIPT_NAME'}'>
-						<input type='hidden' name='ACTION' value='update' /><br />
-						<input type='submit' value='$Lang::tr{'calamaris refresh list'}' /><br />
-					</form>
-<br />
-				<td align="center">
+				</div>
 				<form method='post' action='$ENV{'SCRIPT_NAME'}'>
-					<select name="UPDPAKS" size="5" disabled>
+					<input type='hidden' name='ACTION' value='update' />
+					<input type='submit' value='$Lang::tr{'calamaris refresh list'}' />
+				</form>
+			</td>
+			<td>
+				<form method='post' action='$ENV{'SCRIPT_NAME'}'>
+					<select name="UPDPAKS" class="pflist" size="5" disabled>
 END
-						&Pakfire::dblist("upgrade", "forweb");
+
+	&Pakfire::dblist("upgrade", "forweb");
 	print <<END;
 					</select>
-					<br />
 					<input type='hidden' name='ACTION' value='upgrade' />
 					<input type='image' alt='$Lang::tr{'upgrade'}' title='$Lang::tr{'upgrade'}' src='/images/document-save.png' />
 				 </form>
+			</td>
+		</tr>
+		<tr><td class="heading">$Lang::tr{'pakfire available addons'}</td>
+			<td class="heading">$Lang::tr{'pakfire installed addons'}</td></tr>
 
-		<tr><td colspan="2"><!-- Just an empty line -->&nbsp;
-		<tr><td bgcolor='$color{'color20'}' align="center"><b>$Lang::tr{'pakfire available addons'}</b>
-				<td bgcolor='$color{'color20'}' align="center"><b>$Lang::tr{'pakfire installed addons'}</b>
-		<tr><td style="padding:5px 10px 20px 20px" align="center">
-			<p>$Lang::tr{'pakfire install description'}</p>
-			<form method='post' action='$ENV{'SCRIPT_NAME'}'>
-				<select name="INSPAKS" size="10" multiple>
+		<tr><td><p>$Lang::tr{'pakfire install description'}</p>
+				<form method='post' action='$ENV{'SCRIPT_NAME'}'>
+					<select name="INSPAKS" class="pflist" size="10" multiple>
 END
-			&Pakfire::dblist("notinstalled", "forweb");
 
-print <<END;
-				</select>
-				<br />
-				<input type='hidden' name='ACTION' value='install' />
-				<input type='image' alt='$Lang::tr{'install'}' title='$Lang::tr{'install'}' src='/images/list-add.png' />
-			</form>
-
-		<td style="padding:5px 10px 20px 20px" align="center">
-			<p>$Lang::tr{'pakfire uninstall description'}</p>
-		 <form method='post' action='$ENV{'SCRIPT_NAME'}'>
-			<select name="DELPAKS" size="10" multiple>
+	&Pakfire::dblist("notinstalled", "forweb");
+	print <<END;
+					</select>
+					<input type='hidden' name='ACTION' value='install' />
+					<input type='image' alt='$Lang::tr{'install'}' title='$Lang::tr{'install'}' src='/images/list-add.png' />
+				</form>
+			</td>
+			<td><p>$Lang::tr{'pakfire uninstall description'}</p>
+				<form method='post' action='$ENV{'SCRIPT_NAME'}'>
+					<select name="DELPAKS" class="pflist" size="10" multiple>
 END
 
-			&Pakfire::dblist("installed", "forweb");
-
-print <<END;
-			</select>
-			<br />
-			<input type='hidden' name='ACTION' value='remove' />
-			<input type='image' alt='$Lang::tr{'remove'}' title='$Lang::tr{'remove'}' src='/images/list-remove.png' />
-		</form>
+	&Pakfire::dblist("installed", "forweb");
+	print <<END;
+					</select>
+					<input type='hidden' name='ACTION' value='remove' />
+					<input type='image' alt='$Lang::tr{'remove'}' title='$Lang::tr{'remove'}' src='/images/list-remove.png' />
+				</form>
+			</td>
+		</tr>
 	</table>
 END