Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Make user profile images always fit their circle

Browse source 
Closes #778
This commit is contained in:
John O'Nolan 2013-09-17 11:03:55 +01:00
parent 357cb9f201
commit b6b019621a
2 changed files with 12 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
core/client/assets/sass/layouts/users.scss
View file

@ -190,20 +190,27 @@
.user-image {
@include box-sizing(border-box);
display: table;
position: relative;
width: 120px;
height: 120px;
float: left;
margin-left: 40px;
margin-right: 20px;
border-radius: 60px;
text-align: center;
border-radius: 100%;
overflow: hidden;
border: 5px solid #fff;
background: $darkgrey;
z-index: 2;
img {
.img {
display: block;
line-height: 0;
border-radius: 100%;
width: 100%;
height: 100%;
background-image: url(/shared/img/default-user-profile-picture.jpg);
background-size: cover;
background-position: center center;
}
&:hover {

2
core/client/tpl/settings/user-profile.hbs
View file

@ -17,7 +17,7 @@
<fieldset class="user-details-top">
<figure class="user-image">
<img id="user-image" src="{{#if image}}{{image}}{{else}}/shared/img/default-user-profile-picture.jpg{{/if}}" title="{{name}}" />
<a id="user-image" class="img" {{#if image}}style="background-image: url({{image}});"{{/if}} href="#"><span class="hidden">{{name}}'s Picture</span></a>
<button class="edit-user-image js-modal-image">Edit Picture</button>
</figure>