titles in carousel run together in mobile display

Bug #1868147 reported by Jason Etheridge
24
This bug affects 5 people
Affects Status Importance Assigned to Milestone
Evergreen
Fix Released
Medium
Unassigned
3.4
Fix Released
Undecided
Unassigned
3.5
Fix Released
Undecided
Unassigned
3.6
Fix Released
Undecided
Unassigned

Bug Description

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)
Changed in evergreen:
status: New → Confirmed
importance: Undecided → Medium
Revision history for this message
Erica Rohlfs (erohlfs) wrote :

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

Revision history for this message
Simone Rauscher (simonerauscher) wrote :

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

tags: added: carousel
Revision history for this message
Garry Collum (gcollum) wrote :

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

tags: added: pullrequest
Revision history for this message
Garry Collum (gcollum) wrote :

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

Revision history for this message
Steve Callender (stevecallender) wrote :

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.

Revision history for this message
Mike Rylander (mrylander) wrote :

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.)

Changed in evergreen:
status: Confirmed → Fix Committed
no longer affects: evergreen/master
no longer affects: evergreen/3.7
Changed in evergreen:
milestone: 3.next → 3.7-beta
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.