Facets after results, then DOMinate them into place

We can use a media query in JavaScript to detect a given width and then
drop the facets into their left-hand column if needed. Of course, we're
going to need a media query polyfill to support Internet Explorer.

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

diff --git a/Open-ILS/src/templates/opac/parts/result/table.tt2 b/Open-ILS/src/templates/opac/parts/result/table.tt2
index 65b475c..4b4595d 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/result/table.tt2
+++ b/Open-ILS/src/templates/opac/parts/result/table.tt2
@@ -21,10 +21,6 @@
 </div>
 [% END %]
 <div id="result_table_div">
-            <div class="facet_sidebar">
-                [% INCLUDE "opac/parts/staff_saved_searches.tt2" %]
-                [% INCLUDE 'opac/parts/result/facets.tt2' %]
-            </div>
             <div class="result_block">
                 <table cellpadding="0" cellspacing="0"
                     border="0" style="margin-top:10px;">
@@ -359,6 +355,22 @@ END;
                     </tbody>
                 </table>
             </div>
+    <div class="facet_sidebar">
+    [% INCLUDE "opac/parts/staff_saved_searches.tt2" %]
+    [% INCLUDE 'opac/parts/result/facets.tt2' %]
+    </div>
+    <script>
+        var widthQuery = window.matchMedia("(min-width: 600px)");
+        var matched;
+        if (widthQuery && !matched) {
+            matched = 1;
+            resultBlock = document.querySelector('.result_block');
+            facetSidebar = document.querySelector('.facet_sidebar');
+            if (resultBlock && facetSidebar) {
+                resultBlock.parentNode.insertBefore(facetSidebar, resultBlock);
+            }
+        }
+    </script>
 </div>
 <div>
     [% ctx.results_count_header %]