New signup screen styling + new name field.

This commit is contained in:
John O'Nolan 2013-09-08 20:39:55 +02:00
parent a54eed6005
commit d79e05aaca
3 changed files with 115 additions and 10 deletions

View File

@ -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;
}
}
}

View File

@ -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>

View File

@ -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
},