Revamp the search bar to a narrative, single-line style

Signed-off-by: Dan Scott <dscott@laurentian.ca>
Signed-off-by: Thomas Berezansky <tsbere@mvlc.org>

diff --git a/Open-ILS/src/templates/opac/parts/searchbar.tt2 b/Open-ILS/src/templates/opac/parts/searchbar.tt2
index 79213d2..f212518 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/searchbar.tt2
+++ b/Open-ILS/src/templates/opac/parts/searchbar.tt2
@@ -3,60 +3,40 @@
     [% UNLESS took_care_of_form -%]
     <form action="[% ctx.opac_root %]/results" method="GET">
     [%- END %]
-    <table cellpadding="0" cellspacing="10" border="0">
-        <tr>
-            <td colspan="3">
-                <span class="search_catalog_lbl">[% l('Search the Catalog') %]</span>
-                <a href="[% mkurl(ctx.opac_root _ '/advanced') %]"
-                    id="home_adv_search_link"><span
-                    class="adv_search_font">[% l('Advanced Search') %]</span></a>
-            </td>
-        </tr>
-        <tr>
-            [% IF is_advanced || is_special %]
-            <td colspan="2">
-                <input type="hidden" name="_adv" value="1" />
-            [% ELSE %]
-            <td>
-            [% INCLUDE "opac/parts/qtype_selector.tt2" %]
-            </td>
-            [% END %]
-            [% IF ctx.processed_search_query OR (NOT is_advanced AND NOT is_special) %]
-            <td>
-                <div id="search_box_wrapper">
-                    <!-- Note: when common browsers support HTML5 placeholder text, we can remove the JS -->
-                    <input type="text" id="search_box" name="query" value="[% is_advanced ? ctx.processed_search_query : CGI.param('query') || l("Search Keyword") | html %]"
-                        [% IF is_advanced %]style="width: 450px"[% END %]
-                        onfocus="if (this.value=='[% l("Search Keyword") %]'){this.value='';this.style.color='#000';}"
-                        onblur="if (this.value==''){this.value='[% l("Search Keyword") %]';this.style.color='#999';}"
-                        x-webkit-speech />
-                </div>
-                <input name='page' type='hidden' value="0" />
-            </td>
-            <td valign="top">
-                <div class="pos-abs">
-                    <div class="opac-auto-143">
-                        <input id='search-submit-go' type="submit" value="[% l('Search') %]" alt="[% l('Search') %]" class="opac-button"
-                            onclick='setTimeout(function(){$("search-submit-spinner").className=""; $("search-submit-go").className="hidden"}, 2000)'/>
-                        <img id='search-submit-spinner' src='/opac/images/progressbar_green.gif' style='height:16px;width:16px;' class='hidden' alt=''/>
-                    </div>
-                </div>
-            </td>
-            [% END %]
-        </tr>
-        [% UNLESS is_advanced OR is_special %]
-        <tr>
-            <td>
-                [% INCLUDE "opac/parts/coded_value_selector.tt2" attr=["mattype", "item_type"] none_ok=1 none_label=l('All Formats') %]
-            </td>
-            <td>
-                <span>
-                    [% PROCESS build_org_selector name='loc' value=CGI.param('loc') %]
-                </span>
-            </td>
-        </tr>
+    <div>
+        <span class="search_catalog_lbl">[% l('Search the Catalog') %]</span>
+        <a href="[% mkurl(ctx.opac_root _ '/advanced') %]"
+            id="home_adv_search_link"><span
+            class="adv_search_font">[% l('Advanced Search') %]</span></a>
+    </div>
+    <div style="font-weight: bold">[%- l('Search ');
+        INCLUDE "opac/parts/coded_value_selector.tt2"
+            attr=["mattype", "item_type"] none_ok=1 none_label=l('All Formats');
+            l(' for ');
+        %]
+        <span class='search_box_wrapper'>
+            <input type="text" id="search_box" name="query" value="[% is_advanced ? ctx.processed_search_query : CGI.param('query') || l("Search Keyword") | html %]"
+                onfocus="if (this.value=='[% l("Search Keyword") %]'){this.value='';this.style.color='#000';}"
+                onblur="if (this.value==''){this.value='[% l("Search Keyword") %]';this.style.color='#999';}"
+                x-webkit-speech />
+        </span>
+        [%- INCLUDE "opac/parts/qtype_selector.tt2";
+            l(' in '); PROCESS build_org_selector name='loc' value=CGI.param('loc');
+    %]
+    <span>
+        <input id='search-submit-go' type="submit" value="[% l('Search') %]" alt="[% l('Search') %]" class="opac-button"
+            onclick='setTimeout(function(){$("search-submit-spinner").className=""; $("search-submit-go").className="hidden"}, 2000)'/>
+        <img id='search-submit-spinner' src='/opac/images/progressbar_green.gif' style='height:16px;width:16px;' class='hidden' alt=''/>
+    </span>
+    </div>
+    [% IF is_advanced || is_special %]
+    <div>
+        <input type="hidden" name="_adv" value="1" />
+        [% IF ctx.processed_search_query OR (NOT is_advanced AND NOT is_special) %]
+        <input name='page' type='hidden' value="0" />
         [% END %]
-    </table>
+    <div>
+    [%- END %]
     [% UNLESS took_care_of_form %]</form>[% END %]
     [% IF (is_advanced AND NOT is_special) AND CGI.param('qtype') %]
     <div class="opac-auto-102">

diff --git a/Open-ILS/web/css/skin/default/opac/style.css b/Open-ILS/web/css/skin/default/opac/style.css
index 1e01860..cc896f5 100644 (file)
--- a/Open-ILS/web/css/skin/default/opac/style.css
+++ b/Open-ILS/web/css/skin/default/opac/style.css
@@ -220,7 +220,7 @@ div.select-wrapper:hover {
        background: white;
 }
 
-#search_box_wrapper {
+.search_box_wrapper {
        border:1px solid #e9ebf3;
        padding: 1px;
     padding-left: 3px;