Dialog sizing, titles, and z-index. This should ensure the small <500px dialogs

are correct, all titles are correctly sized, and the dialog boxes go to
the top for older themes, too.

3 files changed, 14 insertions, 10 deletions

diff --git a/lib/gallery.dialog.js b/lib/gallery.dialog.js
index b4557493..a771adcb 100644
--- a/lib/gallery.dialog.js
+++ b/lib/gallery.dialog.js
@@ -28,9 +28,6 @@
          $("#g-dialog").dialog("close");
        }
        $("body").append(eDialog);
-       if (!self.options.zIndex) {
-         self.options.zIndex = 9999;
-       }
 
        if (!self.options.close) {
          self.options.close = self.close_dialog;
@@ -79,8 +76,7 @@
      _layout: function() {
        var dialogWidth;
        var dialogHeight = $("#g-dialog").height();
-       var cssWidth = new String($("#g-dialog form").css("width"));
-       var childWidth = cssWidth.replace(/[^0-9]/g,"");
+       var childWidth = $("#g-dialog form").width();
        var size = $.gallery_get_viewport_size();
        if ($("#g-dialog iframe").length) {
          dialogWidth = size.width() - 100;
@@ -89,8 +85,10 @@
        } else if ($("#g-dialog .g-dialog-panel").length) {
          dialogWidth = size.width() - 100;
          $("#g-dialog").dialog("option", "height", size.height() - 100);
-       } else {
+       } else if (childWidth <= 150 || childWidth > 300) {
          dialogWidth = 500;
+       } else {
+         dialogWidth = 300;
        }
        $("#g-dialog").dialog('option', 'width', dialogWidth);
      },
@@ -183,6 +181,7 @@
        } else if ($("#g-dialog fieldset legend").length) {
          $("#g-dialog").dialog('option', 'title', $("#g-dialog fieldset legend:eq(0)").html());
        }
+       $(".ui-dialog-title").width('auto');
      },
 
      form_closing: function(event, ui) {},
diff --git a/modules/gallery/css/gallery.css b/modules/gallery/css/gallery.css
index 7e711156..d3f7dcca 100644
--- a/modules/gallery/css/gallery.css
+++ b/modules/gallery/css/gallery.css
@@ -149,6 +149,15 @@
   text-align: center;
 }
 
+/* Dialogs ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+/**
+ * Newer Themeroller-based themes do this on their own, but older
+ * themes need help ensuring that dialogs and overlays are on top
+ */
+.ui-front {
+  z-index: 1000
+}
+
 /** *******************************************************************
  * 2) Admin
  **********************************************************************/
diff --git a/themes/wind/css/screen.css b/themes/wind/css/screen.css
index e19427f3..6f98cbba 100644
--- a/themes/wind/css/screen.css
+++ b/themes/wind/css/screen.css
@@ -886,10 +886,6 @@ ul.sf-menu li li li.sfHover ul {
   opacity: .7;
 }
 
-.ui-dialog {
-  z-index: 9999;
-}
-
 /* Buttons ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 .g-button {