LP1980302 Bootstrap: applied search filters display oddly

Moves the display of applied filters into bootstrap alert messages and aligns applied filters
in a row, and utilizes more native bootstrap classes.  Also, adds a label to the 'Locations'
filter and code to implement an 'OR' separator, if more than one location is selected.

To test:
1. Perform an advanced search in the bootstrap catalog and apply some filters. To test
the locations, select several location options.
2. Notice the formatting of the 'Filtered by:' display data.  Notice also the display
of the locations filter without a label or a separator.
3. Apply the patch.
4. Repeat 2 to see the new formatting.

Signed-off-by: Garry Collum <gcollum@gmail.com>
Signed-off-by: Gina Monti <gmonti@biblio.org>
Signed-off-by: Galen Charlton <gmc@equinoxOLI.org>

diff --git a/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2 b/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2
index be545fe..1a9e146 100755 (executable)
--- a/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2
@@ -1866,54 +1866,17 @@ div.adv_search_available {
 
 /* styling for advanced search filters that display with searchbar */
 
-#adv_filter_results_block h4 { display: inline; }
-
-#adv_filter_results_block {
-    margin-top: 6px;
-    text-align: center;
-}
-
 .adv_filter_results_block_label {
     font-weight:bold;
     [% IF rtl == 't' -%]
-    padding: 4px 12px 4px 0px;
+    padding: 0px 12px 4px 0px;
     [% ELSE -%]
-    padding: 4px 0px 4px 12px;
+    padding: 0px 0px 4px 12px;
     [% END -%]
 }
 
 .adv_filter_results_group {
-    font-size: 12px;
-    display: inline-block;
     background-color:  [% css_colors.accent_lighter2 %];
-    border-style: solid;
-    border-color: [% css_colors.accent_medium %];
-    border-width: 1px;
-    border-radius: 4px;
-    padding: 2px 4px 2px 4px;
-}
-
-.adv_filter_results_group_wrapper {
-    display: inline-block;
-    [% IF rtl == 't' -%]
-    margin-right: 1em;
-    [% ELSE -%]
-    margin-left: 1em;
-    [% END -%]
-    margin-bottom: 8px;
-}
-
-.adv_filter_results_group_header {
-    display: inline-block;
-}
-
-.adv_filter_results_group_values {
-    display: inline;
-}
-
-.adv_search_result_filter {
-    display: inline-block;
-    font-size: 16px;
 }
 
 .remove_filter {

diff --git a/Open-ILS/src/templates-bootstrap/opac/parts/result/adv_filter.tt2 b/Open-ILS/src/templates-bootstrap/opac/parts/result/adv_filter.tt2
index 39a4207..3801140 100755 (executable)
--- a/Open-ILS/src/templates-bootstrap/opac/parts/result/adv_filter.tt2
+++ b/Open-ILS/src/templates-bootstrap/opac/parts/result/adv_filter.tt2
@@ -12,9 +12,9 @@ FOR filter IN ctx.query_struct.filters;
         remove_filter = 'fi:' _ fname;
 -%]
          <div class="adv_filter_results_group_wrapper" id="1">
