On the Browse Partners page, with all of the partners added with boxes of varying sizes, the alignment gets a bit funky. Lots of whitespace and strangely aligned boxes make it quite hard to navigate.
Description
Status | Subtype | Assigned | Task | ||
---|---|---|---|---|---|
Resolved | jsn.sherman | T147434 Version 1.5: Beta fixes | |||
Resolved | Samwalton9-WMF | T151177 Migrate users from signup sheets to the Library Card Platform | |||
Resolved | jsn.sherman | T162730 Improve partner alignment on Browse Partners page |
Event Timeline
Perhaps rather than floating, each box could be a fixed size and have a "read more..." button to expand it.
You may need to refresh your browser to see the changes. The fix I've implemented doesn't completely solve the whitespace issue, but makes the grid wrap in a more intelligent way. That's an improvement we'd want no matter what. The remaining things we can do are down to style choice on how we want to handle things, we can:
- set a vertical scroll on descriptions that exceed a given height.
- truncate with an ellipse descriptions that exceed a given height.
- Use the details and summary html tags in the descriptions themselves to give a non-javascript accordion behavior.
I went ahead and did option 3 on ebsco (on staging) so you could see how that behaves. Clicking the short description expands it out.
I'll respond properly on Monday, but I just wanted to say that this looks a million times better, and the EBSCO solution looks to work really well! Really great!
Thanks! I realized that we were getting the same behavior on the details page as on browse partners, eg, clicking on more info gave you the same summary. So I implemented a filtertags block around the description that ensures that the details page always shows the full content.
What's nice about this approach is that it's totally optional. Leave the tags out for the same behavior we've always had, add them in if you want to control the display on browse partners.
This looks great, and works much better than previously - no odd massive whitespace issues anymore :)
Also happy with the HTML tags approach, also seems to work well!
I've updated a handful of partner descriptions to use the details/summary HTML tags so that everything stays relatively well in line.