Merge pull request #98 from Nefariusek/bug/issue-97

Fixing paths and urls for the production version

Author: mngweb

src/views/AdoptionPage/AdoptionPage.css

@@ -60,41 +60,41 @@
 }
 
 .adoption-page .navigation-container .dog {
-  background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(./adoption-dog.jpg), no-repeat;
+  background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(../adoption-dog.jpg), no-repeat;
   background-size: 290px;
   background-position: center center;
 }
 
 .adoption-page .navigation-container .dog:hover {
-  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(./adoption-dog.jpg), no-repeat;
+  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(../adoption-dog.jpg), no-repeat;
   background-size: 290px;
   background-position: center center;
   transform: scale(1.1);
   transition: ease-in-out all 0.4s;
 }
 
 .adoption-page .navigation-container .cat {
-  background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(./adoption-cat.jpg), no-repeat;
+  background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(../adoption-cat.jpg), no-repeat;
   background-size: 290px;
   background-position: center center;
 }
 
 .adoption-page .navigation-container .cat:hover {
-  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(./adoption-cat.jpg), no-repeat;
+  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(../adoption-cat.jpg), no-repeat;
   background-size: 290px;
   background-position: center center;
   transform: scale(1.1);
   transition: ease-in-out all 0.4s;
 }
 
 .adoption-page .navigation-container .bird {
-  background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(./adoption-bird.jpg), no-repeat;
+  background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(../adoption-bird.jpg), no-repeat;
   background-size: 290px;
   background-position: center center;
 }
 
 .adoption-page .navigation-container .bird:hover {
-  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(./adoption-bird.jpg), no-repeat;
+  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(../adoption-bird.jpg), no-repeat;
   background-size: 300px;
   background-position: center center;
   transform: scale(1.1);

src/views/AdoptionPage/AdoptionPage.js

@@ -3,7 +3,7 @@ import Button from '../../components/Button/Button';
 
 const PAGE_TITLE = 'ADOPTION';
 const MAIN_TEXT = 'CHOOSE YOUR NEW PET:';
-const MAIN_ANIMAL = { pathOrUrl: './bird.png', alt: 'flying bird' };
+const MAIN_ANIMAL = { pathOrUrl: '../bird.png', alt: 'flying bird' };
 const ANIMAL_TYPES = [
   { type: 'cat', pathOrUrl: 'https://www.petfinder.com/' },
   { type: 'dog', pathOrUrl: 'https://www.petfinder.com/' },
@@ -43,7 +43,7 @@ function renderNavigation() {
 
   ANIMAL_TYPES.forEach((animal) => {
     const animalOption = document.createElement('li');
-    animalOption.innerHTML = `<a href="${animal.pathOrUrl}" class="option ${
+    animalOption.innerHTML = `<a href="${animal.pathOrUrl}" target="_blank" class="option ${
       animal.type
     }"><span>${animal.type.toUpperCase()}</span></a>`;
     animalList.append(animalOption);

src/views/CreditsPage/CreditsPage.js

@@ -3,7 +3,7 @@ import Button from '../../components/Button/Button';
 import Bubble from '../../components/Bubble/Bubble';
 
 const PAGE_TITLE = 'CREDITS';
-const MAIN_ANIMAL_IMG = { pathOrUrl: './kangoroo.png', alt: 'kangoroo that tells informations' };
+const MAIN_ANIMAL_IMG = { pathOrUrl: '../kangoroo.png', alt: 'kangoroo that tells informations' };
 const CreditsBubbleContent = {
   HEADER_TEXT: 'This is our first project of Coders Camp 2021',
   SENTENCE: 'Meet our whole team',

src/views/MainPage/MainPage.js

@@ -6,7 +6,7 @@ import { retrieveAnimalFact } from '../../api/FactsController';
 import { onNavigationChange } from '../../components/router/Router';
 
 const PAGE_TITLE = 'ANIMALIADA';
-const MAIN_ANIMAL_IMG = { pathOrUrl: './kangoroo.png', alt: 'kangoroo that tells informations' };
+const MAIN_ANIMAL_IMG = { pathOrUrl: '../kangoroo.png', alt: 'kangoroo that tells informations' };
 const FACT_HEADER = 'Did you know?';
 const AdoptionBubbleContent = {
   IMG: { pathOrUrl: 'https://placedog.net/150/150?random', alt: 'the animal to adoption' },
@@ -95,7 +95,6 @@ async function renderFactBubbleContent() {
     },
     false,
   );
-
   renderAnimalFactImg(imageFact, imageObject);
 }