LP1868147-Titles in carousel run together in mobile display. user/gcollum/lp1868147-Titles_in_carousel_run_together
authorGarry Collum <gcollum@gmail.com>
Thu, 17 Dec 2020 18:47:41 +0000 (13:47 -0500)
committerGarry Collum <gcollum@gmail.com>
Thu, 17 Dec 2020 18:47:41 +0000 (13:47 -0500)
commitc5af5fd7fca17ad36610a08b6f0c65a975029496
tree9e21eae1ea1c113e562acb71800ee8cc18f7be28
parent0297d91ccfb3e5f7d321e441458cbfe167e690ac
LP1868147-Titles in carousel run together in mobile display.

This patch uses the breakpoint option available in glide.js to limit the number of images in the carousel that display.

Files for both the tpac and the bootstrap opac have been updated.

There are two new variables based on bootstrap sizing, sm_width which defaults to 3, and xs_width which defaults to 2.
If a screen's width is set between 768-992 pixels, 3 images display in the carousel,
if the width is below 768 pixels, only 2 images display in the carousel.
The reduction of images helps with titles overlapping each other.

To test:
Apply the patch to an instance of Evergreen that displays carousels.
Reduce the screen size of the browser.  Eventually the carousel will display 3 and then 2 images.

Signed-off-by: Garry Collum <gcollum@gmail.com>
Open-ILS/src/templates-bootstrap/opac/parts/misc_util.tt2
Open-ILS/src/templates/opac/parts/misc_util.tt2