LP#1005040: CSS styling of filter control boxes

This patch adds several CSS classes to support
distinguishing filter boxes from facet boxes:

filter_box_wrapper
filter_box_temp
filter_template
filter

It also sets a different background color for the header of filter
boxes. Padding between entries in a filter list is reduced as
compared to facets, both to save a bit of vertical space and to
subtly distinguish filters from facets.

Signed-off-by: Galen Charlton <gmc@esilibrary.com>

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index 8a3c4f7..a6ba64e 100644 (file)
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -1064,6 +1064,10 @@ div#facet_sidebar {
     padding-top:4px;
 }
 
+.facet_box_temp.filter_box_temp .header {
+    background: [% css_colors.background_invert %] !important;
+}
+
 .facet_box_temp .header .title {
     float:left;
     padding-top:6px;
@@ -1106,6 +1110,10 @@ div#facet_sidebar {
     padding: 2px;
 }
 
+.facet_template.filter_template div {
+    padding: 0px !important;
+}
+
 .facet_template .count {
     text-align: right;
     color: [% css_colors.accent_mediumdark %];

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 9e7bd14..6de6b2d 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,4 +1,4 @@
-<div class="facet_box_wrapper">
+<div class="facet_box_wrapper filter_box_wrapper">
 [%
 
 ignore_filters = ['sort','statuses','site'];
@@ -12,7 +12,7 @@ FOR filter IN ctx.query_struct.filters;
     IF crad; # will be some special ones, like locations
         remove_filter = 'fi:' _ fname;
 %]
-    <div class="facet_box_temp">
+    <div class="facet_box_temp filter_box_temp">
         <div class="header">
             <a class="button"
               title="[% l('Remove [_1] filter', crad.label) %]"
@@ -27,8 +27,8 @@ FOR filter IN ctx.query_struct.filters;
                 thing = ctx.search_ccvm('ctype',fname,'code',fval).0;
                 display_value = thing.search_label || thing.value;
                 IF display_value.defined; %]
-                    <div class="facet_template">
-                        <div class="facet">
+                    <div class="facet_template filter_template">
+                        <div class="facet filter">
                               [% display_value | html%]
                         </div>
                     </div>
@@ -40,7 +40,7 @@ FOR filter IN ctx.query_struct.filters;
     [% END; # IF crad %]
 
 [%  IF filter.name == 'locations'; locs = ctx.search_acpl('id',filter.args) %]
-    <div class="facet_box_temp">
+    <div class="facet_box_temp filter_box_temp">
         <div class="header">
             <a class="button"
               title="[% l('Remove location filter') %]"
@@ -52,8 +52,8 @@ FOR filter IN ctx.query_struct.filters;
         <div class="box_wrapper">
             <div class="box">
             [% FOR loc IN locs %]
-                <div class="facet_template">
-                  <div class="facet">
+                <div class="facet_template filter_template">
+                  <div class="facet filter">
                     [% loc.name | html%]
                   </div>
                 </div>