Skip to content

Commit a2ae5d7

Browse files
BeaNovoBeaNovo
authored
Merge pull request #51 from 4GeeksAcademy/ft026-estilos
Ft026 estilos
2 parents 53b869b + cc20849 commit a2ae5d7

File tree

10 files changed

+437
-169
lines changed

10 files changed

+437
-169
lines changed

‎src/front/js/component/card.js

+48-10
Original file line numberDiff line numberDiff line change
@@ -9,39 +9,77 @@ import { Link, useNavigate } from "react-router-dom";
99
export const Card = ({name, id, description, price, url}) => {
1010

1111
const navigate = useNavigate();
12+
const truncatedDescription =
13+
description.length > 40 ? description.slice(0, 40) + "..." : description;
14+
const truncatedName = name.length > 30 ? name.slice(0, 30) + "..." : name;
1215

1316
const { store, actions } = useContext(Context);
1417

1518
const handleAddToCart = () => {
1619

17-
// Verifica si el usuario está registrado
18-
if (store.user) { // Asumiendo que `store.user` contiene información del usuario si está autenticado
19-
actions.addToCart({ name, id, price, url }); // Añade el producto al carrito
20+
21+
if (store.user) {
22+
actions.addToCart({ name, id, price, url });
2023
} else {
2124
navigate("/##"); // Redirige al login si no está autenticado
2225
}
2326
};
2427

2528
return (
2629

27-
<div className="card m-2" style={{ width: "18rem" }}>
30+
<div className="card m-2 d-flex flex-column"
31+
style={{
32+
// background: "linear-gradient(to bottom,#FD841F,hsl(61, 80.60%, 71.80%)",
33+
// background: "hsl(61, 80.60%, 71.80%)",
34+
width: "15rem" }}>
2835
<Link to={`/vista-producto/${id}`} className="text-decoration-none">
2936
<img
3037
src={url}
31-
style={{ width: "100px", height: "150px" }}
38+
style={{
39+
width: "130px", height: "150px" }}
3240
className="card-img-top mx-auto d-block mt-2"
3341
alt="..."
3442
/>
35-
<div className="card-body text-center">
36-
<h5 className="card-title">{name}</h5>
37-
<p className="card-text">{description}</p>
38-
<h6 className="card-price">{price}€</h6>
43+
<div className="card-body text-center d-flex flex-column">
44+
<h5 className="card-title text-black">{truncatedName}</h5>
45+
46+
<div>
47+
<p className="card-text" style={{
48+
color:"grey",
49+
height: "60px",
50+
overflow: "hidden",
51+
textOverflow: "ellipsis",
52+
display: "-webkit-box",
53+
WebkitLineClamp: 3,
54+
WebkitBoxOrient: "vertical",
55+
}}
56+
>
57+
{truncatedDescription}</p>
58+
</div>
3959
</div>
4060
</Link>
4161

4262

4363
<div className="mt-auto text-center">
44-
<button onClick={handleAddToCart} className="btn btn-primary m-2">
64+
<h6 className="card-price mt-auto"
65+
style={{
66+
fontSize: "20px",
67+
fontWeight: "bold",
68+
// color: "#9C2C77", // Cambia el color del precio
69+
marginBottom: "10px", // Añade un margen inferior
70+
}}
71+
72+
>{price}€</h6>
73+
<button
74+
onClick={handleAddToCart}
75+
className="btn btn-warning mb-3 "
76+
style={{
77+
// background: "#EB5A3C",
78+
color: "black", // Color del texto
79+
width: "auto", // Ancho automático (ajusta al contenido)
80+
padding: "0.375rem 1rem", // Ajusta el padding para hacerlo más estrecho
81+
fontSize: "0.875rem", // Tamaño de la fuente
82+
}}>
4583
Añadir al carrito
4684
</button>
4785

‎src/front/js/component/producto.js

+60-23
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState, useContext } from "react";
22
import { Context } from "../store/appContext";
33
import { Link, useNavigate } from "react-router-dom";
44

5+
56
export const Producto = ({ id, data }) => {
67
const [precio, setPrecio] = useState(29.99);
78
const { actions, store } = useContext(Context);
@@ -34,44 +35,80 @@ export const Producto = ({ id, data }) => {
3435
};
3536

3637
return (
37-
<div className="container mt-5 text-center">
38-
<div className="row justify-content-center">
39-
<div className="col-md-8" style={{ width: "90%" }}>
38+
<div className="container text-center">
39+
<div className="row">
40+
<div className="col-md-8" style={{ width: "100%" }}>
4041
<div className="card mb-3 d-flex flex-column">
4142
<div className="row g-0 flex-fill">
42-
<div className="col-md-4">
43-
{data.url && (
44-
<img
45-
src={data.url}
46-
alt={data.name}
47-
className="img-fluid"
48-
style={{ maxHeight: "300px", objectFit: "cover" }}
43+
<div className="col-md-4 d-flex align-items-center justify-content-center"
44+
// style={{ backgroundColor: "#f8f9fa" }} // Fondo opcional
45+
>
46+
{data.url && (
47+
<img
48+
src={data.url}
49+
alt={data.name}
50+
className="img-fluid"
51+
style={{
52+
maxHeight: "300px",
53+
objectFit: "cover",
54+
width: "auto",
55+
maxWidth: "100%",
56+
}}
4957
/>
5058
)}
5159
</div>
5260
<div className="col-md-8">
53-
<div className="card-body d-flex flex-column flex-grow-1">
54-
<h5 className="card-title">
61+
<div className="card-body d-flex flex-column flex-grow-1 text-start">
62+
<h5 className="card-title text-black"
63+
// style={{
64+
// color: "#BF3131"}}
65+
>
5566
<strong>{data.name}</strong>
5667
</h5>
5768
<hr />
58-
<p className="card-text m-3 p-3">
59-
<strong>Descripción:</strong> {data.description}.
69+
<p className="card-text text-start" style={{
70+
color: "#7D0A0A"}}>
71+
<strong><u>Descripción:</u></strong>
72+
</p>
73+
<p className="card-text text-start text-black">{data.description}.
6074
</p>
61-
<p className="card-text m-3 p-3">
62-
<strong>Ingredientes:</strong> {data.ingredients}.
75+
<hr/>
76+
<p className="card-text text-start" style={{
77+
color: "#7D0A0A"}}>
78+
<strong><u>Ingredientes:</u></strong>
79+
</p>
80+
<p className="card-text text-start text-black">{data.ingredients}.
6381
</p>
64-
<p className="card-text m-3 p-3">
65-
<strong>Específico para:</strong> {data.pathologies}.
82+
<hr/>
83+
<p className="card-text text-start" style={{
84+
color: "#7D0A0A"}}>
85+
<strong><u>Específico para:</u></strong>
86+
</p>
87+
<p className="card-text text-start text-black">{data.pathologies}.
6688
</p>
67-
<div className="m-3 d-flex justify-content-around align-items-center">
68-
<h2 className="card-text text-xl-start">{data.price}€</h2>
89+
90+
<div className=" d-flex justify-content-around align-items-center">
91+
<h2 className="card-text text-xl-start"
92+
style={{
93+
fontSize: "30px",
94+
fontWeight: "bold",
95+
// color: "#9C2C77", // Cambia el color del precio
96+
marginBottom: "10px", // Añade un margen inferior
97+
}}>{data.price}€</h2>
6998
</div>
7099

71100
<div className="mt-auto text-center">
72-
<button className="btn btn-primary m-2" onClick={productAdd}>
73-
Añadir al carrito
74-
       </button>
101+
<button
102+
className="btn btn-warning m-2" style={{
103+
// background: "#BF3131",
104+
width:"300px",
105+
color: "black",
106+
border: "none",
107+
padding: "0.5rem 1rem",
108+
borderRadius: "5px",
109+
}} onClick={productAdd}><strong>
110+
Añadir al carrito</strong>
111+
</button>
75112
</div>
76113
</div>
77114
</div>

0 commit comments

Comments
 (0)