🐛 Se corrigen rutas relativas

Se corrige responsive y rutas relativas
SofiDevO · Sep 14, 2023 · 3ee5cd8 · 3ee5cd8
1 parent aa46d67
commit 3ee5cd8
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 53 deletions.
diff --git a/assets/controllers/allProducts.controllers.js b/assets/controllers/allProducts.controllers.js
@@ -19,12 +19,12 @@ const crearNuevoProducto = (img, name, price, Description, category, id) => {
             <h3>Precio</h3>
             <span>${price}</span>
         </div>
-        <a href="./screens/producto.html?category=${category}&id=${id}">Ver producto</a>
+        <a href="/screens/producto.html?category=${category}&id=${id}">Ver producto</a>
+        `;
+        tarjeta.innerHTML = contenido;
+        return tarjeta;
+    };
 
-    `;
-	tarjeta.innerHTML = contenido;
-	return tarjeta;
-};
 
 const seccionAll = d.querySelector('[data-productos]');
 productServices.allProducts().then((data) => {

diff --git a/assets/styles/base/dark-mode.css b/assets/styles/base/dark-mode.css
@@ -6,6 +6,9 @@
     color: var(--preto-blanco);
 }
 
+.dark-mode .footer__contacto h2{
+    color: var(--preto-blanco);
+}
 
 
 .dark-mode .productos__titulo{
@@ -76,3 +79,10 @@ color: rgb(255, 255, 255);
     height: 50%;
 }
 
+.dark-mode .footer__links li a{
+    color: var(--preto-blanco);
+}
+
+.dark-mode .rodapie__container{
+    color: var(--preto-blanco);
+}
diff --git a/assets/styles/home/productos.css b/assets/styles/home/productos.css
@@ -205,20 +205,19 @@
 
 .productos__caja .card .contentBx a {
 	display: inline-block;
-	padding: 10px 20px;
-	backdrop-filter: blur(5px);
-	background-color: rgba(255, 255, 255, 1);
-	border-radius: 38px;
-	box-shadow: -35px 35px 68px 0px rgba(6, 197, 255, 0.829),
-		inset 12px -12px 16px 0px rgba(31, 173, 255, 0.705),
-		inset 0px 11px 28px 0px rgb(221, 221, 221);
-	margin-top: 10px;
-	text-decoration: none;
-	font-weight: 800;
-	color: #111;
-	opacity: 0;
-	transform: translateY(40px);
-	transition: 0.5s;
+    padding: 10px 20px;
+    backdrop-filter: blur(5px);
+    background-color: rgba(255, 255, 255, 1);
+    border-radius: 38px;
+    box-shadow: 35px 35px 68px 0px rgba(215, 215, 215, 0.5), inset -8px -8px 16px 0px rgba(215, 215, 215, 0.6), inset 0px 11px 28px 0px rgb(255, 255, 255);
+    margin-top: 10px;
+	border: 1px solid rgba(0, 0, 0, 0.119);
+    text-decoration: none;
+    font-weight: 800;
+    color: #111;
+    opacity: 0;
+    transform: translateY(40px);
+    transition: 0.5s;
 }
 
 .productos__caja .card:hover .contentBx a {

diff --git a/assets/styles/producto-detalle/producto-detalle.css b/assets/styles/producto-detalle/producto-detalle.css
@@ -1,24 +1,23 @@
-
 .detalle {
 	display: flex;
-    width: 100%;
-    justify-content: center;
-    align-items: center;
+	width: 100%;
+	justify-content: center;
+	align-items: center;
 }
 .detalle__container {
 	display: flex;
 	align-items: center;
 	gap: 1.6rem;
 	justify-content: center;
-	max-width:  75%;
+	max-width: 75%;
 	backdrop-filter: blur(9px);
 	background-color: rgba(255, 255, 255, 1);
 	border-radius: 41px;
 	box-shadow: 0px 35px 68px 0px rgba(145, 192, 255, 0.5),
 		inset 0px -10px 16px 0px rgba(145, 192, 255, 0.6),
 		inset 0px 11px 28px 0px rgb(255, 255, 255);
-	    padding: 0 1rem 5rem;
-		margin-top: 19rem;
+	padding: 0 1rem 5rem;
+	margin-top: 19rem;
 }
 
 .detalle__img img {
@@ -51,17 +50,16 @@
 }
 .detalle__parrafo {
 	color: var(--preto-100, #464646);
-	font-family: Raleway;
-	font-size: 16px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: normal;
-	text-align: justify;
+    font-family: Raleway;
+    font-size: 17px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.6;
+    text-align: left;
 }
 
 /* productos similares */
 
-
 @media screen and (max-width: 1024px) {
 	.detalle__container {
 		display: flex;
@@ -75,7 +73,7 @@
 	}
 	.detalle__titulo {
 		font-size: 2.5rem;
-        margin: 0;
+		margin: 0;
 	}
 }
 
@@ -84,21 +82,21 @@
 		width: 100%;
 	}
 	.detalle__container {
-        flex-wrap: wrap;
-        width: 90%;
-        padding: 1.5rem;
-    }	
+		flex-wrap: wrap;
+		max-width: 95%;
+		padding: 2rem;
+		width: 92%;
+	}
 	.detalle__img img {
-        max-width: 31rem;
-    }
+		max-width: 22rem;
+	}
 
 	.detalle__descripcion {
 		width: 100%;
-        margin: 0;
-        padding: 0;
+		margin: 0;
+		padding: 0;
+	}
+	.detalle__precio {
+		margin: 0;
 	}
