From 6fe64e67931f0090e50e5b5c4c88d2e2fe6acb1c Mon Sep 17 00:00:00 2001
From: Kathy Lussier <klussier@masslnc.org>
Date: Wed, 1 Mar 2017 23:06:49 -0500
Subject: [PATCH] LP#1670425: Moving display of advanced search limiters on
 search results page

Moves the new 2.12 advanced search filters block out of the sidebar and
along the top of the screen so that the user can see limiters along with their
other search terms.

Signed-off-by: Kathy Lussier <klussier@masslnc.org>
Signed-off-by: Ben Shum <ben@evergreener.net>
---
 Open-ILS/src/templates/opac/css/style.css.tt2      | 36 +++++++++++
 .../src/templates/opac/parts/result/adv_filter.tt2 | 71 +++++++++-------------
 .../src/templates/opac/parts/result/lowhits.tt2    |  1 -
 Open-ILS/src/templates/opac/parts/result/table.tt2 | 10 ---
 Open-ILS/src/templates/opac/parts/searchbar.tt2    | 13 +++-
 5 files changed, 77 insertions(+), 54 deletions(-)

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index 6d5ef52c6a..b8e650d2df 100644
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -1054,6 +1054,42 @@ div.adv_search_available {
     margin: auto;
 }
 
+/* styling for advanced search filters that display with searchbar */
+
+#adv_filter_results_block h4 { display: inline; }
+
+#adv_filter_results_block {
+    margin-top: 10px;
+    margin-bottom: 16px;
+}
+
+.adv_filter_results_block_label {
+    font-weight:bold;
+    padding: 4px 6px 4px 12px;
+}
+
+.adv_filter_results_group {
+    font-size: 12px;
+    display: inline-block;
+    background:  [% css_colors.accent_lighter2 %];
+    border-style: solid;
+    border-color: [% css_colors.accent_medium %];
+    border-width: 1px;
+    border-radius: 4px;
+    padding: 2px 4px 2px 4px;
+    margin-right:6px;
+}
+
+.remove_filter {
+   font-size: 16px;
+   margin-left: 3px;
+ }
+
+a.remove_filter {
+    text-decoration: none;
+    color: [% css_colors.accent_dark %];
+}
+
 [%- IF we_want_to_turn_on_facet_styling.defined; %]
 /* some facet styling */
 .facetClassContainer { margin: 2px; border: 1px solid [% css_colors.accent_light %]; }
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 07efb48498..d2c4e73343 100644
--- a/Open-ILS/src/templates/opac/parts/result/adv_filter.tt2
+++ b/Open-ILS/src/templates/opac/parts/result/adv_filter.tt2
@@ -11,15 +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="facet_box_temp filter_box_temp">
-        <div class="header">
-            <a class="button"
-              title="[% l('Remove [_1] filter', (crad.description || crad.label)) %]"
-              href="[% mkurl('', {}, [remove_filter]) %]" rel="nofollow" vocab=""> ✘ </a>
+         <div class="adv_filter_results_group">
             <h4 class="title">[% IF filter.negate; l('Not'); END %] [% (crad.description || crad.label) | html %]</h4>
-        </div>
-        <div class="box_wrapper">
-            <div class="box">
             [% temp = [];
                FOR fval IN fvalues;
                 thing = ctx.search_ccvm('ctype',fname,'code',fval).0;
@@ -30,63 +23,57 @@ FOR filter IN ctx.query_struct.filters;
                END;
                FOR display_value IN temp.sort;
             %]
