djangoproject.com | python.org | nginx.org
version seven.
  http://demongin.org
demongin.org - How I Styled the Archive View

How I Styled the Archive View

Or, how to iterate over your archive tuples in Django and produce a zebra-stripe archive view without any fancy crap.


Tuesday, 2009-10-13 | demongin.org, Django, Programming

You are like the Liar of Crete...
Umberto Eco, Baudolino

Update: I know that this looks all kinds of messed up in most RSS viewers. I'm working on figuring out the problem. Thanks.

The styling of the brand-spankin' new archive view has two main components: there's the django template and the CSS elements. I'm going to go through the django template first, as that's much more interesting.

I am not, however, going to cover the back end (i.e. the database queries and the creation of the data elements), because the code is ugly and I'm not particularly proud of the various applications of brute force that made it possible. So let's just assume that I'm starting with a data element that looks like this:

list_of_data_tuples[
    ("January", 
        [
            (post.pub_date.day, post.id, post.title, post.subtitle), 
            (post1.pub_date.day, post2.id, post2.title, post2.subtitle),
            ... etc.
        ]
    ), 
    ("February", 
        [
            (post1.pub_date.day, post1.id, post1.title, post1.subtitle), 
            (post1.pub_date.day, post2.id, post2.title, post2.subtitle),
            ... etc.
        ]
    ), ... etc.
]

I take that data element and throw it into a template that takes advantage of django's totally awesome, built-in, auto-magic "cycle" template tag:

	{% for month, posts in m %}
		<table id="archive_month">
<tr><td colspan="3" class="archive_month_name"> {{ month }} </td></tr>
		{% for date, id, title, subtitle in posts %}
			<tr class="{% cycle 'archive_month_odd' 'archive_month_even' %}">
<td class="archive_month_date">{{ date }}</td>
<td class="archive_month_title"><a href="/blog/{{ id }}"> {{ title }}</a></td>
<td> {{ subtitle }}</td>
</tr> 
		{% endfor %}
		</table>
	{% endfor %}

What happens with the "cycle" tag is that you get alternating text in your HTML based on how many arguments (i.e. 'archive_month_odd', 'archive_month_even' in the above example) you give it. So when I use the above in my template, I get HTML that looks like this:

<table id="archive_month">
<tr><td colspan="3" class="archive_month_name"> February </td></tr>
<tr class="archive_month_odd">
<td class="archive_month_date">3</td>
<td class="archive_month_title"><a href="/blog/742"> Blackstrap Molasses</a></td>
<td> The epistemological and sociological imperative to offer and accept advice.</td></tr>
<tr class="archive_month_even">
<td class="archive_month_date">4</td>
<td class="archive_month_title"><a href="/blog/743"> Prognostications from the Horse Latitudes</a></td>
<td> Polemic against prognostication and hype that touches upon the fundamental nature of </td></tr>
</table>

...and once I've got that, I just style accordingly with some simple CSS, using the "ID" and "class" stuff inserted statically by my template and dynamically by the "cycle" template tag:

table#archive_month {
    width: 97%;
    border-collapse: collapse;
    padding: 3px;
    margin-top: 1em;
}

.archive_month_name {
    background-color: #B1FB17; 
    color:  #53377A; 
    padding: 0em;
    padding-left: 1em;
    letter-spacing: 0.1em;
    font-size: 1.4em;
} 
.archive_month_odd { background-color: #EEE;}
.archive_month_date {width: 5%; text-align: right; padding-right: 0.6em; }
.archive_month_title {width: 35%; }

And it's as simple as that: easy-peasy zebra stripes using django.