Minimal styling for article list pages [bug 607296]

apps/wiki/__init__.py

@@ -1,2 +1,3 @@
 DIFF_WRAP_COLUMN = 40
 TEMPLATE_TITLE_PREFIX = 'Template:'
+DOCUMENTS_PER_PAGE = 50

apps/wiki/templates/wiki/list_documents.html

@@ -9,16 +9,21 @@
 {% endif %}
 
 {% block content %}
-  <div id="breadcrumbs">
-    {{ _('You are here:') }}
-    {{ breadcrumbs(crumbs) }}
-  </div>
-  <h1>{% if category %}{{ category }}{% else %}{{ _('All Articles') }}{% endif %}</h1>
-  <div id="document-list">
-    <ul>
-      {% for doc in documents %}
-        <li><a href="{{ doc.get_absolute_url() }}">{{ doc.title }}</a></li>
-      {% endfor %}
-    </ul>
-  </div>
+  <article id="document-list" class="main">
+    <div id="breadcrumbs">
+      {{ _('You are here:') }}
+      {{ breadcrumbs(crumbs) }}
+    </div>
+    <h1>{% if category %}{{ category }}{% else %}{{ _('All Articles') }}{% endif %}</h1>
+    {% if documents.object_list %}
+      <ul class="documents">
+        {% for doc in documents.object_list %}
+          <li><a href="{{ doc.get_absolute_url() }}">{{ doc.title }}</a></li>
+        {% endfor %}
+      </ul>
+      {{ documents|paginator }}
+    {% else %}
+      <p>{{ _('There are no articles.') }}</p>
+    {% endif %}
+  </article>
 {% endblock %}

apps/wiki/tests/test_templates.py

@@ -381,14 +381,14 @@ class DocumentListTests(TestCaseBase):
         doc = pq(response.content)
         cat = self.doc.category
         eq_(Document.objects.filter(category=cat, locale=self.locale).count(),
-            len(doc('#document-list li')))
+            len(doc('#document-list ul.documents li')))
 
     def test_all_list(self):
         """Verify the all documents list view."""
         response = self.client.get(reverse('wiki.all_documents'))
         doc = pq(response.content)
         eq_(Document.objects.filter(locale=self.locale).count(),
-            len(doc('#document-list li')))
+            len(doc('#document-list ul.documents li')))
 
 
 class DocumentRevisionsTests(TestCaseBase):

apps/wiki/views.py

@@ -19,6 +19,8 @@ from access.decorators import permission_required
 from notifications import create_watch, destroy_watch
 from sumo.helpers import urlparams
 from sumo.urlresolvers import reverse
+from sumo.utils import paginate
+from wiki import DOCUMENTS_PER_PAGE
 from wiki.forms import DocumentForm, RevisionForm, ReviewForm
 from wiki.models import (Document, Revision, HelpfulVote, CATEGORIES,
                          OPERATING_SYSTEMS, FIREFOX_VERSIONS,
@@ -137,6 +139,8 @@ def list_documents(request, category=None):
             category = unicode(dict(CATEGORIES)[category_id])
         except KeyError:
             raise Http404
+
+    docs = paginate(request, docs, per_page=DOCUMENTS_PER_PAGE)
     return jingo.render(request, 'wiki/list_documents.html',
                         {'documents': docs,
                          'category': category})

media/css/wiki.css

@@ -92,6 +92,7 @@ ol.breadcrumbs {
 #main-content article.main {
     background: transparent url(../img/wiki/bkg.article.jpg) no-repeat right top;
     font-size: 13px;
+    min-height: 450px;
     padding: 14px 20px 0 0;
 }
 
@@ -916,6 +917,59 @@ summary.h2 {
     font-size: 24px;
 }
 
+/* Document list pages */
+#document-list ul.documents {
+    margin: 10px 0;
+}
+
+#document-list ul.documents li {
+    font-size: 14px;
+    list-style: none;
+    padding: 5px 0;
+}
+
+ol.pagination {
+    border-top: solid 1px #9ACCF7;
+    font-family: Verdana;
+    margin: 20px 0;
+    padding: 20px 0;
+}
+
+ol.pagination li {
+    float: left;
+    padding: 0 2px;
+}
+
+ol.pagination li.prev {
+    padding-left: 0;
+}
+
+ol.pagination li a {
+    float: left;
+    padding: 3px 8px 5px;
+}
+
+ol.pagination li a:hover {
+    text-decoration: underline;
+}
+
+ol.pagination li.prev a {
+    padding-left: 0;
+}
+
+ol.pagination li.selected a {
+    background: #447bc4;
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    color: #fff;
+    cursor: default;
+}
+
+ol.pagination li.selected a:hover {
+    text-decoration:none;
+}
+
 /* Revision history */
 #revision-history {
     color: #666;