-    .detalle__precio{
-        margin: 0;
-    }
-
 }
diff --git a/assets/styles/productos-all/all-products.css b/assets/styles/productos-all/all-products.css
@@ -14,13 +14,15 @@
 
 
 .productos__flia {
-    display: flex;
+	display: flex;
     flex-direction: column;
     align-items: center;
-    margin: 6.4rem 0 6.4rem 0;
+    margin: 48px 0 6.4rem 0;
     width: 100%;
 }
 
+
+
 .productos__barra {
 	display: flex;
     justify-content: space-between;
@@ -206,7 +208,7 @@
 }
 
 .productos__caja .card .contentBx .price span {
-	width: 61px;
+	width: 6.1rem;
 	text-align: center;
 	display: inline-block;
 	margin: 0 5px;
@@ -217,6 +219,7 @@
 
 .size span{
 	font-size: 2rem;
+	color: var(--preto-100);
 
 }
 
@@ -241,6 +244,7 @@
 	border-radius: 38px;
 	box-shadow: 35px 35px 68px 0px rgba(215, 215, 215, 0.5), inset -8px -8px 16px 0px rgba(215, 215, 215, 0.6), inset 0px 11px 28px 0px rgb(255, 255, 255);
 	margin-top: 10px;
+	border: 1px solid rgba(0, 0, 0, 0.119);
 	text-decoration: none;
 	font-weight: 800;
 	color: #111;
@@ -306,8 +310,14 @@
 	}
 
 	.productos__flia {
-
-		padding: 27.4rem 0;
+		display: flex;
+		margin: 14.3rem 0 6.4rem 0;
+		/* width: 100%; */
+		flex-direction: column;
+		align-items: center;
+	}
+	.all-products{
+		margin: 0rem 0 6.4rem ;
 	}
 
 }
diff --git a/screens/busqueda.html b/screens/busqueda.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" href="../assets/styles/base/header.css">
     <link rel="stylesheet" href="../assets/styles/base/dark-mode.css">
     <link rel="stylesheet" href="../assets/styles/base/footer.css">
-    <link rel="stylesheet" href="../assets/styles/home/productos.css">
+    <link rel="stylesheet" href="../assets/styles/productos-all/all-products.css">
     <link rel="stylesheet" href="../assets/styles/busqueda/busqueda.css">
 
 
@@ -70,7 +70,7 @@
 
 
     <main>
-        <div class="productos__flia" >
+        <div class="productos__flia all-products" >
             <div class="productos__barra">
                 <div class="productos__titulo">
                     <h2 class="productos__titulo">Resultados</h2>

diff --git a/services/product-service.js b/services/product-service.js
@@ -1,6 +1,11 @@
 // Define the base API URL
 const BASE_API_URL = "https://my-alura-geek-api.vercel.app/product";
 
+/* You can run "json-server -w -p 5555 db.json" to run as a local host 
+and use this resourse:
+http://localhost:5555/product in the BASE_APIURL
+*/
+
 // Generic function for making HTTP requests
 const fetchData = async (url, options = {}) => {
   const response = await fetch(url, options);