mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-27 18:52:14 +03:00
John O'Nolan
parent
aa982c2d31
commit
fe17e1f385
@ -4,7 +4,9 @@
|
||||
*
|
||||
* Table of Contents:
|
||||
*
|
||||
* Settings
|
||||
* General
|
||||
* Sidebar
|
||||
* Content
|
||||
*
|
||||
*/
|
||||
|
||||
@ -60,11 +62,21 @@
|
||||
}
|
||||
|
||||
> header {
|
||||
position: relative;
|
||||
z-index: 400;
|
||||
height: 17px;
|
||||
padding: 30px 15px 30px 40px;
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
box-shadow: #edece4 0 -1px 0 inset;
|
||||
box-shadow: #edece4 0 -1px 0 inset, #edece4 1px 0 0;
|
||||
//Transparent gradient to make bg fade out as it goes out the top.
|
||||
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,0.90) 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(25%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0.90)));
|
||||
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
|
||||
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
|
||||
|
||||
@include breakpoint($netbook) {
|
||||
padding-left: 15px;
|
||||
};
|
||||
@ -74,13 +86,21 @@
|
||||
//Main settings-menu styles, apply to every item
|
||||
.settings-menu {
|
||||
position:absolute;
|
||||
top: 77px; //30px + 17px title + 30px
|
||||
top: 0;
|
||||
left:0;
|
||||
bottom:0;
|
||||
right:-1px;
|
||||
overflow: auto;
|
||||
@include breakpoint($tablet) { right:0; };
|
||||
|
||||
// Create placeholder the same height as the floating header
|
||||
// to push content down by the same amount
|
||||
&:before {
|
||||
display: block;
|
||||
content: "";
|
||||
height: 77px; //30px + 17px title + 30px
|
||||
}
|
||||
|
||||
ul {
|
||||
border-top:none;
|
||||
@include breakpoint($tablet) { border-bottom: #edece4 1px solid; }
|
||||
@ -180,6 +200,8 @@
|
||||
&.active {display:block;}
|
||||
|
||||
> header {
|
||||
position: relative;
|
||||
z-index: 200;
|
||||
height: 17px;
|
||||
padding: 30px 220px 29px 40px;
|
||||
border-bottom:$lightbrown 1px solid;
|
||||
@ -188,6 +210,14 @@
|
||||
font-weight: normal;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
//Transparent gradient to make bg fade out as it goes out the top.
|
||||
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,0.90) 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(25%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0.90)));
|
||||
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
|
||||
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%);
|
||||
|
||||
@include breakpoint($netbook) { padding-left:15px; }
|
||||
@include breakpoint($letterbox) {
|
||||
height: auto;
|
||||
@ -196,6 +226,7 @@
|
||||
top:0;
|
||||
right:0;
|
||||
border:none;
|
||||
background: transparent;
|
||||
|
||||
.title { display:none; }
|
||||
}
|
||||
@ -239,20 +270,28 @@
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
top:77px; //30px + 17px title + 30px
|
||||
top:0;
|
||||
right:0;
|
||||
left:0;
|
||||
bottom:0;
|
||||
padding:40px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
// Create placeholder the same height as the floating header
|
||||
// to push content down by the same amount
|
||||
&:before {
|
||||
display: block;
|
||||
content: "";
|
||||
height: 77px; //30px + 17px title + 30px
|
||||
@include breakpoint($letterbox) { display: none; }
|
||||
}
|
||||
|
||||
&.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@include breakpoint($netbook) { padding-left:15px; }
|
||||
@include breakpoint($letterbox) { top: 0; }
|
||||
@include breakpoint(550px) { padding: 0 15px 40px; }
|
||||
}
|
||||
|
||||
|
||||
@ -91,19 +91,20 @@
|
||||
.user-meta {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
.user-name {
|
||||
margin: 0;
|
||||
margin-top: 0.4em;
|
||||
font-weight: 400;
|
||||
font-size: 1.2em;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.user-last-seen {
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.user-name {
|
||||
margin: 0;
|
||||
margin-top: 0.4em;
|
||||
font-weight: 400;
|
||||
font-size: 1.2em;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.user-last-seen {
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.user-role {
|
||||
@ -122,14 +123,13 @@
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
User Profile
|
||||
============================================================================= */
|
||||
User Profile
|
||||
============================================================================= */
|
||||
|
||||
.user-profile-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
|
||||
|
||||
// Gradient overlay
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -137,56 +137,58 @@ User Profile
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 110px;
|
||||
@include linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%);
|
||||
@include linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.3) );
|
||||
}
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
line-height: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
|
||||
}
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.button-change-cover {
|
||||
.edit-cover-image {
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
bottom: 40px;
|
||||
background: rgba(0,0,0,0.4);
|
||||
bottom: 38px;
|
||||
background: rgba(0,0,0,0.3);
|
||||
border-radius: 0;
|
||||
color: #FFFFFF;
|
||||
color: rgba(255,255,255,0.8);
|
||||
z-index: 2;
|
||||
border-radius: $rounded;
|
||||
@include transition(
|
||||
color 0.3s ease,
|
||||
background 0.3s ease
|
||||
);
|
||||
@include breakpoint($netbook) { right: 15px;}
|
||||
|
||||
&:hover {
|
||||
background: rgba(0,0,0,0.8);
|
||||
color: #fff;
|
||||
background: rgba(0,0,0,0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.user-details-container {
|
||||
.user-profile {
|
||||
position: relative;
|
||||
top: -90px;
|
||||
top: -100px;
|
||||
z-index: 1;
|
||||
|
||||
fieldset {
|
||||
padding: 0 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-details-top {
|
||||
fieldset.user-details-top {
|
||||
margin-bottom: 0;
|
||||
overflow: auto;
|
||||
padding: 10px 0 0 0;
|
||||
|
||||
p {
|
||||
color: #FFFFFF;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.user-avatar-image {
|
||||
.user-image {
|
||||
@include box-sizing(border-box);
|
||||
position: relative;
|
||||
width: 120px;
|
||||
@ -195,39 +197,42 @@ User Profile
|
||||
margin-left: 40px;
|
||||
margin-right: 20px;
|
||||
border-radius: 60px;
|
||||
border: 3px solid #FFFFFF;
|
||||
cursor: pointer;
|
||||
border: 5px solid #fff;
|
||||
z-index: 2;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 60px;
|
||||
}
|
||||
|
||||
.button-change-avatar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
border-radius: 60px;
|
||||
background: rgba(0,0,0,0.5);
|
||||
opacity: 0;
|
||||
color: #FFFFFF;
|
||||
@include transition(opacity 0.3s ease);
|
||||
line-height: 0;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.button-change-avatar {
|
||||
.edit-user-image {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-user-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
border-radius: 100%;
|
||||
background: rgba(0,0,0,0.5);
|
||||
opacity: 0;
|
||||
color: #fff;
|
||||
@include transition(opacity 0.3s ease);
|
||||
}
|
||||
|
||||
#user-name {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.user-details-bottom {
|
||||
padding: 0 40px;
|
||||
margin: 0;
|
||||
margin: -30px 0 0 0;
|
||||
}
|
||||
|
||||
.bio-container {
|
||||
@ -239,7 +244,7 @@ User Profile
|
||||
}
|
||||
|
||||
.word-count {
|
||||
margin-right: 20px;
|
||||
margin-right: 30px;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
color: darken($brown, 5%);
|
||||
|
||||
@ -35,26 +35,23 @@ form {
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
|
||||
strong {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
left: 0;
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
color: $brown;
|
||||
text-align: right;
|
||||
|
||||
@include breakpoint(550px) {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
width: auto;
|
||||
margin-bottom: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
left: 0;
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
color: $brown;
|
||||
text-align: right;
|
||||
|
||||
@include breakpoint(550px) {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
width: auto;
|
||||
margin-bottom: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -4,55 +4,57 @@
|
||||
<button class="button-save">Save</button>
|
||||
</section>
|
||||
</header>
|
||||
|
||||
<section class="content">
|
||||
<form id="settings-general" novalidate="novalidate">
|
||||
<fieldset>
|
||||
|
||||
<div class="form-group">
|
||||
<label><strong>Blog Title</strong></label>
|
||||
<input id="blog-title" name="general[title]" type="text" value="{{title}}">
|
||||
<p>How your blog name appears on the site</p>
|
||||
<label for="blog-title">Blog Title</label>
|
||||
<input id="blog-title" name="general[title]" type="text" value="{{title}}" />
|
||||
<p>The name of your blog</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="blog-description"><strong>Blog Description</strong></label>
|
||||
<label for="blog-description">Blog Description</label>
|
||||
<textarea id="blog-description">{{description}}</textarea>
|
||||
<p>Display a short description below the blog title</p>
|
||||
<p>Describe what your blog is about</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label><strong>Blog Logo</strong></label>
|
||||
<label for="blog-logo">Blog Logo</label>
|
||||
{{#if logo}}
|
||||
<a class="js-modal-logo" href="#"><img id="blog-logo" src="{{logo}}" alt="logo"></a>
|
||||
{{else}}
|
||||
<a class="button-add js-modal-logo" href="#">Upload Image</a>
|
||||
{{/if}}
|
||||
<p>Display a logo on your site in place of blog title</p>
|
||||
<p>Display a sexy logo for your publication</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label><strong>Blog Cover</strong></label>
|
||||
<label for="blog-cover">Blog Cover</label>
|
||||
{{#if cover}}
|
||||
<a class="js-modal-cover" href="#"><img id="blog-cover" src="{{cover}}" alt="cover photo"></a>
|
||||
{{else}}
|
||||
<a class="button-add js-modal-cover" href="#">Upload Image</a>
|
||||
{{/if}}
|
||||
<p>Display a cover photo on your site</p>
|
||||
<p>Display a cover image on your site</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email-address"><strong>Email Address</strong></label>
|
||||
<input id="email-address" name="general[email-address]" type="email" value="{{email}}">
|
||||
<p>Address to use for <a href="#">admin notifications</a></p>
|
||||
<label for="email-address">Email Address</label>
|
||||
<input id="email-address" name="general[email-address]" type="email" value="{{email}}" autocapitalize="off" autocorrect="off" />
|
||||
<p>Address to use for admin notifications</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="postsPerPage"><strong>Posts per page</strong></label>
|
||||
<input id="postsPerPage" name="general[postsPerPage]" type="number" value="{{postsPerPage}}">
|
||||
<p>Number of posts per page displayed</p>
|
||||
<label for="postsPerPage">Posts per page</label>
|
||||
<input id="postsPerPage" name="general[postsPerPage]" type="number" value="{{postsPerPage}}" />
|
||||
<p>How many posts should be displayed on each page</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="activeTheme"><strong>Theme</strong></label>
|
||||
<label for="activeTheme">Theme</label>
|
||||
<select id="activeTheme" name="general[activeTheme]">
|
||||
{{#each availableThemes}}
|
||||
<option value="{{name}}" {{#if active}}selected{{/if}}>{{name}}</option>
|
||||
@ -62,6 +64,5 @@
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
</section>
|
||||
@ -4,69 +4,77 @@
|
||||
<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" src="{{#if cover}}{{cover}}{{else}}/shared/img/default-user-cover-picture.jpg{{/if}}" title="{{name}} Cover Image"/>
|
||||
<button class="button-change-cover js-modal-cover">Change Cover</button>
|
||||
</figure>
|
||||
<img id="user-cover" class="cover-image" src="{{#if cover}}{{cover}}{{else}}/shared/img/cover.png{{/if}}" title="{{name}}'s Cover Image"/>
|
||||
<button class="edit-cover-image js-modal-cover">Change Cover</button>
|
||||
</header>
|
||||
<form class="user-details-container" novalidate="novalidate">
|
||||
|
||||
<form class="user-profile" novalidate="novalidate">
|
||||
|
||||
<fieldset class="user-details-top">
|
||||
<figure class="user-avatar-image">
|
||||
<img id="user-image" src="{{#if image}}{{image}}{{else}}/shared/img/default-user-profile-picture.jpg{{/if}}" title="{{name}}"/>
|
||||
<button class="button-change-avatar js-modal-image">Edit Picture</button>
|
||||
|
||||
<figure class="user-image">
|
||||
<img id="user-image" src="{{#if image}}{{image}}{{else}}/shared/img/default-user-profile-picture.jpg{{/if}}" title="{{name}}" />
|
||||
<button class="edit-user-image js-modal-image">Edit Picture</button>
|
||||
</figure>
|
||||
<label>
|
||||
<input type="url" value="{{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}}" 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>
|
||||
<label for="user-name" class="hidden">Full Name</label>
|
||||
<input type="url" value="{{name}}" id="user-name" placeholder="Full Name" autocorrect="off" />
|
||||
<p>Use your real name so people can recognise you</p>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="user-details-bottom">
|
||||
|
||||
<div class="form-group">
|
||||
<label for"user-email">Email</label>
|
||||
<input type="email" value="{{email}}" id="user-email" placeholder="Email Address" autocapitalize="off" autocorrect="off" />
|
||||
<p>Used for notifications</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label><strong>Location</strong></label>
|
||||
<input type="text" value="{{location}}" id="user-location">
|
||||
<label for="user-location">Location</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="{{website}}" id="user-website">
|
||||
<p>Have a website or blog other than this one? Link it.</p>
|
||||
<label for="user-website">Website</label>
|
||||
<input type="text" value="{{website}}" id="user-website" autocapitalize="off" autocorrect="off" />
|
||||
<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>
|
||||
<label for="user-bio">Bio</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>
|
||||
<p class="bio-desc">Write about you, in 200 characters or less.</p>
|
||||
<span class="word-count">0</span>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<hr />
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="user-details-bottom">
|
||||
<fieldset>
|
||||
|
||||
<div class="form-group">
|
||||
<label><strong>Old Password</strong></label>
|
||||
<input type="password" id="user-password-old">
|
||||
<label for="user-password-old">Old Password</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">
|
||||
<label for="user-password-new">New Password</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">
|
||||
<label for="user-new-password-verification">Verify Password</label>
|
||||
<input type="password" id="user-new-password-verification" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button class="button-delete button-change-password">Change Password</button>
|
||||
|
||||
BIN
core/shared/img/cover.png
Normal file
BIN
core/shared/img/cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 110 KiB |
@ -126,7 +126,7 @@ casper.test.begin("User settings screen validates email", 6, function suite(test
|
||||
email = casper.getElementInfo('#user-email').attributes.value;
|
||||
brokenEmail = email.replace('.', '-');
|
||||
|
||||
casper.fillSelectors('.user-details-container', {
|
||||
casper.fillSelectors('.user-profile', {
|
||||
'#user-email': brokenEmail
|
||||
}, false);
|
||||
});
|
||||
@ -143,7 +143,7 @@ casper.test.begin("User settings screen validates email", 6, function suite(test
|
||||
});
|
||||
|
||||
casper.then(function resetEmailToValid() {
|
||||
casper.fillSelectors('.user-details-container', {
|
||||
casper.fillSelectors('.user-profile', {
|
||||
'#user-email': email
|
||||
}, false);
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user