sul-dlss / dlme

Digital Library of the Middle East web application, based on Spotlight
https://dlmenetwork.org/
Other
20 stars 2 forks source link

Enhance browse records viewing #537

Closed jacobthill closed 5 years ago

jacobthill commented 5 years ago

Thumbnails currently overlap (in list view) when the record has little metadata to display. See example one, example two.

Screen Shot 2019-10-02 at 3 50 14 PM
ggeisler commented 5 years ago

A simple (though not 100% ideal) solution to this is to make the following change to the .document-thumbnail img selector here

img {
  max-height: 100px; // was: max-height: 200px;
  max-width: 100px; // was: width: 100px;
}

I believe that will ensure the thumbnail is never larger than 100x100, while maintaining the aspect ratio. Our result item rows have a min-height of 100px so, for example, the problem in the screenshot above would end up more like this:

Screen Shot 2019-10-29 at 4 13 30 PM

The downside is, if the result item has enough metadata to make its row height over 100px (which is often the case) and the result item's thumbnail image is relatively narrow and tall (not as likely, but could happen with certain types of DLME resources), the thumbnail image could end up being 20x100 or something, when there is sufficient item row height to show it at 40x200.

But I think that might be a worthwhile tradeoff. So my inclination is to implement the SCSS update above, and then see how it works out with a range of DLME items and revisiting the solution if necessary.