titles in carousel run together in mobile display

[Jason Etheridge]

In a mobile view of the OPAC, the titles beneath the jacket cover images in a carousel tend to run together and overlap. It's worse for entries that don't actually have an image.

[Erica Rohlfs (erohlfs)]

Confirming the title overlap in Evergreen version 3.3.6. Screen image attached.

[Simone Rauscher (simonerauscher)]

We are also experiencing this issue on Grimsby Public OPAC - Please update as to when this issue will be fixed?

[Garry Collum (gcollum)]

Here is one solution.

It uses the breakpoint feature in glide.js to define breakpoints based on bootstrap's screen widths. Defaults are set that if the screen is between 768-992 pixels, 3 images display in the carousel, and if it is under 768, 2 images display. The reduction of images reduces the chances that titles will overlap.

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=commit;h=c5af5fd7fca17ad36610a08b6f0c65a975029496

[Garry Collum (gcollum)]

In testing - Files for both the tpac and the bootstrap opac were updated for the above patch.

[Steve Callender (stevecallender)]

Garry, I tried your fix on a 3.5 system and I think it looks good. It trimmed a 4 item Carousel down to 2 item and displayed very cleanly. I did not test the bootstrap version however.

[Mike Rylander (mrylander)]

Thanks, Garry and Steve! I've pushed this to master and all the way back to 3.4. (Skipping the bootstrap opac before 3.6, obv.)