-                    <div class="facet_template filter_template">
-                        <div class="facet filter">
-                              [% display_value | html%]
-                        </div>
-                    </div>
+                 <span class="adv_search_result_filter">
+                    [% display_value | html %]
+                      [% UNLESS loop.last; 
+                         l('OR');
+                      END %]
+                 </span>
+
             [% END; # FOR %]
-            </div>
-        </div> <!-- box_wrapper -->
-    </div> <!-- facet_box_temp -->
+              <a class="button remove_filter"
+              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>
     [%- END; # IF crad -%]
 
 [%-  IF filter.name == 'locations'; locs = ctx.search_acpl('id',filter.args) -%]
-    <div class="facet_box_temp filter_box_temp">
-        <div class="header">
-            <a class="button"
-              title="[% l('Remove location filter') %]"
-              href="[% mkurl('', {}, ['fi:locations']) %]" rel="nofollow" vocab=""> ✘ </a>
+    <div class="adv_filter_results_group">
             <h4 class="title">[% IF filter.negate; l('Not'); END %] [% l('Locations') %]</h4>
-        </div>
-        <div class="box_wrapper">
-            <div class="box">
             [% temp = [];
                FOR loc IN locs;
                 temp.push(loc.name);
                END;
                FOR display_name IN temp.sort; %]
-                <div class="facet_template filter_template">
-                  <div class="facet filter">
+                  <span class="adv_search_result_filter">
                     [% display_name | html%]
-                  </div>
-                </div>
+                  </span>
             [% END; # FOR %]
-            </div>
-        </div> <!-- box_wrapper -->
-    </div> <!-- facet_box_temp -->
+            <a class="button remove_filter"
+              title="[% l('Remove location filter') %]"
+              href="[% mkurl('', {}, ['fi:locations']) %]" rel="nofollow" vocab=""> &times;</a>
+
+    </div> 
 [%- END; # IF locations -%]
 
 [%- IF pubdate_filters.grep('^' _ filter.name _ '$').size;
     date1 = CGI.param('date1');
     date2 = CGI.param('date2');
 -%]
-    <div class="facet_box_temp filter_box_temp">
-        <div class="header">
-            <a class="button"
-              title="[% l('Remove publication date filter') %]"
-              href="[% mkurl('', {}, ['pubdate', 'date1', 'date2']) %]" rel="nofollow" vocab=""> ✘ </a>
+    <div class="adv_filter_results_group">
             <h4 class="title">[% IF filter.negate; l('Not'); END %] [% l('Publication Year') %]</h4>
-        </div>
-        <div class="box_wrapper">
-            <div class="box">
+              <span class="adv_search_result_filter">
               [% IF    filter.name == 'date1'      %][% l('[_1]', date1) %]
               [% ELSIF filter.name == 'before'  %][% l('Before [_1]', date1) %]
               [% ELSIF filter.name == 'after'   %][% l('After [_1]', date1) %]
               [% ELSIF filter.name == 'between' %][% l('Between [_1] and [_2]', date1, date2) %]
               [% END %]
-            </div>
-        </div> <!-- box_wrapper -->
-    </div> <!-- facet_box_temp -->
+              </span>
+              <a class="button remove_filter"
+              title="[% l('Remove publication date filter') %]"
+              href="[% mkurl('', {}, ['pubdate', 'date1', 'date2']) %]" rel="nofollow" vocab="">&times; </a>
+    </div>
+
 [%- END; # IF pubdate_filters -%]
 [%- END; # FOR -%]
diff --git a/Open-ILS/src/templates/opac/parts/result/lowhits.tt2 b/Open-ILS/src/templates/opac/parts/result/lowhits.tt2
index cbaf0f2a22..cd6b5a935c 100644
--- a/Open-ILS/src/templates/opac/parts/result/lowhits.tt2
+++ b/Open-ILS/src/templates/opac/parts/result/lowhits.tt2
@@ -2,7 +2,6 @@
     <div id="zero_search_hits">
         <div class="facet_sidebar_hidden" id="facet_sidebar">
           <h3 class="sr-only">[% l('Search Results filters') %]</h3>
-          [% INCLUDE 'opac/parts/result/adv_filter.tt2' %]
         </div>
         <div class="zero_search_hits_saved">
             [% INCLUDE "opac/parts/staff_saved_searches.tt2" %]
diff --git a/Open-ILS/src/templates/opac/parts/result/table.tt2 b/Open-ILS/src/templates/opac/parts/result/table.tt2
index 989f7e001f..a5034845ef 100644
--- a/Open-ILS/src/templates/opac/parts/result/table.tt2
+++ b/Open-ILS/src/templates/opac/parts/result/table.tt2
@@ -40,16 +40,6 @@
     <h3 class="sr-only">[% l('Saved Searches') %]</h3>
     [% INCLUDE "opac/parts/staff_saved_searches.tt2" %]
     [%-  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 class="facet_box_wrapper filter_box_wrapper">
-            <div class="filter_box_label">[% l('Filtered By') %]</div>
-            [% stuff %]
-        </div>
-        [% END %]
-    [% END %]
     <h3 class="sr-only">[% l('Search Results facets') %]</h3>
     [% INCLUDE 'opac/parts/result/facets.tt2' %]
     <h3 class="sr-only">[% l('Search Results List') %]</h3>
diff --git a/Open-ILS/src/templates/opac/parts/searchbar.tt2 b/Open-ILS/src/templates/opac/parts/searchbar.tt2
index f807134dca..757e3fee89 100644
--- a/Open-ILS/src/templates/opac/parts/searchbar.tt2
+++ b/Open-ILS/src/templates/opac/parts/searchbar.tt2
@@ -131,7 +131,17 @@ END;
         [% END %]
         </form>
     [% END %]
-    [% IF (is_advanced AND NOT is_special) AND CGI.param('qtype') %]
+    [% 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">
+        <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') %]
     <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>
@@ -141,6 +151,7 @@ END;
         %]</a> ]
     </div>
     [% END %]
+
     <!-- Canonicalized query:
 
     [% ctx.canonicalized_query | html %]
-- 
2.11.0