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; if the browser
window resizes, then potentially put the facets back on the bottom.

Also add a rudimentary "Refine these results" link at the top of the
page that is only visible when the facets are at the bottom to
facilitate navigation.

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 39c523b..cb552fa 100644 (file)
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -1612,7 +1612,11 @@ a.preflib_change {
     padding-right: 10px;
 }
 
-.small_view_only {
+.result_footer_nav1 {
+    clear: both;
+}
+
+.small_view_only, #refine_hits {
     display: none;
 }
 
@@ -1772,9 +1776,6 @@ a.preflib_change {
     .results_header_nav1 span.h1 {
         display: none;
     }
-    .facet_sidebar {
-        display: none;
-    }
     .preflib {
         display: none;
     }
@@ -1852,4 +1853,20 @@ a.preflib_change {
         padding: 0px;
         margin: 0px;
     }
+    /* Make use of full width in mobile mode */
+    .facet_box_wrapper .box_wrapper .box,
+    .facet_template .facet,
+    .facet_box_temp {
+        width: inherit;
+    }
+    .facet_template .count {
+        padding-left: 1em;
+    }
+    .facet_sidebar {
+        margin-top: 0.5em;
+    }
+    #refine_hits {
+        display: block;
+        padding-left: 15px;
+    }
 }

diff --git a/Open-ILS/src/templates/opac/parts/result/table.tt2 b/Open-ILS/src/templates/opac/parts/result/table.tt2
index 65b475c..ca6939f 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/result/table.tt2
+++ b/Open-ILS/src/templates/opac/parts/result/table.tt2
@@ -10,10 +10,11 @@
 
 %]
 
+<div id="refine_hits"><a href="#facet_sidebar">[% l('Refine these results') %]</a></div>
+
 [% PROCESS "opac/parts/result/paginate.tt2" %] 
 [% ctx.results_count_header = PROCESS results_count_header;
     ctx.results_count_header %]
-
 [% IF ctx.bookbag %]
 <div id="result-bookbag-heading">
     <div class="result-bookbag-name">[% ctx.bookbag.name | html %]</div>
@@ -21,10 +22,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,7 +356,29 @@ END;
                     </tbody>
                 </table>
             </div>
+    <div class="facet_sidebar" id="facet_sidebar">
+    [% INCLUDE "opac/parts/staff_saved_searches.tt2" %]
+    [% INCLUDE 'opac/parts/result/facets.tt2' %]
+    </div>
+    <script>
+        function showHideFacets() {
+            var clientWidth = document.documentElement.clientWidth;
+            resultBlock = document.querySelector('.result_block');
+            facetSidebar = document.querySelector('.facet_sidebar');
+            if (clientWidth >= 600) {
+                if (resultBlock && facetSidebar) {
+                    resultBlock.parentNode.insertBefore(facetSidebar, resultBlock);
+                }
+            } else if (clientWidth < 600) {
+                if (resultBlock && facetSidebar) {
+                    resultBlock.parentNode.insertBefore(resultBlock, facetSidebar);
+                }
+            }
+        }
+        window.onresize = showHideFacets;
+        window.onload = showHideFacets;
+    </script>
 </div>
-<div>
+<div class="result_footer_nav1">
     [% ctx.results_count_header %]
 </div>