From 2a5714bdc33bf6be89265afc7642363266363cc3 Mon Sep 17 00:00:00 2001
From: Aron Carroll <self@aroncarroll.com>
Date: Mon, 11 Jun 2012 18:33:03 +0100
Subject: [PATCH] [2507] Resize the search input to fill horizontal width

This solution uses JavaScript to resize the form input to fill the
horizontal width regardless of the size of the submit button. The
input is set to a smaller width by default so that the input and button
will fit on one line by default.
---
 ckan/public/css/style.css          |  4 +---
 ckan/public/scripts/application.js | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/ckan/public/css/style.css b/ckan/public/css/style.css
index 9644473089b..3d9758013ce 100644
--- a/ckan/public/css/style.css
+++ b/ckan/public/css/style.css
@@ -719,10 +719,9 @@ body.package.search #menusearch {
 }
 .dataset-search {
   margin-bottom: 35px;
-  padding-right: 100px;
 }
 input.search {
-  width: 100%;
+  width: 380px;
   float: left;
   font-size: 1.2em;
   margin: 0px;
@@ -740,7 +739,6 @@ input.search {
     display: inline-block;
     float: left;
     margin-left: 9px;
-    margin-right: -100px;
 }
 
 
diff --git a/ckan/public/scripts/application.js b/ckan/public/scripts/application.js
index 72124f00f18..b897c4ae6e1 100644
--- a/ckan/public/scripts/application.js
+++ b/ckan/public/scripts/application.js
@@ -51,6 +51,24 @@ CKAN.Utils = CKAN.Utils || {};
       CKAN.DataPreview.loadEmbeddedPreview(preload_resource, reclineState);
     }
 
+    if ($(document.body).hasClass('search')) {
+      // Calculate the optimal width for the search input regardless of the
+      // width of the submit button (which can vary depending on translation).
+      (function resizeSearchInput() {
+        var form = $('#dataset-search'),
+            input = form.find('[name=q]'),
+            button = form.find('[type=submit]'),
+            offset = parseFloat(button.css('margin-left'));
+
+        // Grab the horizontal properties of the input that affect the width.
+        $.each(['padding-left', 'padding-right', 'border-left-width', 'border-right-width'], function (i, prop) {
+          offset += parseFloat(input.css(prop)) || 0;
+        });
+
+        input.width(form.outerWidth() - button.outerWidth() - offset);
+      })();
+    }
+
     var isDatasetNew = $('body.package.new').length > 0;
     if (isDatasetNew) {
       // Set up magic URL slug editor