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

bakerydemo/blog/models.py

@@ -118,7 +118,7 @@ class BlogIndexPage(BasePageFieldsMixin, RoutablePageMixin, Page):
         context = super(BlogIndexPage, self).get_context(request)
         context['blogs'] = BlogPage.objects.descendant_of(
             self).live().order_by(
-            '-first_published_at')
+            '-date_published')
         return context
 
     @route('^tags/$', name='tag_archive')
@@ -138,10 +138,29 @@ class BlogIndexPage(BasePageFieldsMixin, RoutablePageMixin, Page):
                 messages.add_message(request, messages.INFO, msg)
             return redirect(self.url)
 
-        blogs = BlogPage.objects.filter(tags=tag).live().descendant_of(self)
+        blogs = self.blogs(tag=tag)
 
         context = {
             'tag': tag,
             'blogs': blogs
         }
         return render(request, 'blog/blog_index_page.html', context)
+
+    def blogs(self, tag=None):
+        """
+        Return the child BlogPage objects for this BlogPageIndex. Optional
+        filter by tag
+        """
+        blogs = BlogPage.objects.live().descendant_of(self)
+        if tag:
+            blogs = blogs.filter(tags=tag)
+        return blogs
+
+    def get_child_tags(self):
+        """
+        Returns the list of Tags for child pages.
+        """
+        tags = [x.get_tags for x in self.blogs()]
+        tags = [item for sublist in tags for item in sublist]
+        tags = sorted(set(tags))
+        return tags

bakerydemo/static/css/main.css

