damned-lies r1198 - in trunk: . common/templatetags media/css templates templates/languages

[stephaner svn gnome org]

Author: stephaner
Date: Sun Nov 30 22:08:04 2008
New Revision: 1198
URL: http://svn.gnome.org/viewvc/damned-lies?rev=1198&view=rev

Log:
2008-11-30  StÃphane Raimbault  <stephane raimbault gmail com>

	Replace the CSS 3 attribute 'column-count' (and relatives) by a
	more ordinary CSS layout (fix strange behaviour with FF3 and works
	with IE).
	
	* common/templatetags:
	* common/templatetags/__init__.py:
	* common/templatetags/list_to_three_columns.py: New template tag
	to split a list into 3 columns.	
	* media/css/style.css: Added 3 columns layout.
	* settings_sample.py: Added common app.
	* templates/languages/language_list.html: 
	* templates/module_list.html: Use the new template tag.


Added:
   trunk/common/templatetags/
   trunk/common/templatetags/__init__.py
   trunk/common/templatetags/list_to_three_columns.py
Modified:
   trunk/ChangeLog
   trunk/media/css/style.css
   trunk/settings_sample.py
   trunk/templates/languages/language_list.html
   trunk/templates/module_list.html

Added: trunk/common/templatetags/__init__.py
==============================================================================

Added: trunk/common/templatetags/list_to_three_columns.py
==============================================================================
--- (empty file)
+++ trunk/common/templatetags/list_to_three_columns.py	Sun Nov 30 22:08:04 2008
@@ -0,0 +1,55 @@
+# -*- coding: utf-8 -*-
+#
+# Based on http://www.djangosnippets.org/snippets/889/
+# Copyright (c) 2008 StÃphane Raimbault <stephane raimbault gmail com>
+#
+# This file is part of Damned Lies.
+#
+# Damned Lies is free software; you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation; either version 2 of the License, or
+# (at your option) any later version.
+#
+# Damned Lies is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with Damned Lies; if not, write to the Free Software Foundation, Inc.,
+# 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
+
+"""Splits query results list into multiple sublists for template display.
+   The order is column 1, then 3 and 2 to respect the CSS order."""
+from django import template
+
+register = template.Library()
+
+class SplitListNode(template.Node):
+    def __init__(self, list, new_list):
+        self.list = list
+        self.new_list = new_list
+
+    def split_seq(self, list):
+        # Simpler as a loop (KISS)
+        len_col1 = len(list[0::3])
+        len_col2 = len(list[1::3])
+        len_col3 = len(list[2::3])
+        # Column 1
+        yield list[0:len_col1]
+        # Column 3
+        yield list[len_col1+len_col2:len_col1+len_col2+len_col3]
+        # Column 2
+        yield list[len_col1:len_col1+len_col2]
+
+    def render(self, context):
+        context[self.new_list] = self.split_seq(context[self.list])
+        return ''
+
+def list_to_three_columns(parser, token):
+    """Parse template tag: {% list_to_three_columns list as columns %}"""
+    bits = token.contents.split()
+    if bits[2] != 'as':
+        raise TemplateSyntaxError, "second argument to the list_to_three_columns tag must be 'as'"
+    return SplitListNode(bits[1], bits[3])
+list_to_three_columns = register.tag(list_to_three_columns)

Modified: trunk/media/css/style.css
==============================================================================
--- trunk/media/css/style.css	(original)
+++ trunk/media/css/style.css	Sun Nov 30 22:08:04 2008
@@ -7,18 +7,19 @@
  *  Decoration
  *  Separators
  */
+
 body * {
   font-family: verdana, arial, sans-serif;
 }
 
 div#content a {
-	color: #3465a4;
-	border-bottom: 1px dotted #888;
-	text-decoration: none;
+  color: #3465a4;
+  border-bottom: 1px dotted #888;
+  text-decoration: none;
 }
 
 div#content a:hover {
-	border-bottom: 1px solid #888;
+  border-bottom: 1px solid #888;
 }
 
 
@@ -86,18 +87,18 @@
 /* styling page content */
 
 h1 {
-	font-size: 1.5em;
-	color: #3f3f3f;
+  font-size: 1.5em;
+  color: #3f3f3f;
 }
 
 /* styling form widgets like bugzilla.gnome.org */
 input,textarea {
- border: 1px solid #6f6f6f;
+  border: 1px solid #6f6f6f;
 /* background: #dddddd; */
 }
 
 input.login_small {
- border-style: none;
+  border-style: none;
 }
 
 input:focus,textarea:focus {
@@ -105,12 +106,8 @@
   color: #000000;
 }
 
