move and restyle advanced search limiter block

[Kathy Lussier]

Instead of displaying the new advanced search limiter block in the left sidebar on the search results page, move it closer to the search box where the user can clearly see the limiters that were applied by the search and that will be applied to a new search from the search bar.

The current placement and style for displaying advanced search limiters can be seen here:
http://www.screencast.com/t/wAAU5F0yV

My work-in-progress code would change the placement and style to this:
http://www.screencast.com/t/ezd4OouB4

The proposed code uses a handful of commercial department store and travel sites as a model for displaying those limiters.

Orbitz - http://www.screencast.com/t/Ok9656ZtNxX
Kohls - http://www.screencast.com/t/8QynW9UG
Macy's - http://www.screencast.com/t/28Vsv2wgj

Amazon also uses a similar design for removing search terms, not filters:
http://www.screencast.com/t/T9KcUPdwemR

My work-in-progress branch is available at http://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/kmlussier/adv_search_limiter_block_display_changes

The code is also loaded on https://mlnc1.noblenet.org if anyone wants to see it in action.

Remaining to-do items include improved responsive design and better handling of the display block on the record summary page. However, I wanted to share the concept sooner rather than later to get feedback on the proposed style and design changes.

[Kathy Lussier (klussier)]

I've rebased against current master, added a commit to add some responsive design when viewed on a screen resolution of 600px or smaller, and force-pushed in update to the above branch.

The responsive design is similar to what was used in the earlier, sidebar display. If we display the limiter block on smaller screens, it pushes the search results down too far. Therefore, we continue to use the 'x limits applied' link to remind the user there are limits on the search and to provide a means to see and remove those limits.

After getting some local feedback, I decided to leave the display on the record summary page as is. In the current branch, the advanced search limiters display on the record summary page. Part of the reasoning is that these limits will be applied when a new search is launched from here. This is different from some of the other search criteria applied through the gray bar (group formats & editions, limit to available, sort order), which disappears on the record summary page. Those search criteria revert to the default when conducting a new searchbar search from this page.

Given that the limiters will be applied, we thought it was important to display them and allow for their removal before a new search is launched.

I may tweak some design elements this morning, but, otherwise, this is pretty much ready for a pullrequest tag.

http://mlnc1.noblenet.org continues to show this code in action, and http://mlnc4.noblenet.org is a good server to compare it against the current display. I think both displays are an improvement over the previous behavior where the limiters appeared in the search box, but the folks here seem pretty happy with moving this block out of the sidebar.

[Kathy Lussier (klussier)]

I forgot to add the LP bug number to my branch, so I have a new branch at:

http://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/kmlussier/lp1670425_adv_search_limiter_block_display_changes

I've tweaked the display to round out the advanced filter blocks and to re-style the x for removing the filters. It's now ready for review, so I'm adding a pullrequest tag.

Test plan:

From the advanced search page, conduct searches with a combination of search filters applied to them.

Pre-patch, the filters will display on the search results page where they can easily be removed by clicking the x. Resizing the window to under 800 px will remove the filters from the screen at the same time the facets are hidden. A new 'x filters applied link' will appear allowing the user to view the filters. A return to the search results is required to continue viewing results. The search filters will not appear on the record page.

Post-patch, the filters will display on the search results page beneath the search bar where they can easily be removed by clicking the x. Resizing the window to under 600 px will remove the filters from view. A new 'x filters applied link' will appear allowing the user to view the filters. After clicking that link, the filters will display above the search results. The search filters will also appear on the record page, where they can be removed before conducting the subsequent search.

[Terran McCanna (tmccanna)]

I've reviewed Kathy's proposed changes, and I lend my support to them.

I find the changes much easier to read, easier to understand, and more visually appealing. I like the way it groups each set of filters and displays them in an easy to understand manner, and how it wraps them neatly. Because it is so reminiscent of popular shopping sites, I believe that patrons will find it intuitive.

Kathy's version also works when viewing on my phone screen, and the master version does not.

[Ben Shum (bshum)]

I like the changes! It is very friendly looking.

Some notes about RTL handling though. With the style changes, we do need a few additions to the separate style-rtl.css.tt2 file. I think so far, these would be the relevant ones:

.adv_filter_results_block_label{padding: 4px 12px 4px 0px;}
.adv_filter_results_group_wrapper{margin-right: 1em;}
.remove_filter{margin-right: 3px;}

Additionally, we may want to look at how adv_filter_results_group gets presented too. Right now, it always goes filter type (in bold) + filters used (in regular font), which is presented in a LTR fashion. We may want to make those pieces shift so that it goes the other direction as needed for RTL support (aka viewing as filters used + filter type). The X for de-selecting a filter does switch from right side (LTR) to left side (RTL), so that is working as intended with the minor CSS tweaks from above.

I'll do some more experimentation with it and see what can be submitted.

[Kathy Lussier (klussier)]

I've corrected most of the rtl issues, rebased the branch against current master, and force-pushed an update to working/user/kmlussier/lp1670425_adv_search_limiter_block_display_changes.

There appears to be one rtl issue remaining. When shrinking to a small screen, the number in 'x filters applied' string is attaching itself to the 'Refine My Original Search' string. I'll try to address that issue in the morning. Removing pullrequest for now until that issue is addressed.

[Kathy Lussier (klussier)]

I've added a commit to the top of my branch to the issue with rtl styling for the 'x filters applied' string. I think this is ready now. Re-adding pullrequest tag.

[Kathy Lussier (klussier)]

I force-pushed another update after discovering that I had inadvertently deleted an entry from style-rtl.css. I also squashed a couple of commits while I was there. Now, it's really really ready for testing.

[Ben Shum (bshum)]

Tested well for me in both LTR and RTL directions. Found an unrelated issue that I will file into a new bug though (looks like the advanced search filter is not being translated, so it always shows as English, though there are DB seed values available for the examples I tried -- like Audience, etc.)

Pushing this work first, to master and backported to rel_2_12.