TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-09-21 18:08:51 +03:00
Code Issues Projects Releases Wiki Activity

Center login form with CSS instead of JS

Browse Source
This commit is contained in:
John O'Nolan 2013-09-08 17:12:25 +02:00
parent 8a5f96b635
commit 4b40bb5aab
6 changed files with 12 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
core/client/assets/sass/layouts/login.scss
View File

@ -18,16 +18,14 @@
background: $darkgrey;
}
main {
top: 0;
}
}//.ghost-login
.login-box {
max-width: 530px;
height: 90%;
margin: 0 auto;
padding: 0;
display: none;
display: table;
@include breakpoint(630px) {
max-width: 264px;
@ -39,6 +37,8 @@
@include box-sizing(border-box);
max-width: 530px;
color: lighten($midgrey, 15%);
display: table-cell;
vertical-align: middle;
@include breakpoint(630px) {
max-width: 264px;

6
core/client/router.js
View File

@ -19,15 +19,15 @@
},
signup: function () {
Ghost.currentView = new Ghost.Views.Signup({ el: '.js-login-container' });
Ghost.currentView = new Ghost.Views.Signup({ el: '.js-login-box' });
},
login: function () {
Ghost.currentView = new Ghost.Views.Login({ el: '.js-login-container' });
Ghost.currentView = new Ghost.Views.Login({ el: '.js-login-box' });
},
forgotten: function () {
Ghost.currentView = new Ghost.Views.Forgotten({ el: '.js-login-container' });
Ghost.currentView = new Ghost.Views.Forgotten({ el: '.js-login-box' });
},
blog: function () {

30
core/client/views/login.js
View File

@ -6,37 +6,9 @@
Ghost.SimpleFormView = Ghost.View.extend({
initialize: function () {
this.render();
$(window).trigger('resize');
},
afterRender: function () {
var self = this;
$(window).on('resize', self.centerOnResize);
$(window).one('centered', self.fadeInAndFocus);
},
fadeInAndFocus: function () {
$(".js-login-container").fadeIn(750, function () {
$(".js-login-box").fadeIn(500, function () {
$("[name='email']").focus();
});
},
centerOnResize: _.debounce(function (e) {
var container = $(".js-login-container");
container.css({
'position': 'relative'
}).animate({
'top': Math.round($(window).height() / 2) - container.outerHeight() / 2 + 'px'
});
$(window).trigger("centered");
}, 100),
remove: function () {
var self = this;
$(window).off('resize', self.centerOnResize);
$(window).off('centered', self.fadeInAndFocus);
}
});

2
core/server/views/login.hbs
View File

@ -1,4 +1,4 @@
{{!< default}}
<section class="login-box js-login-container">
<section class="login-box js-login-box">
</section>

2
core/server/views/signup.hbs
View File

@ -1,4 +1,4 @@
{{!< default}}
<section class="login-box js-login-container">
<section class="login-box js-login-box">
</section>

4
core/test/functional/admin/01_login_test.js
View File

@ -15,7 +15,7 @@ casper.test.begin('Ensure Session is Killed', 1, function suite(test) {
casper.test.begin('Ensure a User is Registered', 2, function suite(test) {
test.filename = 'login_user_registered_test.png';
casper.start(url + 'ghost/signup/');
casper.start(url + 'ghost/signup/').viewport(1280, 1024);
casper.waitFor(function checkOpaque() {
return this.evaluate(function () {
@ -124,7 +124,7 @@ casper.test.begin("Can login to Ghost", 4, function suite(test) {
casper.waitFor(function checkOpaque() {
return casper.evaluate(function () {
var loginBox = document.querySelector('.login-box');
return window.getComputedStyle(loginBox).getPropertyValue('display') === "block"
return window.getComputedStyle(loginBox).getPropertyValue('display') === "table"
&& window.getComputedStyle(loginBox).getPropertyValue('opacity') === "1";
});
}, function then() {