3 files changed, 92 insertions, 35 deletions
diff --git a/lib/gallery.common.css b/lib/gallery.common.css
index fc12b401..12d96d41 100644
--- a/lib/gallery.common.css
+++ b/lib/gallery.common.css
@@ -31,6 +31,11 @@
  **********************************************************************/
 
 .g-narrow {
+  width: 25%;
+}
+
+.g-wide {
+  width: 100%;
 }
 
 /** *******************************************************************
@@ -104,9 +109,12 @@ form .g-error {
 }
 
 .g-installed {
+  background-color: #eeeeee;
 }
 
 .g-default {
+	background-color: #c5dbec;
+	font-weight: bold;
 }
 
 .g-draggable,
@@ -214,9 +222,15 @@ form .g-error {
 }
 
 #g-action-status {
+  margin-bottom: 1em;
   width: 100% !important;
 }
 
+#g-action-status li {
+  padding-top: .4em;
+  padding-bottom: .3em;
+}
+
 #g-site-status li {
   border-bottom: 1px solid #ccc;
   padding: .3em .3em .3em 30px;
@@ -324,3 +338,41 @@ form .g-error {
 #g-dialog .g-cancel {
   margin: .4em 1em;
 }
+
+/* Inline layout (forms, lists) ~~~~~~~~~~ */
+
+.g-short-form label {
+  display: none;
+}
+
+.g-short-form fieldset {
+  border: none;
+  padding: 0 !important;
+}
+
+.g-short-form li {
+  float: left;
+  padding: .4em 0;
+}
+
+.g-short-form input[type="text"] {
+  color: #666;
+  padding: .3em .6em;
+  width: auto;
+}
+
+.g-short-form .g-cancel {
+  display: block;
+  padding: .2em .8em;
+}
+
+#g-sidebar .g-short-form li {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/* Right to left styles ~~~~~~~~~~~~~~~~~~~~ */
+
+.rtl .g-short-form li {
+  float: right;
+}
diff --git a/lib/gallery.common.js b/lib/gallery.common.js
index 4ac6de70..7c52fef0 100644
--- a/lib/gallery.common.js
+++ b/lib/gallery.common.js
@@ -1,4 +1,6 @@
 (function ($) {
+
+  // Fade in action status message background color
   $.fn.gallery_show_message = function(message) {
     return this.each(function(i){
       $(this).effect("highlight", {"color": "white"}, 3000);
@@ -17,7 +19,6 @@
     return $(this).height(tallest_height);
   };
 
-
   // Vertically align a block element's content
   $.fn.gallery_valign = function(container) {
     return this.each(function(i){
@@ -123,6 +124,7 @@
     $(thumb).attr({src: data.src, width: data.width, height: data.height});
   };
 
+  // Initialize context menus
   $.fn.gallery_context_menu = function() {
     if ($(".g-context-menu li").length) {  
       var hover_target = ".g-context-menu";
@@ -144,6 +146,7 @@
     }
   };
 
+  // Size a container to fit within the browser window
   $.gallery_auto_fit_window = function(imageWidth, imageHeight) {
     var size = $.gallery_get_viewport_size();
     var width = size.width() - 6,
@@ -169,4 +172,40 @@
       };
   };
 
+  // Initialize a short form. Short forms may contain only one text input.
+  $.fn.gallery_short_form = function() {
+    return this.each(function(i){
+      var label = $(this).find("label:first");
+      var input = $(this).find("input[type=text]:first");
+      var button = $(this).find("input[type=submit]");
+
+      $(".g-short-form").addClass("ui-helper-clearfix");
+      $(".g-short-form input[type=text]").addClass("ui-corner-left");
+      $(".g-short-form input[type=submit]").addClass("ui-state-default ui-corner-right");
+
+      // Set the input value equal to label text
+      if (input.val() == "") {
+        input.val(label.html());
+        button.enable(false);
+      }
+
+      // Attach event listeners to the input
+      input.bind("focus", function(e) {
+        // Empty input value if it equals it's label
+        if ($(this).val() == label.html()) {
+          $(this).val("");
+        }
+        button.enable(true);
+      });
+
+      input.bind("blur", function(e){
+        // Reset the input value if it's empty
+        if ($(this).val() == "") {
+          $(this).val(label.html());
+          button.enable(false);
+        }
+      });
+    });
+  };
+
 })(jQuery);
diff --git a/lib/gallery.form.js b/lib/gallery.form.js
deleted file mode 100644
index 77ce3b7d..00000000
--- a/lib/gallery.form.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Initialize a short form. Short forms may contain only one text input.
- *
- * @param form_id string The form's CSS id
- */
-function short_form_init(form_id) {
-  var form = $(form_id);
-  var label = form.find("label:first");
-  var input = form.find("input[type=text]:first");
-  var button = form.find("input[type=submit]");
-
-  // Set the input value equal to label text
-  if (input.val() == "") {
-    input.val(label.html());
-    button.enable(false);
-  }
-
-  // Attach event listeners to the input
-  input.bind("focus", function(e) {
-    // Empty input value if it equals it's label
-    if ($(this).val() == label.html()) {
-      $(this).val("");
-    }
-    button.enable(true);
-  });
-
-  input.bind("blur", function(e){
-    // Reset the input value if it's empty
-    if ($(this).val() == "") {
-      $(this).val(label.html());
-      button.enable(false);
-    }
-  });
-}