Make facets visible in mobile mode with "Refine" link

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 2927b08..0a59ee4 100644 (file)
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -1611,6 +1611,14 @@ a.preflib_change {
     padding-right: 10px;
 }
 
+.result_footer_nav1 {
+    clear: both;
+}
+
+#refine_hits {
+    display: none;
+}
+
 @media only screen and (max-width: 600px) {
     #header {
         padding: 0px;
@@ -1647,9 +1655,6 @@ a.preflib_change {
     .results_header_nav1 span.h1 {
         display: none;
     }
-    .facet_sidebar {
-        display: none;
-    }
     .preflib {
         display: none;
     }
@@ -1711,4 +1716,20 @@ a.preflib_change {
     #rdetails_status tr, #rdetails_status td {
         display: block;
     }
+    /* 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 4b4595d..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>
@@ -355,23 +356,29 @@ END;
                     </tbody>
                 </table>
             </div>
-    <div class="facet_sidebar">
+    <div class="facet_sidebar" id="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;
+        function showHideFacets() {
+            var clientWidth = document.documentElement.clientWidth;
             resultBlock = document.querySelector('.result_block');
             facetSidebar = document.querySelector('.facet_sidebar');
-            if (resultBlock && facetSidebar) {
-                resultBlock.parentNode.insertBefore(facetSidebar, resultBlock);
+            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>