Ghost/core/client/tpl/settings/user-profile.hbs
Matthew Harrison-Jones 61ac9f7284 Design fixes for the user settings panel
* 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"
2013-09-05 10:00:52 +01:00

79 lines
3.2 KiB
Handlebars

<header>
<h2 class="title">Your Profile</h2>
<section class="page-actions">
<button class="button-save">Save</button>
</section>
</header>
<section class="content no-padding">
<header class="user-profile-header">
<figure class="cover-image">
<img id="user-cover-picture" src="{{#if cover_picture}}{{cover_picture}}{{else}}/shared/img/default-user-cover-picture.jpg{{/if}}" title="{{full_name}} Cover Image"/>
<button class="button-change-cover">Change Cover</button>
</figure>
</header>
<form class="user-details-container" novalidate="novalidate">
<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">Edit Picture</button>
</figure>
<label>
<input type="url" value="{{full_name}}" id="user-name" placeholder="Joe Bloggs" autocapitalize="off" autocorrect="off">
<p>Use your real name so people can recognise you.</p>
</label>
</fieldset>
<fieldset class="user-details-bottom">
<div class="form-group">
<label><strong>Email</strong></label>
<input type="email" value="{{email_address}}" id="user-email" placeholder="Email Address" autocapitalize="off" autocorrect="off">
<p>Email will not be publicly displayed. <a class="highlight" href="#" >Learn more</a>.</p>
</div>
<div class="form-group">
<label><strong>Location</strong></label>
<input type="text" value="{{location}}" id="user-location">
<p>Where in the world do you live?</p>
</div>
<div class="form-group">
<label><strong>Website</strong></label>
<input type="text" value="{{url}}" id="user-website">
<p>Have a website or blog other than this one? Link it.</p>
</div>
<div class="form-group bio-container">
<label><strong>Bio</strong></label>
<textarea id="user-bio">{{bio}}</textarea>
<p class="bio-desc">Write about you, in <strong>200</strong> characters or less.</p>
<span class="word-count">97</span>
</div>
<hr>
</fieldset>
<fieldset class="user-details-bottom">
<div class="form-group">
<label><strong>Old Password</strong></label>
<input type="password" id="user-password-old">
</div>
<div class="form-group">
<label><strong>New Password</strong></label>
<input type="password" id="user-password-new">
</div>
<div class="form-group">
<label><strong>Verify Password</strong></label>
<input type="password" id="user-new-password-verification">
</div>
<div class="form-group">
<button class="button-delete">Change Password</button>
</div>
</fieldset>
</form>
</section>