Update content list styles

Closes #4425

- Adds the author avatar (with defalt fallback)
- Shows author name when hovering the avatar (falls back to email address)
- Slightly adjusts type, colour, and spacing

core/client/assets/sass/layouts/content.scss

@@ -112,25 +112,47 @@
 
     .entry-title {
         font-size: 1.6rem;
-        line-height: 1.25em;
+        line-height: 1.4em;
         font-weight: normal;
     }
 
-    .views {
-        @include icon($i-stats, 10px, $brown);
-        float: right;
-        text-align: right;
-        margin-left: 15px;
+    .entry-meta {
+        margin-top: 14px;
+        line-height: 18px;
+    }
 
-        @media (max-width: 900px) {
-            float: none;
-        }
+    .avatar {
+        width: 18px;
+        height: 18px;
+        border-radius: 18px;
+        margin-right: 14px;
+        float: left; // Used instead of `display: block;` to remove the stupid space under the image.
+        object-fit: cover; // Like using 'background-size: cover;', but on an img tag - https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
+    }
+
+    .status,
+    .author {
+        font-size: 1.3rem;
+        font-weight: 300;
+        transition: opacity 0.15s linear;
+    }
+
+    .avatar:hover + .author + .status {
+        opacity: 0;
+    }
+
+    .avatar:hover + .author {
+        opacity: 1;
+    }
+
+    .author {
+        position: absolute;
+        bottom: 22px;
+        left: 56px;
+        opacity: 0;
     }
 
     .status {
-        font-size: 1.3rem;
-        font-weight: 300;
-
         .draft {
             color: $red;
         }
@@ -140,10 +162,12 @@
         }
     }
 
-    .featured .status {
+    .featured {
         @include icon($i-featured, 11px) {
-            margin-right: 10px;
             vertical-align: 7%;
+            position: absolute;
+            bottom: 25px;
+            right: 25px;
         };
     }
 
@@ -155,13 +179,14 @@
     }
 
     li {
+        position: relative;
         margin: 0;
         padding: 0;
         border-bottom: $lightbrown 1px solid;
 
         a {
             display: block;
-            padding: 20px 20px;
+            padding: 19px 20px 22px 24px;
             color: rgba(0,0,0,0.5);
 
             @include icon-after($i-chevron) {
@@ -195,18 +220,8 @@
         @media (min-width: 901px) {
             border-bottom: lighten($midgrey, 40%) 1px solid;
             background: lighten($lightbrown, 5%);
-            box-shadow:
-                lighten($midgrey, 40%) 0 -1px 0, // top border
-                rgba(0,0,0,0.06) 7px 0 0 inset, // big left border
-                lighten($midgrey, 40%) 1px 0 0 inset; // small left border
-
-            .views {
-                @include icon($i-stats, 10px, $darkgrey);
-                color: $darkgrey;
-                font-weight: normal;
-            }
         }
-    }//li.active
+    }
 }//.content-list
 
 

core/client/controllers/posts/post.js

@@ -2,6 +2,14 @@ var PostController = Ember.Controller.extend({
     isPublished: Ember.computed.equal('model.status', 'published'),
     classNameBindings: ['model.featured'],
 
+    authorName: Ember.computed('model.author.name', 'model.author.email', function () {
+        return this.get('model.author.name') || this.get('model.author.email');
+    }),
+
+    authorAvatar: Ember.computed('model.author.image', function () {
+        return this.get('model.author.image') || this.get('ghostPaths.url').asset('/shared/img/user-image.png');
+    }),
+
     actions: {
         toggleFeatured: function () {
             var options = {disableNProgress: true},

core/client/templates/posts.hbs

@@ -17,6 +17,8 @@
                 {{#link-to "posts.post" post class="permalink" alternateActive=view.active title="Edit this post"}}
                     <h3 class="entry-title">{{post.model.title}}</h3>
                     <section class="entry-meta">
+                        <img class="avatar" {{bind-attr src="post.authorAvatar" title="post.authorName"}}>
+                        <span class="author">{{post.authorName}}</span>
                         <span class="status">
                             {{#if post.isPublished}}
                                 {{#if post.model.page}}