From 46d7e9c7e19dd6a03cf259d0dac941bb36a0cafe Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Mon, 15 May 2017 19:20:40 +0300
Subject: [PATCH] No image icon and aspect ratio to 3:2

---
 src/containers/ListingPage/ListingPage.css    | 20 ++++++++++++++--
 src/containers/ListingPage/ListingPage.js     | 23 +++++++++++++++++--
 .../ListingPage/images/noImageIcon.svg        |  1 +
 3 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 src/containers/ListingPage/images/noImageIcon.svg

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 = (
+      <div className={css.mainImage}>
+        <div className={css.aspectWrapper}>
+          <div className={css.noImageContainer}>
+            <div className={css.noImageWrapper}>
+              <img className={css.noImageIcon} src={noImageIcon} alt="No images added" />
+              <div className={css.noImageText}>No image</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+
     // TODO componentize
     const imageCarousel = images.length > 0
       ? <div className={css.imageContainer}>
           <img className={css.mainImage} alt={title} src={images[0].sizes[0].url} />
           <div className={css.thumbnailContainer}>
             {images.slice(1).map(image => (
-              <div key={image.id.uuid} className={css.squareWrapper}>
+              <div key={image.id.uuid} className={css.thumbnailWrapper}>
                 <div className={css.aspectWrapper}>
                   <img
                     className={css.thumbnail}
@@ -133,7 +152,7 @@ export class ListingPageComponent extends Component {
             ))}
           </div>
         </div>
-      : null;
+      : noListingImage;
 
     const userAndListingAuthorAvailable = currentUser && currentListing && currentListing.author;
     const isOwnListing = userAndListingAuthorAvailable &&
diff --git a/src/containers/ListingPage/images/noImageIcon.svg b/src/containers/ListingPage/images/noImageIcon.svg
new file mode 100644
index 00000000..c168d5cd
--- /dev/null
+++ b/src/containers/ListingPage/images/noImageIcon.svg
@@ -0,0 +1 @@
+<svg width="48" height="49" viewBox="0 -1 48 49" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 47.2h48V0H0z"/></defs><g fill="none" fill-rule="evenodd"><path stroke="#525961" stroke-width="2" stroke-linejoin="round" d="M13.6 9.6L24 .8l10.4 8.8z"/><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path stroke="#525961" stroke-width="2" mask="url(#b)" d="M.8 46.4h46.4V9.6H.8z"/><path stroke="#525961" stroke-width="2" mask="url(#b)" d="M5.6 41.6h36.8V14.4H5.6z"/><path d="M19.998 31.636l.835-.835a4.035 4.035 0 0 1 2.853-1.183h.693c1.07 0 2.097.426 2.853 1.183l.835.835" stroke="#525961" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" mask="url(#b)"/><path d="M21.599 23.983a1.009 1.009 0 1 0 0 2.018 1.009 1.009 0 0 0 0-2.018M26.402 23.983a1.009 1.009 0 1 0 0 2.018 1.009 1.009 0 0 0 0-2.018" fill="#525961" mask="url(#b)"/></g></svg>