Update user image styles

Related to TryGhost#4844

The newly added user image in the content list uses a CSS property to
crop `img` tags, but it's not supported in IE or Firefox. This issue
corrects that by chancing them to be background images which can be
cropped cross-browser.

It also adjusts the nav bar user image (previously an `img` tag) which
would squash a non-square image.

Also removes the border around the settings/users/ user images, to be
consistent with the rest of the UI.

core/client/assets/sass/components/navigation.scss

@@ -125,14 +125,9 @@
 
     // Profile picture
     .image {
-        float: left;
-        margin: 15px 8px 0 0;
-
-        img {
-            display: block;
-            width: 30px;
-            height: 30px;
-            border-radius: 100%;
+        @include circular-image(30px) {
+            float: left;
+            margin: 15px 14px 0 0;
         }
     }
 

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

@@ -122,12 +122,10 @@
     }
 
     .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
+        @include circular-image(18px) {
+            float: left; // Used instead of `display: block;` to remove the stupid space under the image.
+            margin-right: 14px;
+        }
     }
 
     .status,

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

@@ -97,13 +97,9 @@ a.user-list-item {
 }
 
 .user-list-item-figure {
-    width: 35px;
-    height: 35px;
-    display: block;
-    border: 1px solid #979797;
-    border-radius: 100%;
-    background-size: cover;
-    background-position: center center;
+    @include circular-image(35px) {
+        display: block;
+    }
 }
 
 .user-list-item-icon,

core/client/assets/sass/modules/mixins.scss

@@ -8,6 +8,7 @@
 // * tab-focus()
 // * triangle()
 // * set-triangle-color()
+// * circular-image()
 // ------------------------------------------------------------
 
 
@@ -99,4 +100,29 @@
     } @else {
         @return "transparent";
     }
+}
+
+
+//
+// Reusable styles for creating a circular image which is cropped properly, with the image inside it
+// Example: @circular-image(35px);
+// --------------------------------------------------
+
+@mixin circular-image($widthandheight: 20px) {
+    @content;
+    width: $widthandheight;
+    height: $widthandheight;
+    border-radius: $widthandheight;
+    background-size: cover;
+    background-position: center center;
+    position: relative;
+
+    img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+    }
 }

core/client/controllers/application.js

@@ -7,10 +7,18 @@ var ApplicationController = Ember.Controller.extend({
     showGlobalMobileNav: false,
     showSettingsMenu: false,
 
-     userImageAlt: Ember.computed('session.user.name', function () {
+    userImage: Ember.computed('session.user.image', function () {
+        return this.get('session.user.image') || this.get('ghostPaths.url').asset('/shared/img/user-image.png');
+    }),
+
+    userImageBackground: Ember.computed('userImage', function () {
+        return 'background-image: url(' + this.get('userImage') + ')';
+    }),
+
+    userImageAlt: Ember.computed('session.user.name', function () {
         var name = this.get('session.user.name');
 
-        return name + '\'s profile picture';
+        return (name) ? name + '\'s profile picture' : 'Profile picture';
     }),
 
     actions: {

core/client/controllers/posts/post.js

@@ -10,6 +10,10 @@ var PostController = Ember.Controller.extend({
         return this.get('model.author.image') || this.get('ghostPaths.url').asset('/shared/img/user-image.png');
     }),
 
+    authorAvatarBackground: Ember.computed('authorAvatar', function () {
+        return 'background-image: url(' + this.get('authorAvatar') + ')';
+    }),
+
     actions: {
         toggleFeatured: function () {
             var options = {disableNProgress: true},

core/client/templates/-navbar.hbs

@@ -31,11 +31,9 @@
 
     <div class="nav-item user-menu">
         {{#gh-dropdown-button dropdownName="user-menu" tagName="div" classNames="nav-label clearfix"}}
-            {{#if session.user.image}}
-            <div class="image"><img {{bind-attr src=session.user.image alt=userImageAlt}} /></div>
-            {{else}}
-            <div class="image"><img src="{{gh-path "blog" "shared/img/user-image.png"}}" alt="Profile picture" /></div>
-            {{/if}}
+            <span class="image" {{bind-attr style=userImageBackground}}>
+                <img {{bind-attr src="userImage" title="userImageAlt"}}>
+            </span>
             <div class="name">
                 {{session.user.name}} <i class="icon-chevron-down"></i>
                 <small>Profile &amp; Settings</small>

core/client/templates/posts.hbs

@@ -17,7 +17,9 @@
                 {{#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="avatar" {{bind-attr style=post.authorAvatarBackground}}>
+                            <img {{bind-attr src="post.authorAvatar" title="post.authorName"}}>
+                        </span>
                         <span class="author">{{post.authorName}}</span>
                         <span class="status">
                             {{#if post.isPublished}}