TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 11:55:03 +03:00
Code Issues Projects Releases Wiki Activity

Design fixes for the user settings panel

Browse Source 
* Bio field now counts down.
* Bio filed count now turns red when < 20
* Cover image now has gradient
* Change button now has square corners
* Removed "forgot password" link
* Change password button is now red
* Change password button is now aligned with the form
* Hover state on the profile picture now reads "Edit Picture"
This commit is contained in:
Matthew Harrison-Jones 2013-09-05 10:00:30 +01:00
parent 6cb7252978
commit 61ac9f7284
4 changed files with 48 additions and 9 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

@ -129,6 +129,16 @@ User Profile
position: relative;
width: 100%;
height: 300px;
&:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 110px;
@include linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%);
}
}
.cover-image {
@ -141,7 +151,9 @@ User Profile
img {
position: absolute;
max-width: 100%;
min-width: 100%;
min-height: 100%;
}
}
@ -150,6 +162,7 @@ User Profile
right: 40px;
bottom: 40px;
background: rgba(0,0,0,0.4);
border-radius: 0;
color: #FFFFFF;
z-index: 2;

17
core/client/assets/sass/screen.scss
View File

@ -40,11 +40,20 @@
@import "layouts/editor";
/* The write/edit post screen. */
@import "layouts/login";
/* The login screen. */
@import "layouts/errors";
/* The error screens. */
/* ==========================================================================
Settings Layouts - Styles for the individual settings panes, grouped by pane.
========================================================================== */
@import "layouts/settings";
/* The settings screen. */
@import "layouts/login";
/* The settings screen. */
@import "layouts/users";
/* The users pane. */
@import "layouts/errors";
/* The error screens. */
@import "layouts/plugins";
/* The plugins pane. */

7
core/client/tpl/settings/user-profile.hbs
View File

@ -15,7 +15,7 @@
<fieldset class="user-details-top">
<figure class="user-avatar-image">
<img id="user-profile-picture" src="{{#if profile_picture}}{{profile_picture}}{{else}}/shared/img/default-user-profile-picture.jpg{{/if}}" title="{{full_name}}"/>
<button class="button-change-avatar">Update Avatar</button>
<button class="button-change-avatar">Edit Picture</button>
</figure>
<label>
<input type="url" value="{{full_name}}" id="user-name" placeholder="Joe Bloggs" autocapitalize="off" autocorrect="off">
@ -57,7 +57,6 @@
<div class="form-group">
<label><strong>Old Password</strong></label>
<input type="password" id="user-password-old">
<p><a href="#" >Forgot your password?</a></p>
</div>
<div class="form-group">
@ -69,7 +68,9 @@
<label><strong>Verify Password</strong></label>
<input type="password" id="user-new-password-verification">
</div>
<button class="button-change-password">Change Password</button>
<div class="form-group">
<button class="button-delete">Change Password</button>
</div>
</fieldset>

18
core/client/views/settings.js
View File

@ -1,4 +1,4 @@
/*global window, document, Ghost, $, _, Backbone */
/*global window, document, Ghost, $, _, Backbone, Countable */
(function () {
"use strict";
@ -348,6 +348,22 @@
this.$('#user-bio').val(user.bio);
this.$('#user-profile-picture').attr('src', user.profile_picture);
this.$('#user-cover-picture').attr('src', user.cover_picture);
},
afterRender: function () {
var self = this;
Countable.live(document.getElementById('user-bio'), function (counter) {
if (counter.all > 180) {
self.$('.bio-container .word-count').css({color: "#e25440"});
} else {
self.$('.bio-container .word-count').css({color: "#9E9D95"});
}
self.$('.bio-container .word-count').text(200 - counter.all);
});
Settings.Pane.prototype.afterRender.call(this);
}
});