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>
Signed-off-by: Lebbeous Fogle-Weekley <lebbeous@esilibrary.com>
Signed-off-by: Dan Wells <dbw2@calvin.edu>

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index 3d08ab2..bb4a2f2 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 ff88938..1228a39 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 bd4f77c..65861b2 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/config.tt2
+++ b/Open-ILS/src/templates/opac/parts/config.tt2
@@ -115,7 +115,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"},