Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Refactor + Restyle login/register screens. See #134

Browse source
This commit is contained in:
John O'Nolan 2013-06-11 16:45:42 +02:00
parent 7e1bd2922e
commit 1267f91935
3 changed files with 52 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
core/admin/assets/sass/layouts/login.scss
View file

@ -12,9 +12,10 @@
.ghost-login { .ghost-login {
color: $midgrey; color: $midgrey;
background: $darkgrey;
@include breakpoint($mobile) { @include breakpoint($mobile) {
background: $lightbrown; background: $darkgrey;
} }
main { main {
@ -27,67 +28,52 @@
max-width: 530px; max-width: 530px;
margin: 240px auto; // TODO: Change this to proper vertical centering with JS margin: 240px auto; // TODO: Change this to proper vertical centering with JS
padding: 0; padding: 0;
text-align: center;
background: #fff;
border-radius: 4px;
border-top: $darkgrey 15px solid;
box-shadow: $shadow;
@include breakpoint(630px) { @include breakpoint(630px) {
max-width: 264px; max-width: 264px;
} text-align: center;
}
.login-logo {
width: 100%;
max-width: 400px;
margin: 80px 0 70px 0;
@include breakpoint(630px) {
max-width: 235px;
margin: 40px 0;
} }
} }
#login { #login {
@include box-sizing(border-box); @include box-sizing(border-box);
max-width: 530px; max-width: 530px;
padding: 15px;
background: $darkgrey;
border-radius: 0 0 4px 4px;
@include breakpoint(630px) { @include breakpoint(630px) {
max-width: 264px; max-width: 264px;
padding: 15px;
} }
div { div { // Yes. Really. Every Div.
position:relative; position:relative;
margin:0 0 5px 0; margin:0 0 5px 0;
background: lighten($darkgrey, 15%); background: lighten($darkgrey, 10%);
float: left; float: left;
@include breakpoint(630px) { margin-bottom: 1em; }
} }
input { input {
display:inline-block; display:inline-block;
clear:both; clear:both;
margin:0; margin:0;
padding-left: 8px; padding: 8px 0 8px 8px;
width: 168px; width: 188px;
position: relative; position: relative;
border: none; border: none;
color: #fff; color: #fff;
font-size: 1.1em; font-size: 1.1em;
font-weight: 200;
background: transparent; background: transparent;
box-shadow: none;
@include transition(none); @include transition(none);
&:focus { &:focus {
background: lighten($darkgrey, 22%); background: lighten($darkgrey, 15%);
border-color: #000; border-color: #000;
} }
@include breakpoint(630px) { @include breakpoint(630px) {
width:201px; width:236px;
@include transition(none); @include transition(none);
} }
@ -95,8 +81,8 @@
.email-wrap { .email-wrap {
position:relative; position:relative;
@include icon($i-mail, 12px) {position:absolute;bottom:8px;left:8px;z-index:100;}; @include icon($i-mail, 12px) {position:absolute;bottom:11px;left:8px;z-index:100;};
margin-right: 2px; margin-right: 3px;
border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px;
@include breakpoint(630px) { @include breakpoint(630px) {
@ -111,7 +97,7 @@
.password-wrap { .password-wrap {
position:relative; position:relative;
@include icon($i-lock, 10px) {position:absolute;bottom:9px;left:11px;z-index:100;}; @include icon($i-lock, 10px) {position:absolute;bottom:12px;left:11px;z-index:100;};
border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0;
@include breakpoint(630px) { @include breakpoint(630px) {
@ -125,10 +111,10 @@
} }
button { button {
width: 80px; width: 85px;
height: 30px; height: 36px;
margin:0 0 0 15px; margin:0 0 0 10px;
padding: 9px; padding: 0.5em 1.37em;
min-height: 30px; min-height: 30px;
min-width: 80px; min-width: 80px;
box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset; box-shadow: rgba(255,255,255,0.15) 0 1px 0 inset;
@ -136,6 +122,21 @@
@include breakpoint(630px) { @include breakpoint(630px) {
margin:0; margin:0;
width: 100%; width: 100%;
margin-bottom: 1em;
}
}
.meta {
clear:both;
}
a {
color: darken($midgrey, 10%);
font-size: 0.9em;
&:hover {
color: $lightgrey;
text-decoration: none;
} }
} }

5
core/admin/views/login.hbs
View file

@ -1,6 +1,5 @@
{{!< default}} {{!< default}}
<section class="login-box"> <section class="login-box">
<img class="login-logo" src="/core/admin/assets/img/logo.png" alt="" />
<form id="login" method="post"> <form id="login" method="post">
<div class="email-wrap"> <div class="email-wrap">
<input class="email" type="text" placeholder="Email Address" name="email"> <input class="email" type="text" placeholder="Email Address" name="email">
@ -9,6 +8,8 @@
<input class="password" type="password" placeholder="Password" name="password"> <input class="password" type="password" placeholder="Password" name="password">
</div> </div>
<button class="button-save" type="submit">Log in</button> <button class="button-save" type="submit">Log in</button>
<a href="/ghost/register/">Register</a> <section class="meta">
<a class="forgotten-password" href="#">Forgotten password?</a> &bull; <a href="/ghost/register/">Register new user</a>
</section>
</form> </form>
</section> </section>

9
core/admin/views/register.hbs
View file

@ -1,6 +1,6 @@
{{!< default}} {{!< default}}
<img class="login-logo" src="/core/admin/assets/img/logo.png" alt="" /> <section class="login-box">
<form id="register" method="post"> <form id="register" method="post">
<div class="email-wrap"> <div class="email-wrap">
<input class="email_address" type="text" placeholder="Email Address" name="email_address"> <input class="email_address" type="text" placeholder="Email Address" name="email_address">
</div> </div>
@ -8,5 +8,8 @@
<input class="password" type="password" placeholder="Password" name="password"> <input class="password" type="password" placeholder="Password" name="password">
</div> </div>
<button class="button-save" type="submit">Register</button> <button class="button-save" type="submit">Register</button>
<section class="meta">
<a href="/ghost/login/">Log in</a> <a href="/ghost/login/">Log in</a>
</form> </section>
</form>
</section>