More responsive advanced search

By default, rather than having blocks of search filters with an explicit
width of 800px or 850px, just have one line of filters that wraps
according to the width of the page (truly responsive).

Also move all inline styles into style.css so we can more easily
manipulate them based on media queries. And notice silly styles that can
be easily swapped out with clean styles.

Signed-off-by: Dan Scott <dscott@laurentian.ca>

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index 833a2d9..7c08f5f 100644 (file)
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -289,9 +289,10 @@ span.dash_divider {
 
 #adv_search_filters {
     position: relative;
-    width: 850px;
 }
-
+#adv_search_rows {
+    border-bottom: none;
+}
 #adv_filter_block {
     padding: 15px;
     float: left;
@@ -304,6 +305,7 @@ span.dash_divider {
 #adv_special_block {
     float: left;
     padding: 5px;
+    margin-top: 5px;
 }
 
 #adv_search_submit {
@@ -904,7 +906,6 @@ table.acct_notes th {
 .search_catalog_lbl {
     font-size: [% css_fonts.size_bigger %];
 }
-
 .adv_search_catalog_lbl {
     font-size: [% css_fonts.size_bigger %];
 }
@@ -956,11 +957,17 @@ table.acct_notes th {
     padding: 10px; border: 1px solid [% css_colors.accent_medium_dark %];
     text-align: center;
 }
-
+#adv_search_input { width: 100%; }
 #adv_search_parent {
     margin-bottom:0px;
 }
-
+#search-submit-spinner {
+    height: 16px;
+    width: 16px;
+}
+div.adv_search_available {
+    margin-top: 1em;
+}
 #myopac_loading {
     width:100%;
     text-align:center;
@@ -1111,8 +1118,11 @@ div.facet_sidebar {
 }
 
 .advanced_div { padding-top: 15px; }
+#adv_global_search { width: 100%; }
 #adv_global_search select { width: 13em; }
-#adv_global_row { nowrap: 'nowrap'; }
+#adv_global_row { white-space: nowrap; }
+#adv_global_addrow td { padding-top: 7px; }
+#adv_global_input_table { width: 100%; }
 #adv_global_input_table select { width: 7em; }
 .adv_adv_link {
     font-size: [% css_fonts.size_smaller %];

diff --git a/Open-ILS/src/templates/opac/parts/advanced/search.tt2 b/Open-ILS/src/templates/opac/parts/advanced/search.tt2
index 7297756..629b00e 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/advanced/search.tt2
+++ b/Open-ILS/src/templates/opac/parts/advanced/search.tt2
@@ -3,15 +3,15 @@
     PROCESS get_library;
 %]
 <form action="[% ctx.opac_root %]/results" method="get">
-<div id='adv_global_search' class='data_grid data_grid_center' width='100%'>
-    <div id='adv_search_rows' style='border-bottom: none;'>
+<div id='adv_global_search' class='data_grid data_grid_center'>
+    <div id='adv_search_rows'>
         <!-- Contains the user-addable(?) rows to define search class, containment and text -->
         <div valign='top' class='adv_global_input_container'>
-            <table width='100%' id='adv_global_input_table'>
+            <table id='adv_global_input_table'>
                 <thead>
                     <tr>
                         <td>
-                            <div style="width:100%;" class="header_middle">
+                            <div class="header_middle" id="adv_search_input">
                                 [% l("Search Input") %]
                             </div>
                         </td>
@@ -21,7 +21,7 @@
                     [% INCLUDE "opac/parts/advanced/global_row.tt2" %]
                     <!-- add a new row -->
                     <tr id='adv_global_addrow'>
-                        <td align='left' style="padding-top:7px;">
+                        <td align='left'>
                             <a href="javascript:;" id="myopac_new_global_row" onclick='addSearchRow();'>[% l('Add Search Row') %]</a>
                         </td>
                     </tr>
@@ -35,7 +35,7 @@
         <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=''/>
+            <img id='search-submit-spinner' src='/opac/images/progressbar_green.gif' class='hidden' alt=''/>
         </span>
 
         <a href="[% mkurl(ctx.opac_root _ '/advanced', {$loc_name => loc_value}, 1) %]"
@@ -65,12 +65,11 @@
                 CASE "lib_selector";
                     PROCESS "opac/parts/org_selector.tt2";
                         INCLUDE build_org_selector show_loc_groups=1 id="adv_org_selector" %]
-                            <div style="position:relative;top:7px;">
+                            <div class="adv_search_available">
                                 <input type='checkbox' name="modifier"
                                     value="available"[% CGI.param('modifier').grep('available').size ? ' checked="checked"' : '' %]
                                     id='opac.result.limit2avail' />
-                                <label style="top:-2px;"
-                                    for='opac.result.limit2avail'>
+                                <label for='opac.result.limit2avail'>
                                     [% l("Limit to Available") %]</label>
                             </div>
 [%
@@ -89,7 +88,7 @@
                                     [%  END %]
                             </select>    
                             <br/>
-                            <div id='adv_special_block' style='margin-top:5px;'>
+                            <div id='adv_special_block'>
                                 <input name='date1' type='text' size='4' maxlength='4' value="[% CGI.param('date1') | html %]" />
                                 <span id='adv_global_pub_date_2_span' class='[% CGI.param("pubdate") == "between" ? "" : "hide_me" %]'>
                                    [% l("and") %] <input name='date2' type='text' size='4' maxlength='4' value="[% CGI.param('date2') | html %]" />

diff --git a/Open-ILS/src/templates/opac/parts/config.tt2 b/Open-ILS/src/templates/opac/parts/config.tt2
index d798fb9..a11b705 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/config.tt2
+++ b/Open-ILS/src/templates/opac/parts/config.tt2
@@ -112,7 +112,7 @@ search.adv_config = [
     {adv_label => l("Item Type"), adv_attr => ["mattype", "item_type"]},
     {adv_label => l("Item Form"), adv_attr => "item_form"},
     {adv_label => l("Language"),  adv_attr => "item_lang"},
-    {adv_label => l("Audience"),  adv_attr => ["audience_group", "audience"], adv_break => 1},
+    {adv_label => l("Audience"),  adv_attr => ["audience_group", "audience"]},
     {adv_label => l("Video Format"), adv_attr => "vr_format"},
     {adv_label => l("Bib Level"), adv_attr => "bib_level"},
     {adv_label => l("Literary Form"), adv_attr => "lit_form"},