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'> + </pre></td></tr> + <tr><td colspan='2'>$Lang::tr{'pakfire accept all'}</td></tr> + <tr><td colspan='2'> </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'> + </pre></td></tr> + <tr><td colspan='2'>$Lang::tr{'pakfire uninstall all'}</td></tr> + <tr><td colspan='2'> </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'> </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 --> - <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