diff --git a/app/components/place-photos-carousel.gjs b/app/components/place-photos-carousel.gjs index 46e5b6d..88af3fb 100644 --- a/app/components/place-photos-carousel.gjs +++ b/app/components/place-photos-carousel.gjs @@ -144,6 +144,8 @@ export default class PlacePhotosCarousel extends Component { {{/if}} {{/each}} + +
{{#if this.showChevrons}} diff --git a/app/styles/app.css b/app/styles/app.css index c96a9bc..9310a2e 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -906,6 +906,10 @@ abbr[title] { overflow: hidden; } +.carousel-placeholder { + display: none; +} + .place-header-photo-blur { position: absolute; top: 0; @@ -992,6 +996,7 @@ abbr[title] { .place-photos-carousel-track { scroll-snap-type: none; gap: 2px; + background-color: #fff; } .carousel-slide { @@ -1002,6 +1007,13 @@ abbr[title] { scroll-snap-align: none; } + .carousel-placeholder { + display: block; + background-color: var(--hover-bg); + flex: 1 1 0%; + min-width: 0; + } + .place-header-photo.landscape, .place-header-photo.portrait { object-fit: cover; diff --git a/tests/integration/components/place-photos-carousel-test.gjs b/tests/integration/components/place-photos-carousel-test.gjs index 6c3488d..167f48e 100644 --- a/tests/integration/components/place-photos-carousel-test.gjs +++ b/tests/integration/components/place-photos-carousel-test.gjs @@ -40,7 +40,12 @@ module('Integration | Component | place-photos-carousel', function (hooks) { assert .dom('.place-photos-carousel-wrapper') .exists('it renders the wrapper'); - assert.dom('.carousel-slide').exists({ count: 1 }, 'it renders one slide'); + assert + .dom('.carousel-slide:not(.carousel-placeholder)') + .exists({ count: 1 }, 'it renders one real photo slide'); + assert + .dom('.carousel-placeholder') + .exists({ count: 1 }, 'it renders one placeholder'); assert .dom('img.place-header-photo') .hasAttribute('data-src', 'photo1.jpg', 'it sets the data-src correctly');