Bug Fix: Login centering now works correctly

This also adds in additional functionality to the .center() plugin. A choice to animate centering and also the success event fired.

ghost/admin/assets/lib/jquery-utils.js

@@ -23,18 +23,31 @@
      * Center an element to the window vertically and centrally
      * @returns {*}
      */
-    $.fn.center = function () {
-        this.css({
-            'position': 'fixed',
-            'left': '50%',
-            'top': '50%'
+    $.fn.center = function (options) {
+        var $window = $(window),
+            config = $.extend({
+                animate        : true,
+                successTrigger : 'centered'
+            }, options);
+
+        return this.each(function () {
+            var $this = $(this);
+            $this.css({
+                'position': 'absolute'
+            });
+            if (config.animate) {
+                $this.animate({
+                    'left': ($window.width() / 2) - $this.outerWidth() / 2 + 'px',
+                    'top': ($window.height() / 2) - $this.outerHeight() / 2 + 'px'
+                });
+            } else {
+                $this.css({
+                    'left': ($window.width() / 2) - $this.outerWidth() / 2 + 'px',
+                    'top': ($window.height() / 2) - $this.outerHeight() / 2 + 'px'
+                });
+            }
+            $(window).trigger(config.successTrigger);
         });
-        this.css({
-            'margin-left': -this.outerWidth() / 2 + 'px',
-            'margin-top': -this.outerHeight() / 2 + 'px'
-        });
-        $(window).trigger('centered');
-        return this;
     };
 
     $.fn.selectText = function () {

ghost/admin/views/base.js

@@ -254,7 +254,7 @@
         },
         afterRender: function () {
             this.$(".modal-content").html(this.addSubview(new Ghost.Views.Modal.ContentView({model: this.model})).render().el);
-            this.$el.children(".js-modal").center().css("max-height", $(window).height() - 120); // same as resize(), but the debounce causes init lag
+            this.$el.children(".js-modal").center({animate: false}).css("max-height", $(window).height() - 120); // same as resize(), but the debounce causes init lag
             this.$el.addClass("active dark");
 
             if (document.body.style.webkitFilter !== undefined) { // Detect webkit filters