From: Leo-Andres Hofmann <hofmann@leo-andres.de>
To: development@lists.ipfire.org
Subject: [PATCH 2/2] pakfire.cgi: Improve HTML output and layout
Date: Mon, 27 Dec 2021 14:21:37 +0100 [thread overview]
Message-ID: <20211227132137.1355-2-hofmann@leo-andres.de> (raw)
In-Reply-To: <20211227132137.1355-1-hofmann@leo-andres.de>
[-- Attachment #1: Type: text/plain, Size: 9062 bytes --]
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(a)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
--
2.27.0.windows.1
next prev parent reply other threads:[~2021-12-27 13:21 UTC|newest]
Thread overview: 18+ messages / expand[flat|nested] mbox.gz Atom feed top
2021-12-02 15:39 [PATCH 1/4] pakfire.cgi: Extend the lockfile test Leo-Andres Hofmann
2021-12-02 15:39 ` [PATCH 2/4] pakfire.cgi: Implement JavaScript log message display Leo-Andres Hofmann
2021-12-02 15:59 ` Michael Tremer
2021-12-02 16:30 ` Leo Hofmann
2021-12-02 17:58 ` Michael Tremer
2021-12-02 18:48 ` Leo Hofmann
2021-12-02 15:39 ` [PATCH 3/4] pakfire.cgi: Add new translations Leo-Andres Hofmann
2021-12-02 16:00 ` Michael Tremer
2021-12-02 16:40 ` Leo Hofmann
2021-12-02 17:38 ` Michael Tremer
2021-12-02 15:39 ` [PATCH 4/4] pakfire.cgi: Remove "sleep" after running Pakfire command Leo-Andres Hofmann
2021-12-02 15:41 ` [PATCH 1/4] pakfire.cgi: Extend the lockfile test Leo Hofmann
2021-12-02 15:52 ` Michael Tremer
2021-12-02 16:09 ` Leo Hofmann
2021-12-27 13:21 ` [PATCH 1/2] pakfire: Implement feedback from mailing list discussion Leo-Andres Hofmann
2021-12-27 13:21 ` Leo-Andres Hofmann [this message]
2021-12-28 22:11 ` [PATCH 2/2] pakfire.cgi: Improve HTML output and layout Peter Müller
2021-12-28 22:11 ` [PATCH 1/2] pakfire: Implement feedback from mailing list discussion Peter Müller
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20211227132137.1355-2-hofmann@leo-andres.de \
--to=hofmann@leo-andres.de \
--cc=development@lists.ipfire.org \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox