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
Medium
Unassigned
3.4
Undecided
Unassigned
3.5
Undecided
Unassigned
3.6
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  Edit
Everyone can see this information.

Other bug subscribers