diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css index 79e9922d..34281f4f 100644 --- a/src/containers/ListingPage/ListingPage.css +++ b/src/containers/ListingPage/ListingPage.css @@ -26,6 +26,7 @@ .mainImage { width: 100%; + position: relative; } .thumbnailContainer { @@ -34,7 +35,8 @@ padding: 1rem; } -.squareWrapper { +/* Reserves a correct size of painting area for the image before it has been downloaded */ +.thumbnailWrapper { display: block; position: relative; width: 100px; @@ -43,9 +45,10 @@ /* Firefox doesn't support image aspect ratio inside flexbox */ .aspectWrapper { - padding-bottom: 75%; /* 4:3 Aspect Ratio */ + padding-bottom: 66.67%; /* Aspect Ratio: 3:2 = 100%/(w/h) */ } +.noImageContainer, .thumbnail { position: absolute; top: 0; @@ -56,6 +59,19 @@ height: 100%; } +.noImageContainer, +.noImageWrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #eee; +} + +.noImageText { + color: #666; +} + .description { margin: 1rem; } diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js index 633af67d..b1e4987f 100644 --- a/src/containers/ListingPage/ListingPage.js +++ b/src/containers/ListingPage/ListingPage.js @@ -14,7 +14,9 @@ import { Button, Map, ModalInMobile, PageLayout } from '../../components'; import { BookingDatesForm } from '../../containers'; import { getListingsById } from '../../ducks/marketplaceData.duck'; import { showListing } from './ListingPage.duck'; + import css from './ListingPage.css'; +import noImageIcon from './images/noImageIcon.svg'; // This defines when ModalInMobile shows content as Modal const MODAL_BREAKPOINT = 2500; @@ -115,13 +117,30 @@ export class ListingPageComponent extends Component { ? currentListing.images.map(i => ({ id: i.id, sizes: i.attributes.sizes })) : []; + + // TODO: svg should have own loading strategy + // Now noImageIcon is imported with default configuration (gives url) + // This should be handled by ResponsiveImage or separate ImagePlaceholder component + const noListingImage = ( +