-/* select {
- border: groove
-} */
-
 option {
- border: 0px none #ffffff;
+  border: 0px none #ffffff;
 }
 
 input[type=radio] {
@@ -120,32 +117,58 @@
 /* footer */
 
 #footer {
-	text-align: center;
-	margin: 3em 3em 1em 3em;
-	border-top: 1px solid gray;
-	padding-top: 1.5em;
-	color: #888;
-	font-size: 80%;
-	clear: both;
+  text-align: center;
+  margin: 3em 3em 1em 3em;
+  border-top: 1px solid gray;
+  padding-top: 1.5em;
+  color: #888;
+  font-size: 80%;
+  clear: both;
 }
 
 #footer ul {
-	margin: 0;
-	padding: 0;
+  margin: 0;
+  padding: 0;
 }
 
 #footer li {
-	display: inline;
-	padding: 0 1em;
+  display: inline;
+  padding: 0 1em;
 }
 
 #footer a {
-	color: #3465a4;
-	border-bottom: 1px dotted #888;
-	text-decoration: none;
+  color: #3465a4;
+  border-bottom: 1px dotted #888;
+  text-decoration: none;
 }
 
 #footer a:hover {
-	border-bottom: 1px solid #888
+ border-bottom: 1px solid #888
 }
 
+.col3_container {
+  float: left;
+  width: 100%;
+  overflow: hidden;
+}
+
+.col3_container ul {
+  margin-top: 0;
+}
+
+.col3_left {
+  float: left;
+  margin: 0;
+  width: 33.3%;
+}
+
+.col3_middle {
+  margin-left: 33.3%;
+  margin-right: 33.3%;
+}
+
+.col3_right {
+  float: right;
+  margin: 0;
+  width: 33.3%;
+}

Modified: trunk/settings_sample.py
==============================================================================
--- trunk/settings_sample.py	(original)
+++ trunk/settings_sample.py	Sun Nov 30 22:08:04 2008
@@ -101,6 +101,7 @@
     'django.contrib.sites',
     'django.contrib.admin',
 #    'django_openid',
+    'common',
     'languages',
     'people',
     'stats',

Modified: trunk/templates/languages/language_list.html
==============================================================================
--- trunk/templates/languages/language_list.html	(original)
+++ trunk/templates/languages/language_list.html	Sun Nov 30 22:08:04 2008
@@ -8,18 +8,22 @@
 
 <h1>{% trans "GNOME Languages" %}</h1>
 
-{% blocktrans count languages|length as numb %}GNOME is being translated to following {{ numb }} language.
+<p>{% blocktrans count languages|length as numb %}GNOME is being translated to following {{ numb }} language.
 {% plural %}GNOME is being translated to following {{ numb }} languages.
-{% endblocktrans %}
+{% endblocktrans %}</p>
 
-<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
-<ul class="foot">
-{% for lang in languages %}
-<li style="font-size: 120%;">
-  <a href="{{ lang.get_team_url }}">{{ lang.get_name }}</a>
-</li>
-{% endfor %}
-</ul>
+{% load list_to_three_columns %}
+<div class="col3_container">
+  {% list_to_three_columns languages as columns %}
+  {% for column in columns %}
+  <div class="{% cycle 'col3_left' 'col3_right' 'col3_middle' %}">
+    <ul class="foot">
+      {% for lang in column %}
+      <li><a href="{{ lang.get_team_url }}">{{ lang.get_name }}</a></li>
+      {% endfor %}
+    </ul>
+  </div>
+  {% endfor %}
 </div>
 
 </div>

Modified: trunk/templates/module_list.html
==============================================================================
--- trunk/templates/module_list.html	(original)
+++ trunk/templates/module_list.html	Sun Nov 30 22:08:04 2008
@@ -10,12 +10,18 @@
 
 <p>{% trans "Select a module below to see some of the damned lies about it:" %}</p>
 
-<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
-<ul class="foot">
-{% for mod in modules %}
-  <li><a href="{% url stats.views.module mod.name %}">{{ mod.get_description }} </a></li>
-{% endfor %}
-</ul>
+{% load list_to_three_columns %}
+<div class="col3_container">
+  {% list_to_three_columns modules as columns %}
+  {% for l in columns %}
+  <div class="{% cycle 'col3_left' 'col3_right' 'col3_middle' %}">
+    <ul class="foot">
+      {% for m in l %}
+      <li><a href="{% url stats.views.module m.name %}">{{ m.get_description }}</a></li>
+      {% endfor %}
+    </ul>
+  </div>
+  {% endfor %}
 </div>
 
 </div>