Merge pull request creativecommons#328 from creativecommons/update_author_post

Update author posts page

Author: Dhruvi16

themes/vocabulary_theme/templates/author.html

@@ -1,20 +1,34 @@
 {% extends "layout.html" %}
 
-{% from "macros/posts.html" import render_posts %}
+{% from "macros/author_posts.html" import render_author_posts %}
 {% from "macros/author_name.html" import render_author_name %}
 
-{% block title %}{{ render_author_name(this) + ' - ' + this.parent.parent.children.get('entries').title  }}{% endblock %}
-{% block header %}{{ this.parent.parent.children.get('entries').title }}{% endblock %}
 {% block body %}
-  <h2>{{ render_author_name(this) }}</h2>
-  {% if this.about %}
-    {% if this.md5_hashed_email %}
-      <img src="https://secure.gravatar.com/avatar/{{ this.md5_hashed_email }}?size=200" alt="gravatar" style="float:right;" class="px-3 pb-3" />
-    {% endif %}
-    {{ this.about }}
-  {% endif %}
-  <h3>Posts</h3>
-    {{ render_posts(this.children) }}
-  <hr/>
-  <p class="text-muted"><strong><a href="{{ this.parent|url }}">All Authors</a></strong></p>
+<div class="author-posts">
+  <div class="title">
+    <div class="container">
+      <div class="columns">
+        <div class="column is-2">
+          {% if this.about %}
+            {% if this.md5_hashed_email %}
+              <figure class="image profile">
+                <img class="profile" src="https://secure.gravatar.com/avatar/{{ this.md5_hashed_email }}?size=200">
+              </figure>
+            {% endif %}
+          {% endif %}
+        </div>
+        <div class="column is-8">
+          <h2>{{ render_author_name(this) }}</h2>
+          {% if this.about %}
+            <div class="about">{{ this.about }}</div>
+          {% endif %}
+          <a class="button small" href="{{ this.parent|url }}">See all authors</a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="posts container">
+    {{ render_author_posts(this.children) }}
+  </div>
+</div>
 {% endblock %}

themes/vocabulary_theme/templates/macros/author_posts.html

@@ -0,0 +1,19 @@
+{% from "macros/author_name.html" import render_author_name %}
+
+{% macro render_author_posts(posts) %}
+  <div class="columns is-multiline">
+    {% for post in posts %}
+      {% set author = post.parent.parent.children.get('authors').children.get(post.author) %}
+      <article class="card entry-post horizontal no-border blog-entry column is-one-third">
+        <div class="blog-content">
+          <h4 class="b-header"><a class="blog-title has-color-dark-slate-gray" href="{{ post|url }}">{{ post.title }}</a></h4>
+          <span class="blog-author">by <a href="{{ author|url }}">{{ render_author_name(author) }}</a>
+          on {{ post.pub_date|dateformat("YYYY-MM-dd") }}</span>
+          <div class="excerpt">
+            {{ post.body | excerpt | string | striptags() | truncate(100) }}
+          </div>
+        </div>
+      </article>
+    {% endfor %}
+  </div>
+{% endmacro %}

webpack/sass/main.scss

@@ -10,7 +10,14 @@ a {
   text-decoration: none;
 }
 
-// Will be replaced by content class from Bulma
+code {
+  @extend .has-color-dark-slate-gray;
+
+  background-color: $color-lighter-gray;
+  border: 1px solid $color-lighter-gray;
+  border-radius: 0.25rem;
+}
+
 .markdown {
   @extend .body-big;
 
@@ -30,14 +37,6 @@ a {
   ol,ul {
     @extend .padding-horizontal-big;
   }
-
-  code {
-    @extend .has-color-dark-slate-gray;
-
-    background-color: $color-lighter-gray;
-    border: 1px solid $color-lighter-gray;
-    border-radius: 0.25rem;
-  }
 }
 
 .navbar-item {
@@ -346,6 +345,38 @@ a {
   }
 }
 
+.author-posts {
+  .title {
+    background-color: $color-lighter-gray;
+
+    .container {
+      @extend .padding-horizontal-big;
+      @extend .padding-bottom-xl;
+
+      .image {
+        width: 9.5rem;
+        height: 9.5rem;
+      }
+
+      .about {
+        @extend .body-big;
+        @extend .padding-top-big;
+
+        line-height: 1.8125;
+      }
+
+      .button {
+        @extend .margin-top-bigger;
+      }
+    }
+  }
+
+  .posts {
+    @extend .padding-top-xl;
+    @extend .padding-bottom-xxl;
+  }
+}
+
 .all-series {
   .title {
     background-color: $color-lighter-gray;