From: "W. Trevor King" <wking@tremily.us>
To: notmuch@notmuchmail.org
Cc: Tomi Ollila <tomi.ollila@iki.fi>
Subject: [PATCH v4 1/4] nmbug-status: Color threads in HTML output
Date: Fri, 14 Feb 2014 08:48:52 -0800 [thread overview]
Message-ID: <f829c967cab11ae99ddb877490ccdd4fc43311dc.1392395932.git.wking@tremily.us> (raw)
In-Reply-To: <cover.1392395932.git.wking@tremily.us>
In-Reply-To: <cover.1392395932.git.wking@tremily.us>
Add tbody sections so we don't have to color every row. Multiple
tbody sections are allowed [1]. Use CSS 3's nth-child to handle
even/odd coloring (skipping the spacer rows) [2], which is supported
on the major browsers [3].
border-spacing is from CCS 2.1 [4,5]. I'm using it to avoid
whitespace between td cells.
border-radius is from CCS 3 [6,7]. I'm using it to make the colored
sections a bit less harsh. I tried adding rounded borders to the
tbody itself doesn't work, but I couldn't get that to work without
setting the tbody's display to 'block'. That rounded the corners, but
collapsed the cell spacing (e.g. columns were no longer aligned).
This commit's by-corner-td approach is not particularly elegant, but
it works. The td padding entries just ensure that the cell body is
suitably far from the edges that it doesn't fall outside of the
rounded corners.
The doubled-braces are escapes from Python's str.format.
[1]: http://www.w3.org/TR/html5/tabular-data.html#the-table-element
[2]: http://www.w3.org/TR/css3-selectors/#nth-child-pseudo
[3]: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#Browser_compatibility
[4]: http://www.w3.org/TR/CSS2/tables.html#propdef-border-spacing
[5]: https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing#Browser_compatibility
[6]: http://www.w3.org/TR/css3-background/#the-border-radius
[7]: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#Browser_compatibility
---
devel/nmbug/nmbug-status | 55 +++++++++++++++++++++++++++++++++++++-----------
1 file changed, 43 insertions(+), 12 deletions(-)
diff --git a/devel/nmbug/nmbug-status b/devel/nmbug/nmbug-status
index 1c390e6..a8bacab 100755
--- a/devel/nmbug/nmbug-status
+++ b/devel/nmbug/nmbug-status
@@ -205,19 +205,22 @@ class HtmlPage (Page):
return
stream.write('<table>\n')
for thread in threads:
+ stream.write(' <tbody>\n')
for message_display_data in thread:
stream.write((
- '<tr>\n'
- ' <td>{date}</td>\n'
- ' <td><code>{message-id-term}</code></td>\n'
- '</tr>\n'
- '<tr>\n'
- ' <td>{from}</td>\n'
- ' <td>{subject}</td>\n'
- '</tr>\n'
+ ' <tr>\n'
+ ' <td>{date}</td>\n'
+ ' <td><code>{message-id-term}</code></td>\n'
+ ' </tr>\n'
+ ' <tr>\n'
+ ' <td>{from}</td>\n'
+ ' <td>{subject}</td>\n'
+ ' </tr>\n'
).format(**message_display_data))
+ stream.write(' </tbody>\n')
if thread != threads[-1]:
- stream.write('<tr><td colspan="2"><br /></td></tr>\n')
+ stream.write(
+ ' <tbody><tr><td colspan="2"><br /></td></tr></tbody>\n')
stream.write('</table>\n')
def _message_display_data(self, *args, **kwargs):
@@ -246,8 +249,35 @@ _PAGES['html'] = HtmlPage(
header='''<!DOCTYPE html>
<html lang="en">
<head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<title>Notmuch Patches</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>Notmuch Patches</title>
+ <style media="screen" type="text/css">
+ table {{
+ border-spacing: 0;
+ }}
+ td {{
+ padding-left: {border_radius};
+ padding-right: {border_radius};
+ }}
+ tr:first-child td:first-child {{
+ border-top-left-radius: {border_radius};
+ }}
+ tr:first-child td:last-child {{
+ border-top-right-radius: {border_radius};
+ }}
+ tr:last-child td:first-child {{
+ border-bottom-left-radius: {border_radius};
+ }}
+ tr:last-child td:last-child {{
+ border-bottom-right-radius: {border_radius};
+ }}
+ tbody:nth-child(4n+1) tr td {{
+ background-color: #ffd96e;
+ }}
+ tbody:nth-child(4n+3) tr td {{
+ background-color: #bce;
+ }}
+ </style>
</head>
<body>
<h2>Notmuch Patches</h2>
@@ -256,7 +286,8 @@ Generated: {date}<br />
For more infomation see <a href="http://notmuchmail.org/nmbug">nmbug</a>
</p>
<h3>Views</h3>
-'''.format(date=datetime.datetime.utcnow().date()),
+'''.format(date=datetime.datetime.utcnow().date(),
+ border_radius='0.5em'),
footer='</body>\n</html>\n',
)
--
1.8.5.2.8.g0f6c0d1
next prev parent reply other threads:[~2014-02-14 16:52 UTC|newest]
Thread overview: 8+ messages / expand[flat|nested] mbox.gz Atom feed top
2014-02-14 16:48 [PATCH v4 0/4] nmbug-status: Python-3-compatibility and general refactoring W. Trevor King
2014-02-14 16:48 ` W. Trevor King [this message]
2014-02-14 16:48 ` [PATCH v4 2/4] nmbug-status: Add inter-message padding W. Trevor King
2014-02-14 16:48 ` [PATCH v4 3/4] nmbug-status: Encode output using the user's locale W. Trevor King
2014-02-14 16:48 ` [PATCH v4 4/4] nmbug-status: Hardcode UTF-8 instead of " W. Trevor King
2014-02-16 23:46 ` [PATCH v4 0/4] nmbug-status: Python-3-compatibility and general refactoring David Bremner
2014-04-05 14:59 ` W. Trevor King
2014-04-05 15:46 ` David Bremner
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
List information: https://notmuchmail.org/
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=f829c967cab11ae99ddb877490ccdd4fc43311dc.1392395932.git.wking@tremily.us \
--to=wking@tremily.us \
--cc=notmuch@notmuchmail.org \
--cc=tomi.ollila@iki.fi \
/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.
Code repositories for project(s) associated with this public inbox
https://yhetil.org/notmuch.git/
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).