-           <div class="adv_filter_results_group">
-           <div class="adv_filter_results_group_header"> <h5 class="title">[% IF filter.negate; l('Not'); END %] [% (crad.description || crad.label) | html %]</h5></div>
-           <div class="adv_filter_results_group_values d-inline-block align-middle"> [% temp = [];
+           <div class="alert adv_filter_results_group alert-dismissible fade show mx-2">
+           <strong>[% IF filter.negate; l('Not'); END %] [% (crad.description || crad.label) | html %]: </strong>
+               [% temp = [];
                FOR fval IN fvalues;
                 thing = ctx.search_ccvm('ctype',fname,'code',fval).0;
                 display_value = thing.search_label || thing.value;
@@ -31,20 +31,18 @@ FOR filter IN ctx.query_struct.filters;
                   <span class="adv_search_result_filter"> [% l('OR') %] </span>
                  [% END %]
             [% END; # FOR %]
-             </div>
-              <a class="button remove_filter btn btn-deny btn-sm"
+              <a class="button close" 
               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=""><span class="text-white">&times;</span> </a>
+              href="[% mkurl('', {}, [remove_filter]) %]" rel="nofollow" vocab=""><span aria-hidden="true">&times;</span> </a>
             </div>
            </div>
-           </div>
     [%- END; # IF crad -%]
 
 [%-  IF filter.name == 'locations'; locs = ctx.search_acpl('id',filter.args) -%]
     <div class="adv_filter_results_group_wrapper" id="2">
-      <div class="adv_filter_results_group">
-            <h4 class="title">[% IF filter.negate; l('Not'); END %] </h4>
+        <div class="alert adv_filter_results_group alert-dismissible fade show mx-2">
+            <strong>[% IF filter.negate; l('Not'); END %] [% l('Locations') %]: </strong>
             [% temp = [];
                FOR loc IN locs;
                 temp.push(loc.name);
@@ -53,10 +51,13 @@ FOR filter IN ctx.query_struct.filters;
                   <span class="adv_search_result_filter">
                     [% display_name | html%]
                   </span>
+                  [% UNLESS loop.last %]
+                  <span class="adv_search_result_filter"> [% l('OR') %] </span>
+                  [% END %]
             [% END; # FOR %]
-            <a class="button remove_filter btn btn-deny btn-sm"
+            <a class="button close"
               title="[% l('Remove location filter') %]"
-              href="[% mkurl('', {}, ['fi:locations']) %]" rel="nofollow" vocab=""> <span class="text-white">×</span></a>
+              href="[% mkurl('', {}, ['fi:locations']) %]" rel="nofollow" vocab=""> <span aria-hidden="true">&times;</span></a>
       </div>
     </div>
 [%- END; # IF locations -%]
@@ -66,8 +67,8 @@ FOR filter IN ctx.query_struct.filters;
     date2 = CGI.param('date2') | html;
 -%]
     <div class="adv_filter_results_group_wrapper" id="3">
-      <div class="adv_filter_results_group">
-            <h5 class="title">[% IF filter.negate; l('Not'); END %] [% l('Publication Year') %]</h5>
+      <div class="alert adv_filter_results_group alert-dismissible fade show mx-2">
+            <strong>[% IF filter.negate; l('Not'); END %] [% l('Publication Year') %]: </strong>
               <span class="adv_search_result_filter">
               [% IF    filter.name == 'date1'      %][% l('[_1]', date1) %]
               [% ELSIF filter.name == 'before'  %][% l('Before [_1]', date1) %]
@@ -75,9 +76,9 @@ FOR filter IN ctx.query_struct.filters;
               [% ELSIF filter.name == 'between' %][% l('Between [_1] and [_2]', date1, date2) %]
               [% END %]
               </span>
-              <a class="button remove_filter btn btn-deny btn-sm"
+              <a class="button close"
               title="[% l('Remove publication date filter') %]"
-              href="[% mkurl('', {}, ['pubdate', 'date1', 'date2']) %]" rel="nofollow" vocab=""><span class="text-white">×</span> </a>
+              href="[% mkurl('', {}, ['pubdate', 'date1', 'date2']) %]" rel="nofollow" vocab=""><span aria-hidden="true">&times;</span> </a>
       </div>
     </div>
 

diff --git a/Open-ILS/src/templates-bootstrap/opac/parts/searchbar.tt2 b/Open-ILS/src/templates-bootstrap/opac/parts/searchbar.tt2
index 67ac027..bc8db22 100755 (executable)
--- a/Open-ILS/src/templates-bootstrap/opac/parts/searchbar.tt2
+++ b/Open-ILS/src/templates-bootstrap/opac/parts/searchbar.tt2
@@ -180,9 +180,13 @@ END;
         [% stuff = INCLUDE 'opac/parts/result/adv_filter.tt2' %]
         [% IF stuff %]
         <h3 class="sr-only">[% l('Search Results filters') %]</h3>
+        <div class="d-flex justify-content-center">
         <div id="adv_filter_results_block" class="adv_filter_results_hide">
-        <span class="adv_filter_results_block_label">[% l('Filtered by:') %]</span>
+        <div class="adv_filter_results_block_label">[% l('Filtered by:') %]</div>
+            <div class="d-inline-flex p-2">
             [% stuff %]
+            </div>
+        </div>
         </div>
         [% END %]
     [% END %]