From d54af1b9267b25dd55e92df110198398e8df931f Mon Sep 17 00:00:00 2001 From: Paul Adam Davis Date: Tue, 16 Dec 2014 16:55:45 +0000 Subject: [PATCH] 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 | 67 ++++++++++++-------- core/client/controllers/posts/post.js | 8 +++ core/client/templates/posts.hbs | 2 + 3 files changed, 51 insertions(+), 26 deletions(-) diff --git a/core/client/assets/sass/layouts/content.scss b/core/client/assets/sass/layouts/content.scss index 526aca88f5..be9d4ebabc 100644 --- a/core/client/assets/sass/layouts/content.scss +++ b/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 diff --git a/core/client/controllers/posts/post.js b/core/client/controllers/posts/post.js index 621c71f849..adfdb369ee 100644 --- a/core/client/controllers/posts/post.js +++ b/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}, diff --git a/core/client/templates/posts.hbs b/core/client/templates/posts.hbs index df6e65333a..8d1b990a25 100644 --- a/core/client/templates/posts.hbs +++ b/core/client/templates/posts.hbs @@ -17,6 +17,8 @@ {{#link-to "posts.post" post class="permalink" alternateActive=view.active title="Edit this post"}}

{{post.model.title}}

+ + {{post.authorName}} {{#if post.isPublished}} {{#if post.model.page}}