Merge branch 'master' of https://github.com/wagtail/bakerydemo

bakerydemo/breads/models.py

@@ -129,26 +129,26 @@ class BreadsIndexPage(BasePageFieldsMixin, Page):
 
     subpage_types = ['BreadPage']
 
-    def get_context(self, request):
-        context = super(BreadsIndexPage, self).get_context(request)
-
-        # Get the full unpaginated listing of resource pages as a queryset -
-        # replace this with your own query as appropriate
-        all_resources = self.get_children().live()
-
-        paginator = Paginator(all_resources, 5)  # Show 5 resources per page
+    def get_breads(self):
+        return BreadPage.objects.live().descendant_of(
+            self).order_by('-first_published_at')
 
+    def paginate(self, request, *args):
         page = request.GET.get('page')
+        paginator = Paginator(self.get_breads(), 12)
         try:
-            resources = paginator.page(page)
+            pages = paginator.page(page)
         except PageNotAnInteger:
-            # If page is not an integer, deliver first page.
-            resources = paginator.page(1)
+            pages = paginator.page(1)
         except EmptyPage:
-            # If page is out of range (e.g. 9999), deliver last page of results.
-            resources = paginator.page(paginator.num_pages)
+            pages = paginator.page(paginator.num_pages)
+        return pages
+
+    def get_context(self, request):
+        context = super(BreadsIndexPage, self).get_context(request)
+
+        breads = self.paginate(request, self.get_breads())
+
+        context['breads'] = breads
 
-        # make the variable 'resources' available on the template
-        context['resources'] = resources
-        context['paginator'] = paginator
         return context

bakerydemo/static/css/main.css

@@ -526,6 +526,12 @@ li.has-submenu a.allow-toggle {
   background-color: #fff;
 }
 
