mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-01 22:02:11 +03:00
New signup screen styling + new name field.
This commit is contained in:
parent
a54eed6005
commit
d79e05aaca
@ -3,11 +3,14 @@
|
||||
*
|
||||
* Table of Contents:
|
||||
*
|
||||
* 0. General
|
||||
* 1. Login
|
||||
* 2. Signup
|
||||
*
|
||||
*/
|
||||
|
||||
/* =============================================================================
|
||||
Login
|
||||
0. General
|
||||
============================================================================= */
|
||||
|
||||
.ghost-login {
|
||||
@ -37,6 +40,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
1. Login
|
||||
============================================================================= */
|
||||
|
||||
#login {
|
||||
@include box-sizing(border-box);
|
||||
max-width: 530px;
|
||||
@ -160,3 +168,98 @@
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
2. Signup
|
||||
============================================================================= */
|
||||
|
||||
#signup {
|
||||
@include box-sizing(border-box);
|
||||
max-width: 280px;
|
||||
color: lighten($midgrey, 15%);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
|
||||
@include breakpoint(630px) {
|
||||
max-width: 264px;
|
||||
}
|
||||
|
||||
div { // Yes. Really.
|
||||
position:relative;
|
||||
margin:0 0 1em 0;
|
||||
background: lighten($darkgrey, 10%);
|
||||
float: left;
|
||||
display: table;
|
||||
}
|
||||
|
||||
input {
|
||||
margin:0;
|
||||
padding: 8px 10px;
|
||||
position: relative;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 1.1em;
|
||||
font-weight: 200;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
@include transition(background ease 0.25s);
|
||||
|
||||
@include breakpoint(630px) {
|
||||
@include transition(none);
|
||||
max-width: 244px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: lighten($darkgrey, 15%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.name-wrap {
|
||||
position:relative;
|
||||
border-radius: 2px;
|
||||
|
||||
.name {
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.email-wrap {
|
||||
position:relative;
|
||||
border-radius: 2px;
|
||||
|
||||
.email {
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.password-wrap {
|
||||
position:relative;
|
||||
border-radius: 2px;
|
||||
|
||||
.password {
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
@include box-sizing(border-box);
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
margin: 0 0 1em 0;
|
||||
padding: 0.5em 1.37em;
|
||||
min-height: 30px;
|
||||
min-width: 80px;
|
||||
box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
|
||||
}
|
||||
|
||||
a {
|
||||
color: darken($midgrey, 10%);
|
||||
font-size: 0.9em;
|
||||
|
||||
&:hover {
|
||||
color: lighten($midgrey, 5%);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
@ -1,12 +1,12 @@
|
||||
<form id="register" method="post" novalidate="novalidate">
|
||||
<form id="signup" method="post" novalidate="novalidate">
|
||||
<div class="name-wrap">
|
||||
<input class="name" type="text" placeholder="Full Name" name="name" autocorrect="off" />
|
||||
</div>
|
||||
<div class="email-wrap">
|
||||
<input class="email" type="email" placeholder="Email Address" name="email" autocapitalize="off" autocorrect="off">
|
||||
<input class="email" type="email" placeholder="Email Address" name="email" autocapitalize="off" autocorrect="off" />
|
||||
</div>
|
||||
<div class="password-wrap">
|
||||
<input class="password" type="password" placeholder="Password" name="password">
|
||||
<input class="password" type="password" placeholder="Password" name="password" />
|
||||
</div>
|
||||
<button class="button-save" type="submit">Register</button>
|
||||
<section class="meta">
|
||||
<a href="/ghost/login/">Log in</a>
|
||||
</section>
|
||||
<button class="button-save" type="submit">Sign Up</button>
|
||||
</form>
|
||||
|
@ -53,18 +53,20 @@
|
||||
templateName: "signup",
|
||||
|
||||
events: {
|
||||
'submit #register': 'submitHandler'
|
||||
'submit #signup': 'submitHandler'
|
||||
},
|
||||
|
||||
submitHandler: function (event) {
|
||||
event.preventDefault();
|
||||
var email = this.$el.find('.email').val(),
|
||||
var name = this.$el.find('.name').val(),
|
||||
email = this.$el.find('.email').val(),
|
||||
password = this.$el.find('.password').val();
|
||||
|
||||
$.ajax({
|
||||
url: '/ghost/signup/',
|
||||
type: 'POST',
|
||||
data: {
|
||||
name: name,
|
||||
email: email,
|
||||
password: password
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user