LP#1005040: Styling cleanup for filter display

1) Use a unicode X instead of the string "Remove"
2) Provide a border around filters
3) Label filters with "Filtered by"
4) Only show "[X filters applied ]" when in mobile mode, and make it
   work like the "Refine these results" button.

Signed-off-by: Mike Rylander <mrylander@gmail.com>

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index 77b3b62..413c3c9 100644 (file)
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -1073,6 +1073,14 @@ div#facet_sidebar {
     background: [% css_colors.background_invert %] !important;
 }
 
+.filter_box_label {
+    color: [% css_colors.background_invert %];
+    font-weight:bold;
+    padding-top:4px;
+    padding-bottom:4px;
+    padding-left:12px;
+}
+
 .facet_box_temp .header .title {
     float:left;
     padding-top:6px;
@@ -1102,6 +1110,16 @@ div#facet_sidebar {
     overflow: hidden;
 }
 
+.filter_box_wrapper {
+    margin-bottom: 3px;
+    padding: 2px;
+    border: 1px solid [% css_colors.background_invert %];
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    font-weight:bold;
+    padding-top:4px;
+}
+
 .facet_template {
     box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -1731,7 +1749,7 @@ a.preflib_change {
     clear: both;
 }
 
-.small_view_only, #refine_hits, #return_to_hits {
+.small_view_only, #filter_hits, #refine_hits, #return_to_hits {
     display: none;
 }
 
@@ -1854,7 +1872,7 @@ a.preflib_change {
     #dash_wrapper .opac-button {
         top: 0px;
     }
-    .small_view_only {
+    .small_view_only, #filter_hits {
         display: inline !important;
     }
     #dash_identity a {

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 dbe712f..07efb48 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/result/adv_filter.tt2
+++ b/Open-ILS/src/templates/opac/parts/result/adv_filter.tt2
@@ -1,32 +1,21 @@
-<div class="facet_box_wrapper filter_box_wrapper">
-[%
-
-# don't display a box for the search_format filter,
-# as that's got its own widget
-ignore_filters = ['search_format'];
+[%-
 
 pubdate_filters = ['date1', 'before', 'after', 'between'];
 
 FOR filter IN ctx.query_struct.filters;
     fname = filter.name;
-    IF ignore_filters.grep('^' _ fname _ '$').size;
-      NEXT;
-    END;
-
     fvalues = filter.args;
     crad = ctx.get_crad(fname);
 
     # will be some special ones, like locations
     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="">
-              [% l("Remove") %]
-            </a>
+              href="[% mkurl('', {}, [remove_filter]) %]" rel="nofollow" vocab=""> ✘ </a>
             <h4 class="title">[% IF filter.negate; l('Not'); END %] [% (crad.description || crad.label) | html %]</h4>
         </div>
         <div class="box_wrapper">
@@ -50,16 +39,14 @@ FOR filter IN ctx.query_struct.filters;
             </div>
         </div> <!-- box_wrapper -->
     </div> <!-- facet_box_temp -->
-    [% END; # IF crad %]
+    [%- END; # IF crad -%]
 
-[%  IF filter.name == 'locations'; locs = ctx.search_acpl('id',filter.args) %]
+[%-  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="">
-              [% l("Remove") %]
-            </a>
+              href="[% mkurl('', {}, ['fi:locations']) %]" rel="nofollow" vocab=""> ✘ </a>
             <h4 class="title">[% IF filter.negate; l('Not'); END %] [% l('Locations') %]</h4>
         </div>
         <div class="box_wrapper">
@@ -78,19 +65,17 @@ FOR filter IN ctx.query_struct.filters;
             </div>
         </div> <!-- box_wrapper -->
     </div> <!-- facet_box_temp -->
-[% END; # IF locations %]
+[%- END; # IF locations -%]
 
-[% IF pubdate_filters.grep('^' _ filter.name _ '$').size;
+[%- 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="">
-              [% l("Remove") %]
-            </a>
+              href="[% mkurl('', {}, ['pubdate', 'date1', 'date2']) %]" rel="nofollow" vocab=""> ✘ </a>
             <h4 class="title">[% IF filter.negate; l('Not'); END %] [% l('Publication Year') %]</h4>
         </div>
         <div class="box_wrapper">
@@ -103,8 +88,5 @@ FOR filter IN ctx.query_struct.filters;
             </div>
         </div> <!-- box_wrapper -->
     </div> <!-- facet_box_temp -->
-[% END; # IF pubdate_filters %]
-
-[% END; # FOR %]
-</div> <!-- facet_box_wrapper -->
-
+[%- END; # IF pubdate_filters -%]
+[%- END; # FOR -%]

diff --git a/Open-ILS/src/templates/opac/parts/result/table.tt2 b/Open-ILS/src/templates/opac/parts/result/table.tt2
index 7e47daf..f4ff94a 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/result/table.tt2
+++ b/Open-ILS/src/templates/opac/parts/result/table.tt2
@@ -8,6 +8,21 @@
 
     result_count = ctx.result_start;
 
+    # don't display a box for the search_format filter,
+    # as that's got its own widget
+    ignore_filters = ['search_format'];
+
+    trimmed_filters = [];
+    FOR filter IN ctx.query_struct.filters;
+        fname = filter.name;
+        IF ignore_filters.grep('^' _ fname _ '$').size;
+            NEXT;
+        END;
+        trimmed_filters.push(filter);
+    END;
+
+    ctx.query_struct.filters = trimmed_filters;
+
 %]
 
 [% PROCESS "opac/parts/result/paginate.tt2" %] 
@@ -25,8 +40,16 @@
     <h3 class="sr-only">[% l('Saved Searches') %]</h3>
     [% INCLUDE "opac/parts/staff_saved_searches.tt2" %]
     [%-  END %]
-    <h3 class="sr-only">[% l('Search Results filters') %]</h3>
-    [% INCLUDE 'opac/parts/result/adv_filter.tt2' %]
+    [% 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 97517c0..9d6a0dd 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/searchbar.tt2
+++ b/Open-ILS/src/templates/opac/parts/searchbar.tt2
@@ -126,9 +126,9 @@ END;
         </form>
     [% END %]
     [% IF (is_advanced AND NOT is_special) AND CGI.param('qtype') %]
-    <div class="refine_search">
+    <div class="refine_search result_block_visible">
         [% IF fcount > 0 %]
-        [ [% l('[quant,_1,filter,filters] applied', fcount) %] ]
+        <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')