diff options
author | Kenneth Graunke <kenneth@whitecape.org> | 2012-02-23 11:20:49 -0800 |
---|---|---|
committer | Kenneth Graunke <kenneth@whitecape.org> | 2013-05-08 11:35:04 -0700 |
commit | 38c7621b02e77a4e5470b34b58d4b92b035e5951 (patch) | |
tree | 8abed18ca15417a7159844d1986ecf4b4093059b /templates | |
parent | ba885e6efb359963820d9ee21ac05796cd873120 (diff) |
html: Use CSS3 for zebra-striping the tables.
Most browsers support the :nth-child selector by now, which allows us to
zebra-stripe the tables in CSS rather than making the python code
annotate every row with an 'a' or 'b' class.
While we're at it, stripe the pass/fail/crash results too. Based on
some CSS fragments, this was the intent all along, but didn't work.
This also changes the striping slightly: it now stripes purely based on
whether the row is even/odd, rather than striping on a per-group basis.
Signed-off-by: Kenneth Graunke <kenneth@whitecape.org>
Reviewed-by: Dylan Baker <baker.dylan.c@gmail.com>
Diffstat (limited to 'templates')
-rw-r--r-- | templates/index.css | 94 | ||||
-rw-r--r-- | templates/index_test.html | 2 | ||||
-rw-r--r-- | templates/index_test_testrun.html | 2 | ||||
-rw-r--r-- | templates/result.css | 12 | ||||
-rw-r--r-- | templates/result.html | 2 | ||||
-rw-r--r-- | templates/result_detail.html | 4 |
6 files changed, 31 insertions, 85 deletions
diff --git a/templates/index.css b/templates/index.css index 6d9e903a3..0e48e1cba 100644 --- a/templates/index.css +++ b/templates/index.css @@ -31,92 +31,36 @@ td:first-child > div { background-color: #c8c838 } -.a { - background-color: #ffff95 -} - -.b { - background-color: #e1e183 -} - -.skip { - text-align: right; - background-color: #b0b0b0; -} - -.warn { - text-align: right; - background-color: #ff9020; -} - -.fail { +td.skip, td.warn, td.fail, td.pass, td.trap, td.abort, td.crash { text-align: right; - background-color: #ff2020; } -.pass { - text-align: right; - background-color: #20ff20; -} - -.crash { - text-align: right; - background-color: #000000; +td.trap, td.abort, td.crash { color: #ffffff; } -.skipa { - text-align: right; - background-color: #d0d0d0; -} - -.warna { - text-align: right; - background-color: #ffc050; -} - -.faila { - text-align: right; - background-color: #ff5050; -} - -.passa { - text-align: right; - background-color: #50ff50; -} - -.crasha { - text-align: right; - background-color: #141414; +td.trap a, td.abort a, td.crash a { color: #ffffff; } -.skipb { - text-align: right; - background-color: #c0c0c0; -} +tr:nth-child(odd) > td > div:not(.head) { background-color: #ffff95 } +tr:nth-child(even) > td > div:not(.head) { background-color: #e1e183 } -.warnb { - text-align: right; - background-color: #ffa040; -} +tr:nth-child(odd) td.pass { background-color: #20ff20; } +tr:nth-child(even) td.pass { background-color: #15e015; } -.failb { - text-align: right; - background-color: #ff4040; -} +tr:nth-child(odd) td.skip { background-color: #b0b0b0; } +tr:nth-child(even) td.skip { background-color: #a0a0a0; } -.passb { - text-align: right; - background-color: #40ff40; -} +tr:nth-child(odd) td.warn { background-color: #ff9020; } +tr:nth-child(even) td.warn { background-color: #ef8010; } -.crashb { - text-align: right; - background-color: #0a0a0a; - color: #ffffff; -} +tr:nth-child(odd) td.fail { background-color: #ff2020; } +tr:nth-child(even) td.fail { background-color: #e00505; } -td.crasha a, td.crashb a { - color: #ffffff; -} +tr:nth-child(odd) td.trap { background-color: #111111; } +tr:nth-child(even) td.trap { background-color: #000000; } +tr:nth-child(odd) td.abort { background-color: #111111; } +tr:nth-child(even) td.abort { background-color: #000000; } +tr:nth-child(odd) td.crash { background-color: #111111; } +tr:nth-child(even) td.crash { background-color: #000000; } diff --git a/templates/index_test.html b/templates/index_test.html index 4b0964e7c..2ec6d07c7 100644 --- a/templates/index_test.html +++ b/templates/index_test.html @@ -1,4 +1,4 @@ <tr> - <td><div style="margin-left: %(indent)sem" class="%(alternate)s">%(name)s</div></td> + <td><div style="margin-left: %(indent)sem">%(name)s</div></td> %(testruns)s </tr> diff --git a/templates/index_test_testrun.html b/templates/index_test_testrun.html index 43de898bf..8a8b0981c 100644 --- a/templates/index_test_testrun.html +++ b/templates/index_test_testrun.html @@ -1 +1 @@ -<td class="%(status)s%(alternate)s"><a href="%(link)s">%(status)s</a></td> +<td class="%(status)s"><a href="%(link)s">%(status)s</a></td> diff --git a/templates/result.css b/templates/result.css index 7c6a557ce..19bfedc83 100644 --- a/templates/result.css +++ b/templates/result.css @@ -12,24 +12,26 @@ table { border-collapse: collapse; } -.head { +th { background-color: #c8c838 } -.a { +/* Second column (details) */ +tr:nth-child(even) > td { background-color: #ffff95 } -.b { +tr:nth-child(odd) > td { background-color: #e1e183 } -.bara { +/* First column (labels) */ +tr:nth-child(even) > td:first-child { vertical-align: top; background-color: #ffff85; } -.barb { +tr:nth-child(odd) > td:first-child { vertical-align: top; background-color: #d1d173; } diff --git a/templates/result.html b/templates/result.html index f90ff3d7a..5fed59318 100644 --- a/templates/result.html +++ b/templates/result.html @@ -16,7 +16,7 @@ </p> <h2>Details</h2> <table> - <tr class="head"> + <tr> <th>Detail</th> <th>Value</th> </tr> diff --git a/templates/result_detail.html b/templates/result_detail.html index d735d0da0..8398fa3d9 100644 --- a/templates/result_detail.html +++ b/templates/result_detail.html @@ -1,4 +1,4 @@ <tr> - <td class="bar%(alternate)s">%(name)s</td> - <td class="%(alternate)s">%(value)s</td> + <td>%(name)s</td> + <td>%(value)s</td> </tr> |