diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css index dfe33f7b..39a184e1 100644 --- a/src/containers/ListingPage/ListingPage.css +++ b/src/containers/ListingPage/ListingPage.css @@ -29,6 +29,9 @@ padding-bottom: 66.6667%; /* 3:2 Aspect Ratio */ background-color: var(--matterColorNegative); /* Loading BG color */ + /* Image carousel can be opened from the image, therefore we should show a pointer */ + cursor: pointer; + @media (--viewportMedium) { padding-bottom: 0; /* No fixed aspect on desktop layouts */ } @@ -45,6 +48,10 @@ background-color: var(--matterColor); z-index: 1; /* bring on top of mobile image */ + /* Action bar prevents the image click events going to the parent and + should not show a pointer */ + cursor: initial; + border-radius: 2px 2px 0 0; } diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js index f4ed6a3f..b85d80bd 100644 --- a/src/containers/ListingPage/ListingPage.js +++ b/src/containers/ListingPage/ListingPage.js @@ -1,3 +1,4 @@ +/* eslint-disable jsx-a11y/no-static-element-interactions */ import React, { Component, PropTypes } from 'react'; import { FormattedMessage, intlShape, injectIntl } from 'react-intl'; import { compose } from 'redux'; @@ -179,7 +180,10 @@ export class ListingPageComponent extends Component { const hasImages = currentListing.images && currentListing.images.length > 0; const firstImage = hasImages ? currentListing.images[0] : null; - const handleViewPhotosClick = () => { + const handleViewPhotosClick = e => { + // Stop event from bubbling up to prevent image click handler + // trying to open the carousel as well. + e.stopPropagation(); this.setState({ imageCarouselOpen: true, }); @@ -262,6 +266,18 @@ export class ListingPageComponent extends Component { } }; + // Action bar is wrapped with a div that prevents the click events + // to the parent that would otherwise open the image carousel + const actionBar = currentListing.id + ?