From: Garry Collum <gcollum@gmail.com>
Date: Thu, 17 Dec 2020 18:47:41 +0000 (-0500)
Subject: LP1868147-Titles in carousel run together in mobile display.
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=68d21276d952d6fea3879c3d6eab42c8eeca051e;p=Evergreen.git

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 609f22d055..38f2995a0f 100644
--- 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 %]
     });