LP#1670425: New responsive design for advanced search limiters block

When the screen is 600px or smaller, we continue to only display the 'x filters
applied' link as we did with the sidebar display because displaying limiters
pushes the results too far down the screen. Clicking the link toggles the
display of the limiters.

Signed-off-by: Kathy Lussier <klussier@masslnc.org>
Signed-off-by: Ben Shum <ben@evergreener.net>

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index b8e650d..4954368 100644 (file)
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -1059,13 +1059,12 @@ div.adv_search_available {
 #adv_filter_results_block h4 { display: inline; }
 
 #adv_filter_results_block {
-    margin-top: 10px;
-    margin-bottom: 16px;
+    margin-top: 6px;
 }
 
 .adv_filter_results_block_label {
     font-weight:bold;
-    padding: 4px 6px 4px 12px;
+    padding: 4px 0px 4px 12px;
 }
 
 .adv_filter_results_group {
@@ -1077,9 +1076,15 @@ div.adv_search_available {
     border-width: 1px;
     border-radius: 4px;
     padding: 2px 4px 2px 4px;
-    margin-right:6px;
 }
 
+.adv_filter_results_group_wrapper {
+    display: inline-block;
+    margin-left: 1em;
+    margin-bottom: 8px;
+    }
+
+
 .remove_filter {
    font-size: 16px;
    margin-left: 3px;
@@ -1999,6 +2004,18 @@ a.preflib_change {
     .results_header_btns a {
         margin: 0.3em;
     }
+    .adv_filter_results_hide {
+        display: none;
+    }
+    .adv_filter_results_show {
+        display: block;
+    }
+    .adv_filter_results_block_label {
+        display: block;
+    }
+    .adv_filter_results_group_wrapper {
+        display: block;
+    }
     #main-content {
         margin: 0 1px;
     }

diff --git a/Open-ILS/src/templates/opac/parts/result/adv_filter.tt2 b/Open-ILS/src/templates/opac/parts/result/adv_filter.tt2
index d2c4e73..367c816 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/result/adv_filter.tt2
+++ b/Open-ILS/src/templates/opac/parts/result/adv_filter.tt2
@@ -11,7 +11,8 @@ FOR filter IN ctx.query_struct.filters;
     IF crad AND NOT pubdate_filters.grep('^' _ filter.name _ '$').size;
         remove_filter = 'fi:' _ fname;
 -%]
-         <div class="adv_filter_results_group">
+         <div class="adv_filter_results_group_wrapper">
+           <div class="adv_filter_results_group">
             <h4 class="title">[% IF filter.negate; l('Not'); END %] [% (crad.description || crad.label) | html %]</h4>
             [% temp = [];
                FOR fval IN fvalues;
@@ -35,11 +36,13 @@ FOR filter IN ctx.query_struct.filters;
               title="[% l('Remove [_1] filter', (crad.description || crad.label)) %]"
               aria-label=[% l('Remove [_1] filter', (crad.description || crad.label)) %]"
               href="[% mkurl('', {}, [remove_filter]) %]" rel="nofollow" vocab="">&times; </a>
+             </div>
            </div>
     [%- END; # IF crad -%]
 
 [%-  IF filter.name == 'locations'; locs = ctx.search_acpl('id',filter.args) -%]
-    <div class="adv_filter_results_group">
+    <div class="adv_filter_results_group_wrapper">
+      <div class="adv_filter_results_group">
             <h4 class="title">[% IF filter.negate; l('Not'); END %] [% l('Locations') %]</h4>
             [% temp = [];
                FOR loc IN locs;
@@ -53,7 +56,7 @@ FOR filter IN ctx.query_struct.filters;
             <a class="button remove_filter"
               title="[% l('Remove location filter') %]"
               href="[% mkurl('', {}, ['fi:locations']) %]" rel="nofollow" vocab=""> &times;</a>
-
+      </div>
     </div> 
 [%- END; # IF locations -%]
 
@@ -61,7 +64,8 @@ FOR filter IN ctx.query_struct.filters;
     date1 = CGI.param('date1');
     date2 = CGI.param('date2');
 -%]
-    <div class="adv_filter_results_group">
+    <div class="adv_filter_results_group_wrapper">
+      <div class="adv_filter_results_group">
             <h4 class="title">[% IF filter.negate; l('Not'); END %] [% l('Publication Year') %]</h4>
               <span class="adv_search_result_filter">
               [% IF    filter.name == 'date1'      %][% l('[_1]', date1) %]
@@ -73,6 +77,7 @@ FOR filter IN ctx.query_struct.filters;
               <a class="button remove_filter"
               title="[% l('Remove publication date filter') %]"
               href="[% mkurl('', {}, ['pubdate', 'date1', 'date2']) %]" rel="nofollow" vocab="">&times; </a>
+      </div>
     </div>
 
 [%- END; # IF pubdate_filters -%]

diff --git a/Open-ILS/src/templates/opac/parts/searchbar.tt2 b/Open-ILS/src/templates/opac/parts/searchbar.tt2
index 757e3fe..5dfcecd 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/searchbar.tt2
+++ b/Open-ILS/src/templates/opac/parts/searchbar.tt2
@@ -131,27 +131,44 @@ END;
         [% END %]
         </form>
     [% END %]
+    [% IF fcount > 0 %]
+      <div class="refine_search result_block_visible">
+        <span id="filter_hits">[ <a href="#" onclick="getAdvLimits();return false;">[% l('[quant,_1,filter,filters] applied', fcount) %]</a> ]</span>
+      </div>
+    [% END %]
     [% IF ctx.query_struct.filters.size > 0 %]
         [% stuff = INCLUDE 'opac/parts/result/adv_filter.tt2' %]
         [% IF stuff %]
         <h3 class="sr-only">[% l('Search Results filters') %]</h3>
-        <div id="adv_filter_results_block">
+        <div id="adv_filter_results_block" class="adv_filter_results_hide">
         <span class="adv_filter_results_block_label">[% l('Filtered by:') %]</span>
             [% stuff %]
         </div>
         [% END %]
     [% END %]
-        [% IF (is_advanced AND NOT is_special) AND CGI.param('qtype') %]
+    [% IF (is_advanced AND NOT is_special) AND CGI.param('qtype') %]
     <div class="refine_search result_block_visible">
-        [% IF fcount > 0 %]
-        <span id="filter_hits">[ <a href="#" onclick="getFacety();">[% l('[quant,_1,filter,filters] applied', fcount) %]</a> ]</span>
-        [% END %]
         [ <a href="[% mkurl(ctx.opac_root _ '/advanced') %]">[%
             l('Refine My Original Search')
         %]</a> ]
     </div>
     [% END %]
 
+    <script>
+    function getAdvLimits() {
+        var AdvLimitsClass = document.getElementById('adv_filter_results_block').classList;
+        if (AdvLimitsClass.contains("adv_filter_results_hide")) {
+           AdvLimitsClass.remove("adv_filter_results_hide");
+        } else {
+           AdvLimitsClass.add("adv_filter_results_hide");
+        }
+        if (AdvLimitsClass.contains("adv_filter_results_show")) {
+           AdvLimitsClass.remove("adv_filter_results_show");
+        } else {
+           AdvLimitsClass.add("adv_filter_results_show");
+        }
+     }
+     </script>
     <!-- Canonicalized query:
 
     [% ctx.canonicalized_query | html %]