From ad06201f57c35babbba5b76d96e28b1ab1a4f93a Mon Sep 17 00:00:00 2001
From: Neil Williams <neil@reddit.com>
Date: Mon, 14 Jan 2013 12:01:32 -0800
Subject: [PATCH] traffic: Separate apart weeks in day-interval tables.

This should help to make week-by-week trends a little clearer and also
make it easier to see what day of the week a day was.
---
 r2/r2/public/static/css/reddit.css   | 14 ++++++++++++++
 r2/r2/templates/timeserieschart.html |  6 +++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/r2/r2/public/static/css/reddit.css b/r2/r2/public/static/css/reddit.css
index 8b7a3a6cc..e8b400132 100755
--- a/r2/r2/public/static/css/reddit.css
+++ b/r2/r2/public/static/css/reddit.css
@@ -3995,6 +3995,20 @@ ul.tabmenu.formtab {
 .traffic-table tbody tr:nth-child(even) { background-color: #E0E0E0; }
 .traffic-table tr.mean { font-style: italic; border-top: 1px solid; }
 
+/* this injects a blank space between weeks so that weekly patterns
+ * are more visible. since the borders are collapsed, we need to use
+ * cell padding to achieve the effect. however, the zebra-striping of
+ * the table makes for ugly extra-wide stripes when a stripe and week
+ * gap coincide. the nth-child rules put the padding on the top of
+ * the next row instead of the bottom of the current one if the current
+ * one is a zebra stripe. */
+.traffic-table .dow-6 th,
+.traffic-table .dow-6 td { padding-bottom: 1em; }
+.traffic-table tr:nth-child(odd).dow-5 th,
+.traffic-table tr:nth-child(odd).dow-5 td { padding-top: 1em; }
+.traffic-table tr:nth-child(even).dow-6 th,
+.traffic-table tr:nth-child(even).dow-6 td { padding-bottom: 0; }
+
 .traffic-tables-side {
     float: left;
     min-height: 50em;
diff --git a/r2/r2/templates/timeserieschart.html b/r2/r2/templates/timeserieschart.html
index 39c996490..51fa71c4a 100644
--- a/r2/r2/templates/timeserieschart.html
+++ b/r2/r2/templates/timeserieschart.html
@@ -46,7 +46,11 @@
 </thead>
 <tbody>
 % for date, data in thing.rows:
-<tr>
+<tr
+  % if thing.interval == "day" and date.weekday() in (5, 6):
+  class="dow-${date.weekday()}"
+  % endif
+  >
   <th data-value="${js_timestamp(date)}" scope="row">
       % if thing.interval == "hour":
       ${babel.dates.format_datetime(date, format="short", locale=c.locale)}