diff --git a/bakerydemo/blog/models.py b/bakerydemo/blog/models.py index 3240567..f8d7fa4 100644 --- a/bakerydemo/blog/models.py +++ b/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 diff --git a/bakerydemo/static/css/main.css b/bakerydemo/static/css/main.css index d2332c4..7bb2af1 100644 --- a/bakerydemo/static/css/main.css +++ b/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; +} diff --git a/bakerydemo/templates/base/include/header-index.html b/bakerydemo/templates/base/include/header-index.html new file mode 100644 index 0000000..dbb0485 --- /dev/null +++ b/bakerydemo/templates/base/include/header-index.html @@ -0,0 +1,10 @@ +{% load wagtailcore_tags wagtailimages_tags %} + +
+
+
+

{{ page.title }}

+

{{ page.introduction }}

+
+
+
diff --git a/bakerydemo/templates/blog/blog_index_page.html b/bakerydemo/templates/blog/blog_index_page.html index 544daf2..e73c30d 100644 --- a/bakerydemo/templates/blog/blog_index_page.html +++ b/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" %}
+ {% if tag %}
-
- {% if tag %} -

Posts tagged with "{{ tag }}":

- {% endif %} - {% for blog in blogs %} -
-

{{ blog.title }}

- {{ blog.body|truncatewords_html:10 }} -
- {% endfor %} +
+

Viewing all blog posts by {{ tag }}

+ {% endif %} + + {% if page.get_child_tags %} + + {% endif %} + +
+ {% if blogs %} + {% for blog in blogs %} +
  • + +
    + {% image blog.image fill-850x450-c50 as image %} + {{ image.alt }} +
    +
    +

    {{ blog.title }}

    +

    {{ blog.introduction|truncatewords:15 }}

    +
    + +
    + {{ blog.date_published }} by + {% for author in blog.authors %} + {{ author }}{% if not forloop.last %}, {% endif %} + {% endfor %} +
    + +     +
    • + {% endfor %} + {% else %} +
    +

    Oh, snap. Looks like we were too busy baking to write any blog posts. Sorry.

    +
    + {% endif %} +
    {% endblock content %} diff --git a/bakerydemo/templates/blog/blog_page.html b/bakerydemo/templates/blog/blog_page.html index cdbfe0b..056e952 100644 --- a/bakerydemo/templates/blog/blog_page.html +++ b/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 %}
    @@ -22,6 +23,19 @@

    {{ page.introduction }}

    {% endif %} + {# TODO These two loops could be consolidated into one, with styling #} +
    + {{ page.date_published }} by {% for author in page.authors %} + {{ author }}{% if not forloop.last %}, {% endif %} + {% endfor %} +
    + +
    + {% for author in page.authors %} + {% image author.image width-100 class="blog-avatar" %} + {% endfor %} +
    + {{ page.body }} {% if page.get_tags %}