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>

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index 6d5ef52..b8e650d 100644 (file)
--- 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 07efb48..d2c4e73 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,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 cbaf0f2..cd6b5a9 100644 (file)
--- 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 989f7e0..a503484 100644 (file)
--- 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 f807134..757e3fe 100644 (file)
--- 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 %]