projectblacklight/blacklight — pull request #651 by jrochkind (2013-12-11 22:44:44+00:00)
Title: sidebar facets with display:table

Sidebar facets display has, for a while, tried to use a design based on float:right to keep the labels and values in two columns.

This method makes it difficult to avoid collisons: Label overlapping the count; or the count overlapping the line below it, when wrapping happens. To make the two column display stay distinct in all the various circumstances is especially challenging: a label long enough to wrap to multiple lines; a count of from 1 to 6+ digits; without assuming certain fonts or font sizes; in multiple responsive widths of the facet sidebar)

Current master ends up with overlapping 'collisons' sometimes, for example: https://db.tt/JzhSJuin

Thinking about it, I realized that our desired layout with two columns, label and count, was essentially a 'tabular' display, and display:table might work out well.

This is an attempt at that. It appears to work out well. Some notes:

* display:table isn't supported by IE7. In IE7, counts will just be right next to labels, rather than two column display. This is far from the worst problem you have when trying to look at BL 5.x in IE7 currently.
* when label wraps, count is now aligned with _first_ line of label rather than last. I consider htis an approvement, but it's easily changed in CSS with vertical-align -- in the old way, there was no good way to get it to align with first line.
* render_selected_facet_value no longer calls render_facet_value, it's just indepenent. This was getting increasingly complicated to make work that way, and I think it was probably not neccesary.
* This commit does change the DOM of the facet value lines. Since DOM of overall facets sidebar also changes with BL 5.x, this seemed okay. I did need to change tests for new DOM.
* the render_facet_count method now takes an optional second param options hash, with :classes. Used to send :classes => ["selected"] to it in selected mode.