changeset 111:23efa49f5e29

Bootstrap: flyers page.
author Brian Neal <bgneal@gmail.com>
date Sat, 19 Oct 2013 17:18:25 -0500
parents 03f51d405400
children 4bd65fe0911f
files gigs/urls.py madeira/templates/gigs/flyers.html madeira/templates/pagination.html static/css/theme.css
diffstat 4 files changed, 40 insertions(+), 22 deletions(-) [+]
line wrap: on
line diff
--- a/gigs/urls.py	Sat Oct 19 14:20:02 2013 -0500
+++ b/gigs/urls.py	Sat Oct 19 17:18:25 2013 -0500
@@ -14,6 +14,7 @@
        ListView.as_view(
            queryset=Gig.objects.exclude(flyer__isnull=True).select_related('flyer'),
            template_name='gigs/flyers.html',
+           paginate_by=10,
            context_object_name='gig_list'),
        name='gigs-flyers')
 )
--- a/madeira/templates/gigs/flyers.html	Sat Oct 19 14:20:02 2013 -0500
+++ b/madeira/templates/gigs/flyers.html	Sat Oct 19 17:18:25 2013 -0500
@@ -1,19 +1,23 @@
 {% extends 'base.html' %}
+{% load core_tags %}
 {% block title %}The Madeira | Flyer Gallery{% endblock %}
+{% block navblock %}{% navbar 'flyers' %}{% endblock %}
 {% block content %}
 <h1>Show Flyer Gallery</h1>
 {% if gig_list %}
-   <center>
+   {% include 'pagination.html' %}
    {% for gig in gig_list %}
-      <p>
+      <div class="text-centered">
       {% if gig.title %}
-      <img src="{{ gig.flyer.image.url }}" alt="{{ gig.title }}" title="{{ gig.title }} : {{ gig.date|date:"F d, Y" }}" />
+      <img src="{{ gig.flyer.image.url }}" alt="{{ gig.title }}" title="{{ gig.title }} : {{ gig.date|date:"F d, Y" }}"
+         class="img-responsive img-flyer" />
       {% else %}
-      <img src="{{ gig.flyer.image.url }}" alt="{{ gig.date|date:"F d, Y" }}" title="{{ gig.date|date:"F d, Y" }}" />
+      <img src="{{ gig.flyer.image.url }}" alt="{{ gig.date|date:"F d, Y" }}" title="{{ gig.date|date:"F d, Y" }}"
+         class="img-responsive img-flyer" />
       {% endif %}
-      </p>
+      </div>
    {% endfor %}
-   </center>
+   {% include 'pagination.html' %}
 {% else %}
 <p>No flyers available at this time.</p>
 {% endif %}
--- a/madeira/templates/pagination.html	Sat Oct 19 14:20:02 2013 -0500
+++ b/madeira/templates/pagination.html	Sat Oct 19 17:18:25 2013 -0500
@@ -1,15 +1,23 @@
-<div class="pagination">
-    <span class="step-links">
-        {% if page_obj.has_previous %}
-            <a href="?page={{ page_obj.previous_page_number }}">&laquo; Previous</a>
-        {% endif %}
+<div class="text-right">
+   <ul class="pagination">
+      {% if page_obj.has_previous %}
+         <li><a href="?page={{ page_obj.previous_page_number }}">«</a></li>
+      {% else %}
+         <li class="disabled"><a href="#">«</a></li>
+      {% endif %}
 
-        <span class="current">
-            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
-        </span>
+      {% for n in page_obj.paginator.page_range %}
+         {% if n == page_obj.number %}
+            <li class="active"><a href="">{{ n }}</a></li>
+         {% else %}
+            <li><a href="?page={{ n }}">{{ n }}</a></li>
+         {% endif %}
+      {% endfor %}
 
-        {% if page_obj.has_next %}
-            <a href="?page={{ page_obj.next_page_number }}">Next &raquo;</a>
-        {% endif %}
-    </span>
+      {% if page_obj.has_next %}
+         <li><a href="?page={{ page_obj.next_page_number }}">»</a></li>
+      {% else %}
+         <li class="disabled"><a href="#">»</a></li>
+      {% endif %}
+   </ul>
 </div>
--- a/static/css/theme.css	Sat Oct 19 14:20:02 2013 -0500
+++ b/static/css/theme.css	Sat Oct 19 17:18:25 2013 -0500
@@ -1,4 +1,9 @@
-body { 
-   padding-top: 50px;
-   padding-bottom: 20px;
-}
+body { 
+   padding-top: 50px;
+   padding-bottom: 20px;
+}
+.img-flyer {
+   margin: 0 auto;
+   margin-top: 1em;
+   margin-bottom: 1em;
+}