From ef55734a72393df583a27a06dd7cdfdea292bed3 Mon Sep 17 00:00:00 2001 From: Garry Collum Date: Thu, 17 Dec 2020 13:47:41 -0500 Subject: [PATCH] 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 Signed-off-by: Mike Rylander --- Open-ILS/src/templates-bootstrap/opac/parts/misc_util.tt2 | 10 ++++++++++ Open-ILS/src/templates/opac/parts/misc_util.tt2 | 10 ++++++++++ 2 files changed, 20 insertions(+) diff --git a/Open-ILS/src/templates-bootstrap/opac/parts/misc_util.tt2 b/Open-ILS/src/templates-bootstrap/opac/parts/misc_util.tt2 index 359a5e9dc1..3e2234de07 100755 --- a/Open-ILS/src/templates-bootstrap/opac/parts/misc_util.tt2 +++ b/Open-ILS/src/templates-bootstrap/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 = []; @@ -868,6 +870,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 %] }); 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 %] }); -- 2.11.0