De-table the advanced search to allow for mobile resizing.

A first stab at allowing the advanced search page to resize for mobile use.
Much of the style included was borrowed from Jason Boyer.  Critical changes
occur in the adv_search_xxx type id's in the non-mobile style.

to-do: See if there's any hope for the search rows.  Not sure what can be
done to make them fit any better.

Signed-off-by: Bill Ott <bott@grpl.org>
Signed-off-by: Ben Shum <bshum@biblio.org>

Conflicts:
	Open-ILS/src/templates/opac/css/style.css.tt2
	Open-ILS/src/templates/opac/parts/advanced/search.tt2

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 b7c0fbd..1caa0b9 100644 (file)
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -262,7 +262,7 @@ span.dash_divider {
 
 #adv_search_tabs, #acct_tabs, #acct_fines_tabs, #acct_checked_tabs, #acct_holds_tabs, #acct_prefs_tabs, #results_header_inner{
     height: 40px;
-    margin-left: 1em;
+    margin-left: 2px;
 }
 
 #adv_search_tabs a, #acct_tabs a, #acct_fines_tabs a, #acct_checked_tabs a, #acct_holds_tabs a, #acct_prefs_tabs a {
@@ -291,6 +291,31 @@ span.dash_divider {
     text-decoration: none;
 }
 
+#adv_search_filters {
+    position: relative;
+    width: 800px;
+}
+
+#adv_filter_block {
+    padding: 15px;
+    float: left;
+}
+#adv_filter_block_item {
+    float: left;
+    padding: 5px;
+}
+
+#adv_special_block {
+    float: left;
+    padding: 5px;
+}
+
+#adv_search_submit {
+    position: relative;
+    margin-left: 10px;
+
+}
+
 .checkbox_col {
     width: 1%;
     padding-left: 10px !important;
@@ -1070,6 +1095,7 @@ div.facet_sidebar {
 
 .advanced_div { padding-top: 15px; }
 #adv_global_search select { width: 13em; }
+#adv_global_row { nowrap: 'nowrap'; }
 #adv_global_input_table select { width: 7em; }
 .adv_adv_link {
     font-size: [% css_fonts.size_smaller %];
@@ -1622,7 +1648,7 @@ a.preflib_change {
         width:75%;
     }
     #home_adv_search_link {
-        display: none;
+        display: block;
     }
     #format_selector {
         display:none;
@@ -1648,7 +1674,7 @@ a.preflib_change {
         display: none;
     }
     #search-wrapper {
-        display: none;
+        display: block;
     }
     #simple-detail-view-links {
         display: none;
@@ -1850,4 +1876,13 @@ a.preflib_change {
         display: block;
         padding-left: 15px;
     }
+    #myopac_tabs, #adv_search_parent, #fines_payments_wrapper {
+        background: [% css_colors.primary_fade %];
+        font-size: 10px;
+    }
+    #adv_search_filters {                                                                                                                             
+        position: relative;                                                                                                                           
+        width: 300px;
+    }
+
 }

diff --git a/Open-ILS/src/templates/opac/parts/advanced/search.tt2 b/Open-ILS/src/templates/opac/parts/advanced/search.tt2
index e7e6b09..ff88938 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/advanced/search.tt2
+++ b/Open-ILS/src/templates/opac/parts/advanced/search.tt2
@@ -3,10 +3,10 @@
     PROCESS get_library;
 %]
 <form action="[% ctx.opac_root %]/results" method="get">
-<table id='adv_global_search' class='data_grid data_grid_center' width='100%'>
-    <tr style='border-bottom: none;'>
+<div id='adv_global_search' class='data_grid data_grid_center' width='100%'>
+    <div id='adv_search_rows' style='border-bottom: none;'>
         <!-- Contains the user-addable(?) rows to define search class, containment and text -->
-        <td valign='top' class='adv_global_input_container'>
+        <div valign='top' class='adv_global_input_container'>
             <table width='100%' id='adv_global_input_table'>
                 <thead>
                     <tr>
@@ -27,23 +27,36 @@
                     </tr>
                 </tbody>
             </table>
-        </td>
-    </tr>
-    <tr>
-        <td align='top'>
-          <div style="width:100%;" class="header_middle">[% l('Search Filters') %]</div>
-          <table cellpadding='10' cellspacing='0' border='0'>
+        </div>
+    </div>
+
+    <div id='adv_search_submit'>
+        <input type="hidden" name="_adv" value="1" />
+        <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>
+
+        <a href="[% mkurl(ctx.opac_root _ '/advanced', {$loc_name => loc_value}, 1) %]"
+            class="pointer opac-button">[% l('Clear Form') %]</a>
+    </div>
+
+    <div id='adv_search_filters'>
+        <div class="header_middle">[% l('Search Filters') %]</div>
+
 [%
     in_row = 0;
     FOR adv_chunk IN search.adv_config;
         NEXT IF adv_chunk.adv_hide;
         IF in_row == 0;
             in_row = 1; %]
-            <tr>
+            <div id='adv_filter_block'>
 [%
         END; %]
-            <td valign='top'[% IF adv_chunk.js_only %] 
-                id='adv_chunk_[% adv_chunk.adv_special %]' 
+            <div id='adv_filter_block_item'>
+            <div valign='top'[% IF adv_chunk.js_only %]
+                id='adv_chunk_[% adv_chunk.adv_special %]'
                 class='hidden'[% END %]>
                 <strong>[% adv_chunk.adv_label %]</strong><br />
 [%
@@ -56,7 +69,7 @@
                                 <input type='checkbox' name="modifier"
                                     value="available"[% CGI.param('modifier').grep('available').size ? ' checked="checked"' : '' %]
                                     id='opac.result.limit2avail' />
-                                <label style="position:relative;top:-2px;"
+                                <label style="top:-2px;"
                                     for='opac.result.limit2avail'>
                                     [% l("Limit to Available") %]</label>
                             </div>
@@ -75,7 +88,8 @@
                                         <option value="[% opt.code %]"[% CGI.param('pubdate') == opt.code ? ' selected="selected"' : '' %]>[% opt.label | html %]</option>
                                     [%  END %]
                             </select>    
-                            <div style='margin-top:5px;'>
+                            <br/>
+                            <div id='adv_special_block' style='margin-top:5px;'>
                                 <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 %]" />
@@ -100,25 +114,18 @@
             INCLUDE "opac/parts/filter_group_selector.tt2"
                 filter_group=adv_chunk.adv_filter multiple="multiple" size=adv_chunk.adv_size || search.default_adv_select_height || "4";
         END; %]
-            </td>
+            </div>
+        </div>
 [%
         IF adv_chunk.adv_break;
             in_row = 0; %]
-            </tr>
+            </div>
 [%
         END;
     END; %]
-            </table>
-        </td>
-    </tr>
-</table>
-<input type="hidden" name="_adv" value="1" />
-           <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>
 
-<a href="[% mkurl(ctx.opac_root _ '/advanced', {$loc_name => loc_value}, 1) %]"
-    class="pointer opac-button">[% l('Clear Form') %]</a>
+            </div>
+        </div>
+    </div>
+</div>
 </form>