Show/hide facets & search results in mobile mode

Use CSS + a bit of JavaScript to show/hide facets and results, and
anchor the page accordingly.

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 8841502..491802a 100644 (file)
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -1007,7 +1007,10 @@ div.adv_search_available {
 .facetFieldLineValue { overflow: hidden; text-overflow: ellipsis; }
 [%- END -%]
 
-div.facet_sidebar {
+div#result_block {
+    float: left;
+}
+div#facet_sidebar {
     float: left;
     border-right: 1px solid [% css_colors.border_standard %];
     margin-right: 1em;
@@ -1655,7 +1658,7 @@ a.preflib_change {
     clear: both;
 }
 
-.small_view_only, #refine_hits {
+.small_view_only, #refine_hits, #return_to_hits {
     display: none;
 }
 
@@ -1908,10 +1911,16 @@ a.preflib_change {
     .facet_template .count {
         padding-left: 1em;
     }
-    .facet_sidebar {
+    #facet_sidebar {
         margin-top: 0.5em;
     }
-    #refine_hits {
+    .facet_sidebar_hidden, .result_block_hidden {
+        display: none;
+    }
+    .facet_sidebar_visible, .result_block_visible {
+        display: visible;
+    }
+    #refine_hits, #return_to_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 394bfe8..f2bb4b8 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/result/table.tt2
+++ b/Open-ILS/src/templates/opac/parts/result/table.tt2
@@ -10,8 +10,6 @@
 
 %]
 
-<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 %]
@@ -22,7 +20,8 @@
 </div>
 [% END %]
 <div id="result_table_div">
-            <div class="result_block">
+            <div id="result_block" class="result_block_visible">
+                <div id="refine_hits"><a onclick="getFacety();">[% l('Refine these results') %]</a></div>
                 <table cellpadding="0" cellspacing="0"
                     border="0" style="margin-top:10px;">
                     <tbody id="result_table">
@@ -355,29 +354,36 @@ END;
                     </tbody>
                 </table>
             </div>
-    <div class="facet_sidebar" id="facet_sidebar">
+    <div class="facet_sidebar_hidden" id="facet_sidebar">
+        <div id="return_to_hits"><a onclick="getResulty();">[% l('Back to results') %]</a></div>
     [% 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 class="result_footer_nav1">
     [% ctx.results_count_header %]
 </div>
+<script>
+resultBlock = document.querySelector('#result_block');
+facetSidebar = document.querySelector('#facet_sidebar');
+function getFacety() {
+    resultBlock.setAttribute('class', 'result_block_hidden');
+    facetSidebar.setAttribute('class', 'facet_sidebar_visible');
+    window.location.hash = 'facet_sidebar';
+}
+function getResulty() {
+    resultBlock.setAttribute('class', 'result_block_visible');
+    facetSidebar.setAttribute('class', 'facet_sidebar_hidden');
+    window.location.hash = 'result_block';
+}
+function moveFacets() {
+    var clientWidth = document.documentElement.clientWidth;
+    if (clientWidth >= 600) {
+        if (resultBlock && facetSidebar) {
+            resultBlock.parentNode.insertBefore(facetSidebar, resultBlock);
+        }
+    }
+}
+window.onresize = moveFacets;
+window.onload = moveFacets;
+</script>