Improve the news item layout by adding avatars and publish dates

static/css/main.css

@@ -281,3 +281,19 @@ fieldset {
     background-color:#111;
     border: 1px solid black;
 }
+
+.avatar {
+  border: 3px solid black;
+}
+
+.news-item .byline {
+  float: right;
+}
+
+.news-item .dateline {
+  clear: left;
+}
+
+.news-item h2 {
+  float: left;
+}

templates/news/index.html

@@ -1,18 +1,21 @@
 {% extends 'news_base.html' %}
 {% load static %}
 {% load markup %}
+{% load minecraft %}
 
 {% block title %}News{% endblock %}
 
 {% block content %}
 {% for post in items.object_list %}
-<div class='item' itemscope itemtype="http://schema.org/BlogPosting">
+<div class='item news-item' itemscope itemtype="http://schema.org/BlogPosting">
 <h2><a href="{{post.get_absolute_url}}" itemprop="name">{{post.title}}</a></h2>
-<div class="byline">By <span itemprop="author">{{post.author}}</span></div>
+<div class="byline">By <span itemprop="author">{{post.author}}</span> <div class="avatar">{% avatar post.author %}</div></div>
+<div class="dateline">On {{post.created}}</div>
 <div class="content" itemprop="articleBody">
     {{post.body|truncatewords:"100"|markdown}}
 </div>
 <div class="commentcount"><a href="{{post.get_absolute_url}}"><span itemprop="interactionCount">{{post.comments.all|length}} comment{{post.comments.all|length|pluralize}}</span> &raquo;</a></div>
+<br style="clear:both"/>
 </div>
 {% endfor %}
 

templates/news/view.html

@@ -6,12 +6,14 @@
 {% block title %}News - {{item.title}}{% endblock %}
 
 {% block content %}
-<div class="item" itemscope itemtype="http://schema.org/BlogPosting">
-<h2><a href="{{post.get_absolute_url}}" itemprop="name">{{item.title}}</a></h2>
-<div class="byline">By <span itemprop="author">{{item.author}}</span></div>
+<div class="item news-item" itemscope itemtype="http://schema.org/BlogPosting">
+<h2><a href="{{item.get_absolute_url}}" itemprop="name">{{item.title}}</a></h2>
+<div class="byline">By <span itemprop="author">{{item.author}}</span> <div class="avatar">{% avatar item.author %}</div></div>
+<div class="dateline">On {{item.created}}</div>
 <div class="content" itemprop="articleBody">
     {{item.body|markdown}}
 </div>
+<br style="clear:both"/>
 </div>
 <div class="comments">
 <h3>Comments</h3>