UX: slide in animation for login/signup modals

app/assets/javascripts/discourse/routes/application.js.es6

@@ -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(); }
     }
   },

app/assets/javascripts/discourse/templates/modal/modal.hbs

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

app/assets/stylesheets/common/base/modal.scss

@@ -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}
+  from { opacity: 0 }
-  to {opacity: .9}
+    to { opacity: .9 }
 }
 
 @-webkit-keyframes fade {
-  from {opacity: 0}
+  from { opacity: 0 }
-  to {opacity: .9}
+    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;