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.

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>
Signed-off-by: Mike Rylander <mrylander@gmail.com>

diff --git a/Open-ILS/src/templates/opac/parts/misc_util.tt2 b/Open-ILS/src/templates/opac/parts/misc_util.tt2
index 609f22d..38f2995 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/misc_util.tt2
+++ b/Open-ILS/src/templates/opac/parts/misc_util.tt2
@@ -808,6 +808,8 @@
         animated => 0,
         animation_interval => 5,
         width => 4,
+        sm_width => 3,
+        xs_width => 2,
     };
     config.import(args);
     carousels = [];
@@ -856,6 +858,14 @@
         type: 'carousel',
         rewind: false,
         perView: [% config.width %],
+        breakpoints: {
+            992: {
+                perView: [% config.sm_width %]
+            },
+            768: {
+                perView: [% config.xs_width %]
+            }
+        },
         startAt: 0,
         [% IF config.animated %] autoplay: [% config.animation_interval * 1000 %],[% END %]
     });