+/* Pagination navigation */
+nav[role=pagination] {
+  margin-top: 50px;
+  text-align: center;
+}
+
 /* Location list page */
 .location-list-item {
   text-align: center;
@@ -592,7 +598,6 @@ time.location-time {
 }
 
 /* Blog styles */
-
 .blog-byline {
     margin-top: -40px;
     margin-bottom: 20px;
@@ -698,6 +703,91 @@ span.outline {
   padding: 3px 6px;
   text-transform: uppercase;
 }
+
+/* Bread styles */
+/* Bread listview */
+.bread-list-item {
+  border: 1px solid rgba(0,0,0,0.1);
+  border-radius: 3px;
+  margin: 12px;
+  overflow: hidden;
+}
+
+.bread-list-item h2 {
+  font-weight: 300;
+}
+
+@media (min-width: 992px) {
+  .bread-list-item {
+    width: 47%;
+  }
+}
+
+.bread-list-item .image {
+  background-color: #eb7400;
+  margin: 0;
+  max-width: 180px;
+  max-height: 180px;
+  min-width: 180px;
+  min-height: 180px;
+  padding: 0;
+}
+
+.bread-list-item .image:hover img {
+  opacity: 0.3;
+}
+
+.bread-list-item img {
+  margin: 0;
+  width: auto;
+}
+
+.bread-list-item ul {
+  padding-left: 2px;
+}
+
+.bread-list-item li {
+  list-style: none;
+}
+
+.bread-list-item li span {
+  color: #777;
+  display: inline-block;
+  font-weight: 600;
+  width: 70px;
+}
+
+/* Bread detail page */
+.bread-detail .introduction {
+  color: #777;
+  font-size: 1.4em;
+  margin-top: 40px;
+}
+
+.bread-detail figure {
+  margin: 35px auto 20px auto;
+  overflow: hidden;
+}
+
+.bread-detail figure img {
+  width: auto;
+}
+
+.bread-detail ul.bread-meta {
+  list-style: none;
+  padding-left: 0;
+}
+
+.bread-detail ul.bread-meta li ul {
+  padding-left: 0;
+}
+
+.bread-detail ul.bread-meta li ul li {
+  border-bottom: 1px solid #ccc;
+  list-style: none;
+  max-width: 450px;
+}
+
 /* No gutters */
 .row.no-gutters {
   margin-right: 0;
@@ -717,3 +807,14 @@ span.outline {
   display:         flex;
   flex-wrap: wrap;
 }
+
+@media (min-width: 970px) {
+  .hidden-md-up {
+    display: none;
+  }
+}
+@media (max-width: 970px) {
+  .hidden-md-down {
+    display: none;
+  }
+}

bakerydemo/templates/breads/bread_page.html

@@ -2,24 +2,66 @@
 {% load wagtailimages_tags %}
 
 {% block content %}
-    <h1>{{ page.title }}</h1>
-    <figure>
-      {% image self.image fill-600x600 %}
-    </figure>
+<div class="container bread-detail">
+    <div class="row">
+        <div class="col-md-12">
+            <div class="col-md-6">
+                <div class="row">
+                    <h1>{{ page.title }}</h1>
+                    
+                    <figure class="hidden-md-up">
+                        {% image page.image width-500 %}
+                    </figure>
+                    
+                    {% if page.introduction %}
+                        <p class="introduction">
+                            {{ page.introduction }}
+                        </p>
+                    {% endif %}
 
-    <p>{{ page.origin }}</p>
-    <p>{{ page.bread_type }}</p>
-    {% with ingredients=page.ingredients.all %}
-        {% if ingredients %}
-            <h3>Ingredients:</h3>
-            <ul>
-                {% for ingredient in ingredients %}
-                    <li style="display: inline">
-                        {{ ingredient.name }}
-                    </li>
-                {% endfor %}
-            </ul>
-        {% endif %}
-    {% endwith %}
-    {{ page.body }}
+                    {{ page.body }}
+                </div>
+            </div>
+
+            <div class="col-md-5 col-md-offset-1">
+                <div class="row">
+                    <figure class="hidden-md-down">
+                        {% image page.image width-500 %}
+                    </figure>
+                    <ul class="bread-meta">
+                        {% if page.origin %}
+                            <li>
+                                <h4>Origin</h4>
+                                <p>{{ page.origin }}</p>
+                            </li>
+                        {% endif %}
+                        {% if page.bread_type %}
+                            <li>
+                                <h4>Type</h4>
+                                <p>{{ page.bread_type }}</p>
+                            </li>      
+                        {% endif %}
+                        {% with ingredients=page.ingredients.all %}
+                            {% if ingredients %}
+                                <li>
+                                    <h4>Ingredients</h4>
+                                    <ul>
+                                        {% for ingredient in ingredients %}
+                                            <li>
+                                                {{ ingredient.name }}
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                </li>
+                            {% endif %}
+                        {% endwith %}
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+
+        </div>
+    </div>
+</div>
 {% endblock content %}

bakerydemo/templates/breads/breads_index_page.html

@@ -1,40 +1,56 @@
 {% extends "base.html" %}
-{% load wagtailimages_tags %}
+{% load wagtailcore_tags navigation_tags wagtailimages_tags %}
 
 {% block content %}
-    <p>{{ page.introduction}}</p>
+<div class="container">
+    <div class="row">
+        <div class="col-md-12">
+            <h1>{{ page.title }}</h1>
+            <p>{{ page.introduction}}</p>
+        </div>
+    </div>
+</div>
 
-    {% for bread in resources %}
-        <div>
-            <div class="col-xs-12">
-                <div><a href="{{ bread.slug }}">{{ bread.title }}</a></div>
+<div class="container">
+    <div class="row bread-list">
+    {% for bread in breads %}
+            <div class="col-xs-12 col-md-6 bread-list-item">
+            
+                <div class="row">
+                    <div class="col-xs-4 col-sm-4 image">
+                    <a href="{% pageurl bread %}">
+                        {% image bread.image fill-180x180-c100 as image %}
+                                        <img src="{{ image.url }}" width="{{ image.width }}" height="{{ image.height }}" alt="{{ image.alt }}" class="" />
+                        </div>
+                    </a>
+                    <div class="col-xs-6 col-sm-7">
+                        <a href="{% pageurl bread %}">
+                            <h2>{{ bread.title }}</h2>
+                        </a>
+                        <ul class="bread-meta">
+                        {% if bread.origin %}
+                            <li><span>Origin</span> {{ bread.origin }}</li>
+                        {% endif %}
+                        {% if bread.bread_type %}
+                            <li><span>Type</span> {{ bread.bread_type }}</li>        
+                        {% endif %}
+                        </ul>
+                    </div>
+                </div>
+            </a>
             </div>
-        </div>
     {% endfor %}
+    </div>
+</div>
 
-	{% if resources.has_other_pages %}
-	<div class="clearfix">
-	  <div class="pagination-wrapper">
-	    <ul class="pagination">
-	      {% if resources.has_previous %}
-	        <li class="arrows"><a href="?q={{ query_string|urlencode }}&amp;page={{ resources.previous_page_number }}" class="arrow-left"></a></li>
-	      {% else %}
-	        <li class="arrows disabled"><span class="arrow-left"></span></li>
-	      {% endif %}
-	      {% for i in resources.paginator.page_range %}
-	        {% if resources.number == i %}
-	          <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
-	        {% else %}
-	          <li><a href="?q={{ query_string|urlencode }}&amp;page={{ i }}">{{ i }}</a></li>
-	        {% endif %}
-	      {% endfor %}
-	      {% if resources.has_next %}
-	        <li class="arrows"><a href="?q={{ query_string|urlencode }}&amp;page={{ resources.next_page_number }}"><i class="arrow-right"></i></a></li>
-	      {% else %}
-	        <li class="arrows disabled"><span><i class="arrow-right"></i></span></li>
-	      {% endif %}
-	    </ul>
-	  </div>
-	</div>
-	{% endif %}
+
+{% if breads.paginator.count > 1 %}
+<div class="container">
+    <div class="row">
+        <div class="col-md-12">
+        {% include "includes/pagination.html" with subpages=breads %}
+        </div>
+    </div>
+</div>
+{% endif %}
 {% endblock content %}

bakerydemo/templates/includes/pagination.html

@@ -0,0 +1,33 @@
+{% load navigation_tags %}
+
+<nav role="pagination" aria-label="Pagination">
+    <ul class="pagination">
+        {% if subpages.has_previous %}
+            <li class="page-item">
+                <a href="?page={{ subpages.previous_page_number }}" class="page-link previous arrows">previous</a>
+            </li>
+            {% else %}
+            <li class="page-item disabled">
+                <a class="page-link">previous</a>
+            </li>
+        {% endif %}
+
+        {% for i in subpages.paginator.page_range %}
+            {% if subpages.number == i %}
+              <li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
+            {% else %}
+              <li class="page-item"><a href="?page={{ query_string|urlencode }}&amp;page={{ i }}" class="page-link">{{ i }}</a></li>
+            {% endif %}
+          {% endfor %}
+
+        {% if subpages.has_next %}
+            <li class="page-item">
+                <a href="?page={{ subpages.next_page_number }}" class="page-link next arrows">next</a>
+            </li>
+            {% else %}
+            <li class="page-item disabled">
+                <a class="page-link">next</a>
+            </li>
+        {% endif %}
+    </ul>
+</nav>