Donor page rework for list formatting

Instead of doing slicing and ugly table-based layout, move to a CSS-based
organization of the donor list. Shoot for 4 columns but should degrade
gracefully to fewer, and will look just fine with no CSS at all (one big
tall list).

Signed-off-by: Dan McGee <dan@archlinux.org>

3 files changed, 24 insertions, 35 deletions

diff --git a/media/arch.css b/media/arch.css
index 37a1acf5..83d239e3 100644
--- a/media/arch.css
+++ b/media/arch.css
@@ -373,3 +373,15 @@ form#newsform input[type=text] {
 form#newsform textarea {
 	width: 100%;
 }
+
+/* donate page styles */
+ul#donorlist {
+	width: 100%;
+}
+ul#donorlist li {
+	float: left;
+	/* max 4 columns, but possibly fewer if screen size doesn't allow for more */
+	width: 25%;
+	min-width: 20em;
+}
+
diff --git a/public/views.py b/public/views.py
index a80c30ed..912801fe 100644
--- a/public/views.py
+++ b/public/views.py
@@ -39,14 +39,8 @@ def userlist(request, type='Developers'):
                               context_instance=RequestContext(request))
 
 def donate(request):
-    donor_count = Donor.objects.count()
-    donors = Donor.objects.order_by('name')
-    splitval = donor_count / 4
     context = {
-        'slice1': donors[:splitval],
-        'slice2': donors[(splitval):(splitval*2)],
-        'slice3': donors[(splitval*2):(donor_count-splitval)],
-        'slice4': donors[(donor_count-splitval):donor_count],
+        'donors': Donor.objects.order_by('name'),
     }
     return render_to_response('public/donate.html', context,
                               context_instance=RequestContext(request))
diff --git a/templates/public/donate.html b/templates/public/donate.html
index 65954135..a14f20ed 100644
--- a/templates/public/donate.html
+++ b/templates/public/donate.html
@@ -36,40 +36,23 @@
     <br />
     <h2 class="title">Sponsors and Contributions</h2>
     <p>We'd like to thank <a href="http://www.velocitynetwork.net/?hosting_by=ArchLinux" title="velocity network">Velocity Network</a> for contributing space in a server rack, bandwidth, and electricity for our main server for the last couple of years.</p>
+    <div style="text-align:center">
     <a href="http://www.velocitynetwork.net/?hosting_by=ArchLinux" title="velocity network"><img src="/media/vnet_button.png" class="" title="" alt="velocity network - it's about time" /></a>
-    <br />
+    </div>
     <p>We also wish to extend a special Thank You to <a href="https://www.sevenl.net/?utm_source=archlinux-org&amp;utm_medium=sponsored-banner&amp;utm_campaign=thanks-to-sevenl" title="SevenL Networks - Dedicated Arch Linux servers">SevenL Networks</a> for their generous and ongoing contribution of a dedicated Arch Linux server. You too can have a dedicated Arch Linux server hosted by SevenL...head over to their <a href="https://www.sevenl.net/dedicated-server/?utm_source=archlinux-org&amp;utm_medium=sponsored-banner&amp;utm_campaign=thanks-to-sevenl" title="SevenL Networks - dedicated server hosting">website</a> for more details.</p>
+    <div style="text-align:center">
     <a href="https://www.sevenl.net/?utm_source=archlinux-org&amp;utm_medium=sponsored-banner&amp;utm_campaign=thanks-to-sevenl" title="SevenL Networks - Dedicated Arch Linux servers"><img src="/media/sevenl_button.png" class="" title="A big Thank You to SevenL Networks for their generous contribution" alt="We would like to express our thanks to SevenL Networks for their generous contribution" /></a>
-    <br />
+    </div>
     <p>More thanks go to <a href="http://www.airvm.com/VirtualServers" title="AirVM.com">AirVM.com</a> for contributing a VMWare-based Virtual Machine.</p>
+    <div style="text-align:center">
     <a href="http://www.airvm.com/VirtualServers" title="AirVM.com - Your Green Technology Partner"><img src="/media/airvm_button.jpg" class="" title="AirVM.com - Your Green Technology Partner" alt="AirVM.com - Your Green Technology Partner" /></a>
-    <br />
+    </div>
     <h2 class="title">Past Donors</h2>
-    <table width="100%">
-        <tr>
-            <td style="font-size:x-small;vertical-align:top">
-            {% for donor in slice1 %}
-              {{ donor.name }}<br />
-            {% endfor %}
-            </td>
-            <td style="font-size:x-small;vertical-align:top">
-            {% for donor in slice2 %}
-              {{ donor.name }}<br />
-            {% endfor %}
-            </td>
-            <td style="font-size:x-small;vertical-align:top">
-            {% for donor in slice3 %}
-              {{ donor.name }}<br />
-            {% endfor %}
-            </td>
-            <td style="font-size:x-small;vertical-align:top">
-            {% for donor in slice4 %}
-              {{ donor.name }}<br />
-            {% endfor %}
-            </td>
-        </tr>
-    </table>
+    <ul id="donorlist">
+        {% for donor in donors %}
+        <li>{{ donor.name }}</li>{% endfor %}
+    </ul>
+    <div class="clear"/>
 </div>
-<br /><br />
 {% endblock %}