@@ -504,7 +504,7 @@ li.has-submenu a.allow-toggle {
   color: #ccc;
   font-family: 'Lato', sans-serif;
   font-size: 14px;
-  margin-bottom: 0px; 
+  margin-bottom: 0px;
   padding-left: 0px;
 }
 .breadcrumb a, .breadcrumb .active {
@@ -591,6 +591,113 @@ time.location-time {
   z-index: 1;
 }
 
+/* Blog styles */
+
+.blog-byline {
+    margin-top: -40px;
+    margin-bottom: 20px;
+}
+.blog-avatar {
+    width: unset;
+    display: inline;
+}
+.blog-avatars {
+    margin-bottom: 20px;
+}
+
+/* Blog list view */
+.blog-tags>li {
+  border-right: 1px solid rgba(0,0,0,0.1);
+  font-size: 0.9em;
+  margin-left: -6px;
+  padding: 4px 18px;
+  text-transform: uppercase;
+}
+.blog-tags>li:first-child {
+  margin-left: 0;
+  border-left: 1px solid rgba(0,0,0,0.1);
+}
+.blog-tags>li:hover {
+  background-color: rgba(0,0,0,0.1);
+}
+
+.blog-list li {
+  list-style: none;
+}
+
+@media (min-width: 1025px) {
+.blog-list li:first-of-type, .blogpage-listing li:first-of-type,
+.blog-list li:nth-child(6), .blogpage-listing li:nth-child(6),
+.blog-list li:nth-child(7), .blogpage-listing li:nth-child(7),
+.blog-list li:nth-child(12), .blogpage-listing li:nth-child(12) {
+      width: 50%;
+    }
+}
+
+.blog-list-item {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20px;
+}
+
+.blog-list-item a {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+}
+
+.blog-list-item:hover img {
+    opacity: 0.3;
+}
+
+.blog-list-item .image {
+  overflow: hidden;
+  background-color: #eb7400;
+  flex: 1 0 auto;
+}
+
+.blog-list-item .image img {
+  min-height: 510px;
+  width: auto;
+  min-width: 100%;
+}
+
+.blog-list-item .text {
+  background: linear-gradient(to bottom, rgba(100,100,100,0) 0%,rgba(100,100,100,0.9) 23%,rgba(100,100,100,1) 50%);
+  margin-top: -150px;
+  padding: 20px;
+  position: relative;
+  z-index: 1;
+}
+
+.blog-list-item .text h2 {
+  color: #fff;
+  font-weight: 200;
+  margin-top: 0;
+}
+
+.blog-list-item .text p {
+  color: #e3e3e3;
+  font-size: 0.8em;
+  margin-bottom: 0;
+}
+
+.blog-list-item .footer {
+  background-color: #333;
+  color: #fff;
+  margin-top: 0;
+  padding: 20px;
+  position: relative;
+  z-index: 1;
+}
+
+span.outline {
+  border-radius: 3px;
+  border: 1px solid rgba(0,0,0,0.1);
+  font-size: 0.8em;
+  padding: 3px 6px;
+  text-transform: uppercase;
+}
 /* No gutters */
 .row.no-gutters {
   margin-right: 0;
@@ -602,3 +709,11 @@ time.location-time {
   padding-left: 0;
 }
 
+/* Bootstrap Equal height rows */
+.row-eq-height {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display:         flex;
+  flex-wrap: wrap;
+}

bakerydemo/templates/base/include/header-index.html

@@ -0,0 +1,10 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+
+<div class="container">
+    <div class="row">
+        <div class="col-md-12">
+            <h1>{{ page.title }}</h1>
+            <p>{{ page.introduction }}</p>
+        </div>
+    </div>
+</div>

bakerydemo/templates/blog/blog_index_page.html

@@ -1,22 +1,55 @@
 {% extends "base.html" %}
-{% load wagtailimages_tags %}
+{% load wagtailcore_tags navigation_tags wagtailimages_tags %}
 
 {% block content %}
-    {% include "base/include/header.html" %}
+    {% include "base/include/header-index.html" %}
 
     <div class="container">
+    {% if tag %}
         <div class="row">
-            <div class="col-md-7 col-md-offset-2">
-                {% if tag %}
-                    <h3>Posts tagged with "{{ tag }}":</h3>
-                {% endif %}
-                {% for blog in blogs %}
-                    <div>
-                        <h2><a href="{{ blog.url }}">{{ blog.title }}</a></h2>
-                        {{ blog.body|truncatewords_html:10 }}
+            <div class="col-md-12">
+                <p>Viewing all blog posts by <span class="outline">{{ tag }}</span></p>
+            </div>
+        </div>
+    {% endif %}
+
+    {% if page.get_child_tags %}
+        <ul class="blog-tags tags list-inline">
+            {% for tag in page.get_child_tags %}
+                <li><a href="{{ tag.url }}">{{ tag }}</a></li>
+            {% endfor %}
+        </ul>
+    {% endif %}
+
+        <div class="row row-eq-height blog-list">
+        {% if blogs %}
+            {% for blog in blogs %}
+                <li class="col-xs-12 col-sm-6 col-md-3 blog-list-item">
+                <a href="{% pageurl blog %}">
+                    <div class="image">
+                        {% image blog.image fill-850x450-c50 as image %}
+                        <img src="{{ image.url }}" width="{{ image.width }}" height="{{ image.height }}" alt="{{ image.alt }}" class="" />
+                    </div>
+                    <div class="text">
+                        <h2 class="blog-list-title">{{ blog.title }}</h2>
+                        <p>{{ blog.introduction|truncatewords:15 }}</p>
+                    </div>
+
+                    <div class="small footer">
+                        {{ blog.date_published }} by
+                        {% for author in blog.authors %}
+                            {{ author }}{% if not forloop.last %}, {% endif %}
+                        {% endfor %}
                     </div>
-                {% endfor %}
+                    
+                    </a>
+                </li>
+            {% endfor %}
+                {% else %}
+            <div class="col-md-12">
+                <p>Oh, snap. Looks like we were too busy baking to write any blog posts. Sorry.</p>
             </div>
+        {% endif %}
         </div>
     </div>
 {% endblock content %}

bakerydemo/templates/blog/blog_page.html

@@ -2,6 +2,7 @@
 {% load navigation_tags wagtailimages_tags %}
 
 {% block content %}
+
 {% image self.image fill-1920x600 as hero_img %}
 <div class="container-fluid hero" style="background-image:url('{{ hero_img.url }}')">
 <div class="hero-gradient-mask"></div>
@@ -22,6 +23,19 @@
                 <p class="intro">{{ page.introduction }}</p>
             {% endif %}
 
+            {# TODO These two loops could be consolidated into one, with styling #}
+            <div class="blog-byline">
+            {{ page.date_published }} by {% for author in page.authors %}
+                {{ author }}{% if not forloop.last %}, {% endif %}
+            {% endfor %}
+            </div>
+
+            <div class="blog-avatars">
+                {% for author in page.authors %}
+                    {% image author.image width-100 class="blog-avatar" %}
+                {% endfor %}
+            </div>
+
             {{ page.body }}
 
             {% if page.get_tags %}