unofficial mirror of notmuch@notmuchmail.org
 help / color / mirror / code / Atom feed
From: "W. Trevor King" <wking@tremily.us>
To: notmuch@notmuchmail.org
Cc: Tomi Ollila <tomi.ollila@iki.fi>
Subject: [PATCH v2 18/20] nmbug-status: Color threads in HTML output
Date: Mon, 10 Feb 2014 10:40:39 -0800	[thread overview]
Message-ID: <ed4fdc88558a1dcb22d2fb8683f9020ff1a7cbf0.1392056624.git.wking@tremily.us> (raw)
In-Reply-To: <cover.1392056624.git.wking@tremily.us>
In-Reply-To: <cover.1392056624.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 c45b763..1f0873a 100755
--- a/devel/nmbug/nmbug-status
+++ b/devel/nmbug/nmbug-status
@@ -204,19 +204,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):
@@ -242,8 +245,35 @@ _PAGES['html'] = HtmlPage(
     header='''<!DOCTYPE html>
 <html lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset={encoding}" />
-<title>Notmuch Patches</title>
+  <meta http-equiv="Content-Type" content="text/html; charset={encoding}" />
+  <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>
@@ -253,7 +283,8 @@ For more infomation see <a href="http://notmuchmail.org/nmbug">nmbug</a>
 </p>
 <h3>Views</h3>
 '''.format(date=datetime.datetime.utcnow().date(),
-           encoding=_ENCODING),
+           encoding=_ENCODING,
+           border_radius='0.5em'),
     footer='</body>\n</html>\n',
     )
 
-- 
1.8.5.2.8.g0f6c0d1

  parent reply	other threads:[~2014-02-10 18:45 UTC|newest]

Thread overview: 33+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2014-02-10 18:40 [PATCH v2 00/20] nmbug-status: Python-3-compatibility and general refactoring W. Trevor King
2014-02-10 18:40 ` [PATCH v2 01/20] nmbug-status: Convert to Python-3-compatible print functions W. Trevor King
2014-02-10 18:40 ` [PATCH v2 02/20] nmbug-status: Use email.utils instead of rfc822 W. Trevor King
2014-02-10 18:40 ` [PATCH v2 03/20] nmbug-status: Decode Popen output using the user's locale W. Trevor King
2014-02-10 18:40 ` [PATCH v2 04/20] nmbug-status: Factor config-loading out into read_config W. Trevor King
2014-02-10 18:40 ` [PATCH v2 05/20] nmbug-status: Add metavars for --config and --get-query W. Trevor King
2014-02-10 18:40 ` [PATCH v2 06/20] nmbug-status: Consolidate functions and main code W. Trevor King
2014-02-10 18:40 ` [PATCH v2 07/20] nmbug-status: Don't require write access W. Trevor King
2014-02-10 18:40 ` [PATCH v2 08/20] nmbug-status: Consolidate HTML header printing W. Trevor King
2014-02-10 18:40 ` [PATCH v2 09/20] nmbug-status: Add a Python-3-compatible urllib.parse.quote import W. Trevor King
2014-02-10 18:40 ` [PATCH v2 10/20] nmbug-status: Add Page and HtmlPage for modular rendering W. Trevor King
2014-02-10 18:40 ` [PATCH v2 11/20] nmbug-status: Add an OrderedDict stub for Python 2.6 W. Trevor King
2014-02-10 18:40 ` [PATCH v2 12/20] nmbug-status: Normalize table HTML indentation W. Trevor King
2014-02-10 18:40 ` [PATCH v2 13/20] nmbug-status: Convert from XHTML 1.0 to HTML 5 W. Trevor King
2014-02-12 23:35   ` David Bremner
2014-02-13  2:06     ` W. Trevor King
2014-02-13  7:30       ` Tomi Ollila
2014-02-10 18:40 ` [PATCH v2 14/20] nmbug-status: Encode output using the user's locale W. Trevor King
2014-02-11 12:12   ` David Bremner
2014-02-11 14:14     ` Tomi Ollila
2014-02-11 20:11       ` W. Trevor King
2014-02-11 22:02         ` David Bremner
2014-02-11 22:33           ` W. Trevor King
2014-02-13  2:13             ` David Bremner
2014-02-13  2:35               ` W. Trevor King
2014-02-13 11:47                 ` David Bremner
2014-02-10 18:40 ` [PATCH v2 15/20] nmbug-status: Anchor with h3 ids instead of a names W. Trevor King
2014-02-10 18:40 ` [PATCH v2 16/20] nmbug-status: Slug the title when using it as an id W. Trevor King
2014-02-10 18:40 ` [PATCH v2 17/20] nmbug-status: Use <code> and <p> markup where appropriate W. Trevor King
2014-02-10 18:40 ` W. Trevor King [this message]
2014-02-10 18:40 ` [PATCH v2 19/20] nmbug-status: Escape &, <, and > in HTML display data W. Trevor King
2014-02-10 18:40 ` [PATCH v2 20/20] nmbug-status: Add inter-message padding W. Trevor King
2014-02-10 20:29 ` [PATCH v2 00/20] nmbug-status: Python-3-compatibility and general refactoring Tomi Ollila

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=ed4fdc88558a1dcb22d2fb8683f9020ff1a7cbf0.1392056624.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).