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.
This commit is contained in:
Neil Williams
2013-01-14 12:01:32 -08:00
parent 7564f3a475
commit ad06201f57
2 changed files with 19 additions and 1 deletions

View File

@@ -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;

View File

@@ -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)}