From 5e8c071446cb83785a211f0017a7bfcf8d3ceac7 Mon Sep 17 00:00:00 2001 From: Chris Doyle Date: Fri, 10 Apr 2026 13:18:32 -0400 Subject: [PATCH] finalize BS removal on homepage carousels --- .../stylesheets/homepage-slideshows.scss | 9 ++++-- .../digcols_carousel_controller.js | 31 +++++++++---------- .../highlights_carousel_controller.js | 31 +++++++++---------- .../controllers/news_carousel_controller.js | 31 +++++++++---------- 4 files changed, 51 insertions(+), 51 deletions(-) diff --git a/app/assets/stylesheets/homepage-slideshows.scss b/app/assets/stylesheets/homepage-slideshows.scss index aad0ce118..a880c1f1d 100644 --- a/app/assets/stylesheets/homepage-slideshows.scss +++ b/app/assets/stylesheets/homepage-slideshows.scss @@ -19,12 +19,15 @@ margin-left: 7px; width: 94%; padding-top: 0; + display: flex; + .carousel-item { + margin-right: 0; + flex: 0 0 100%; + display: block; + } @media (min-width: 768px) { - display: flex; .carousel-item { - margin-right: 0; flex: 0 0 33.333333%; - display: block; } } .card { diff --git a/app/javascript/controllers/digcols_carousel_controller.js b/app/javascript/controllers/digcols_carousel_controller.js index e5431be7e..f63fae84f 100644 --- a/app/javascript/controllers/digcols_carousel_controller.js +++ b/app/javascript/controllers/digcols_carousel_controller.js @@ -16,32 +16,31 @@ export default class extends Controller { carousel.pause(); - var carouselWidth = $("#digcolsCarousel .carousel-inner")[0].scrollWidth; + var carouselInner = $("#digcolsCarousel .carousel-inner")[0]; var cardWidth = $("#digcolsCarousel .carousel-item").width(); - var scrollPosition = 0; + + function maxScroll() { + return Math.max(0, carouselInner.scrollWidth - carouselInner.clientWidth); + } $("#digcolsCarousel .carousel-control-next").on("click", function (event) { event.preventDefault(); event.stopPropagation(); - if (scrollPosition < carouselWidth - cardWidth * 4) { - scrollPosition += cardWidth; - $("#digcolsCarousel .carousel-inner").animate( - { scrollLeft: scrollPosition }, - 600 - ); - } + var nextPosition = Math.min(carouselInner.scrollLeft + cardWidth, maxScroll()); + $("#digcolsCarousel .carousel-inner").animate( + { scrollLeft: nextPosition }, + 600 + ); }); $("#digcolsCarousel .carousel-control-prev").on("click", function (event) { event.preventDefault(); event.stopPropagation(); - if (scrollPosition > 0) { - scrollPosition -= cardWidth; - $("#digcolsCarousel .carousel-inner").animate( - { scrollLeft: scrollPosition }, - 600 - ); - } + var nextPosition = Math.max(carouselInner.scrollLeft - cardWidth, 0); + $("#digcolsCarousel .carousel-inner").animate( + { scrollLeft: nextPosition }, + 600 + ); }); } diff --git a/app/javascript/controllers/highlights_carousel_controller.js b/app/javascript/controllers/highlights_carousel_controller.js index a94c350cc..7491c909c 100644 --- a/app/javascript/controllers/highlights_carousel_controller.js +++ b/app/javascript/controllers/highlights_carousel_controller.js @@ -15,32 +15,31 @@ export default class extends Controller { carousel.pause(); - var carouselWidth = $("#highlightsCarousel .carousel-inner")[0].scrollWidth; + var carouselInner = $("#highlightsCarousel .carousel-inner")[0]; var cardWidth = $("#highlightsCarousel .carousel-item").width(); - var scrollPosition = 0; + + function maxScroll() { + return Math.max(0, carouselInner.scrollWidth - carouselInner.clientWidth); + } $("#highlightsCarousel .carousel-control-next").on("click", function (event) { event.preventDefault(); event.stopPropagation(); - if (scrollPosition < carouselWidth - cardWidth * 4) { - scrollPosition += cardWidth; - $("#highlightsCarousel .carousel-inner").animate( - { scrollLeft: scrollPosition }, - 600 - ); - } + var nextPosition = Math.min(carouselInner.scrollLeft + cardWidth, maxScroll()); + $("#highlightsCarousel .carousel-inner").animate( + { scrollLeft: nextPosition }, + 600 + ); }); $("#highlightsCarousel .carousel-control-prev").on("click", function (event) { event.preventDefault(); event.stopPropagation(); - if (scrollPosition > 0) { - scrollPosition -= cardWidth; - $("#highlightsCarousel .carousel-inner").animate( - { scrollLeft: scrollPosition }, - 600 - ); - } + var nextPosition = Math.max(carouselInner.scrollLeft - cardWidth, 0); + $("#highlightsCarousel .carousel-inner").animate( + { scrollLeft: nextPosition }, + 600 + ); }); } diff --git a/app/javascript/controllers/news_carousel_controller.js b/app/javascript/controllers/news_carousel_controller.js index 94f278701..1558c3387 100644 --- a/app/javascript/controllers/news_carousel_controller.js +++ b/app/javascript/controllers/news_carousel_controller.js @@ -15,32 +15,31 @@ export default class extends Controller { carousel.pause(); - var carouselWidth = $("#newsCarousel .carousel-inner")[0].scrollWidth; + var carouselInner = $("#newsCarousel .carousel-inner")[0]; var cardWidth = $("#newsCarousel .carousel-item").width(); - var scrollPosition = 0; + + function maxScroll() { + return Math.max(0, carouselInner.scrollWidth - carouselInner.clientWidth); + } $("#newsCarousel .carousel-control-next").on("click", function (event) { event.preventDefault(); event.stopPropagation(); - if (scrollPosition < carouselWidth - cardWidth * 4) { - scrollPosition += cardWidth; - $("#newsCarousel .carousel-inner").animate( - { scrollLeft: scrollPosition }, - 600 - ); - } + var nextPosition = Math.min(carouselInner.scrollLeft + cardWidth, maxScroll()); + $("#newsCarousel .carousel-inner").animate( + { scrollLeft: nextPosition }, + 600 + ); }); $("#newsCarousel .carousel-control-prev").on("click", function (event) { event.preventDefault(); event.stopPropagation(); - if (scrollPosition > 0) { - scrollPosition -= cardWidth; - $("#newsCarousel .carousel-inner").animate( - { scrollLeft: scrollPosition }, - 600 - ); - } + var nextPosition = Math.max(carouselInner.scrollLeft - cardWidth, 0); + $("#newsCarousel .carousel-inner").animate( + { scrollLeft: nextPosition }, + 600 + ); }); }