no image message added

milanmilosev · Nov 25, 2019 · ab882e7 · ab882e7
1 parent cdbf710
commit ab882e7
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 24 deletions.
diff --git a/background.js b/background.js
@@ -12,14 +12,14 @@ chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
   if (request.message === "SHOW_RESULTS") {
     const status = request.results.status;
     const app = document.querySelector(".ebay-klein__result");
-    const containerImg = document.querySelector(".ebay-klein__main__image");
+    const noImageMsg = document.querySelector(".ebay-klein__no-image");
+
+    status ? (noImageMsg.style.display = "none") : null;
 
-    status ? (containerImg.style.display = "none") : null;
-    console.log(app);
     app.innerHTML = status
       ? request.results.imageSource.map(
           img => `<a href="${img}" target="_blank"><img src="${img}"/></a>`
         )
-      : `<p>There's no images</p>`;
+      : null;
   }
 });
diff --git a/index.html b/index.html
@@ -15,9 +15,17 @@ <h3>
         </h3>
       </div>
       <div class="ebay-klein__main">
-        <div class="ebay-klein__main__image"></div>
         <div class="ebay-klein__result"></div>
-        <button class="ebay-klein__btn" id="loadImages">Load images</button>
+        <div class="ebay-klein__no-image">
+          <div class="ebay-klein__main__image"></div>
+          <p class="ebay-klein__no-image__text">
+            Sorry, it seems there's no images.<br />Be sure you are on the
+            <a href="https://www.ebay-kleinanzeigen.de" target="_blank"
+              >ebay-kleinanzeigen</a
+            >
+            AD page!
+          </p>
+        </div>
       </div>
     </div>
     <script src="background.js"></script>

diff --git a/style.css b/style.css
@@ -54,24 +54,6 @@
   margin: 50px auto 0;
 }
 
-.ebay-klein__btn {
-  font-family: Helvetica, sans-serif;
-  font-size: 13px;
-  min-width: 140px;
-  min-height: 26px;
-  margin: 20px auto;
-  min-width: 65px;
-  box-sizing: border-box;
-  text-align: center;
-  height: 30px;
-  width: 47%;
-  display: block;
-  cursor: pointer;
-  border-radius: 3px;
-  padding: 0px 5px;
-  background: linear-gradient(rgb(247, 247, 247) 0%, rgb(255, 255, 255) 100%);
-  border: 1px solid rgb(171, 182, 191);
-}
 .ebay-klein__image-svg {
   width: 100%;
 }
@@ -91,3 +73,14 @@
   padding: 0;
   border: 0;
 }
+
+.ebay-klein__no-image__text {
+  color: rgb(100, 115, 130);
+  text-align: center;
+  padding: 10px 20px;
+}
+
+.ebay-klein__no-image__text a {
+  color: rgb(100, 115, 130);
+  font-weight: bold;
+}