UX: slide in animation for login/signup modals
This commit is contained in:
parent
90de61ee3d
commit
75705f3a98
|
@ -157,20 +157,21 @@ const ApplicationRoute = Discourse.Route.extend({
|
|||
const returnPath = encodeURIComponent(window.location.pathname);
|
||||
window.location = Discourse.getURL('/session/sso?return_path=' + returnPath);
|
||||
} else {
|
||||
this._autoLogin('login', () => this.controllerFor('login').resetForm());
|
||||
this._autoLogin('login', 'login-modal', () => this.controllerFor('login').resetForm());
|
||||
}
|
||||
},
|
||||
|
||||
handleShowCreateAccount() {
|
||||
this._autoLogin('createAccount');
|
||||
this._autoLogin('createAccount', 'create-account');
|
||||
},
|
||||
|
||||
_autoLogin(modal, notAuto) {
|
||||
_autoLogin(modal, modalClass, notAuto) {
|
||||
const methods = Em.get('Discourse.LoginMethod.all');
|
||||
if (!this.siteSettings.enable_local_logins && methods.length === 1) {
|
||||
this.controllerFor('login').send('externalLogin', methods[0]);
|
||||
} else {
|
||||
showModal(modal);
|
||||
this.controllerFor('modal').set('modalClass', modalClass);
|
||||
if (notAuto) { notAuto(); }
|
||||
}
|
||||
},
|
||||
|
|
|
@ -1,23 +1,19 @@
|
|||
<div class="modal-outer-container">
|
||||
<div class="modal-middle-container">
|
||||
<div class="modal-inner-container">
|
||||
|
||||
<div class="modal-header">
|
||||
<a class="close" {{action "closeModal"}}><i class='fa fa-times'></i></a>
|
||||
<a class="close" {{action "closeModal"}}>{{fa-icon "times"}}</a>
|
||||
<h3>{{title}}</h3>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div id='modal-alert'></div>
|
||||
|
||||
{{outlet "modalBody"}}
|
||||
|
||||
{{#each error in errors}}
|
||||
<div class="alert alert-error">
|
||||
<button class="close" data-dismiss="alert">×</button>
|
||||
{{error}}
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -27,21 +27,31 @@
|
|||
.modal-backdrop,
|
||||
.modal-backdrop.fade.in {
|
||||
-webkit-animation: fade .3s;
|
||||
animation: fade .3s;
|
||||
animation: fade .3s;
|
||||
opacity: .9;
|
||||
filter: alpha(opacity=90);
|
||||
}
|
||||
|
||||
//fade in
|
||||
|
||||
// fade in
|
||||
@keyframes fade {
|
||||
from {opacity: 0}
|
||||
to {opacity: .9}
|
||||
from { opacity: 0 }
|
||||
to { opacity: .9 }
|
||||
}
|
||||
|
||||
@-webkit-keyframes fade {
|
||||
from {opacity: 0}
|
||||
to {opacity: .9}
|
||||
from { opacity: 0 }
|
||||
to { opacity: .9 }
|
||||
}
|
||||
|
||||
// slide in
|
||||
@keyframes slidein {
|
||||
from { transform: translateY(-20%); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes slidein {
|
||||
from { transform: translateY(-20%); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
|
||||
.modal-outer-container {
|
||||
|
@ -61,6 +71,12 @@
|
|||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.create-account.in .modal-inner-container,
|
||||
.login-modal.in .modal-inner-container {
|
||||
-webkit-animation: slidein .3s;
|
||||
animation: slidein .3s;
|
||||
}
|
||||
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
|
|
Loading…
Reference in New Issue