finitions pour components item
This commit is contained in:
parent
dbc1c78f07
commit
5cf47ecb12
Binary file not shown.
After Width: | Height: | Size: 27 KiB |
BIN
GrossesMitaines/grosses-mitaines-ui/public/images/doudou.jpg
Normal file
BIN
GrossesMitaines/grosses-mitaines-ui/public/images/doudou.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 48 KiB |
BIN
GrossesMitaines/grosses-mitaines-ui/public/images/kokin.jpg
Normal file
BIN
GrossesMitaines/grosses-mitaines-ui/public/images/kokin.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 60 KiB |
BIN
GrossesMitaines/grosses-mitaines-ui/public/images/mitaines.jpg
Normal file
BIN
GrossesMitaines/grosses-mitaines-ui/public/images/mitaines.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 26 KiB |
@ -1,17 +1,105 @@
|
|||||||
const Item = ({ imageUrl, name, price, status }) => {
|
import { Card } from "react-bootstrap";
|
||||||
|
|
||||||
|
// public enum States {
|
||||||
|
// Available,
|
||||||
|
// BackOrder,
|
||||||
|
// Unavailable,
|
||||||
|
// Clearance,
|
||||||
|
// Promotion,
|
||||||
|
// Discontinued
|
||||||
|
// }
|
||||||
|
function renderStatus(statusCode) {
|
||||||
|
switch (statusCode) {
|
||||||
|
case 0:
|
||||||
|
return (
|
||||||
|
<Card.Text className="item-status item-status-available">
|
||||||
|
Disponible
|
||||||
|
</Card.Text>
|
||||||
|
);
|
||||||
|
|
||||||
|
case 1:
|
||||||
|
return (
|
||||||
|
<Card.Text className="item-status item-status-backorder">
|
||||||
|
En commande
|
||||||
|
</Card.Text>
|
||||||
|
);
|
||||||
|
case 2:
|
||||||
|
return (
|
||||||
|
<Card.Text className="item-status item-status-unavailable">
|
||||||
|
Indisponible
|
||||||
|
</Card.Text>
|
||||||
|
);
|
||||||
|
case 3:
|
||||||
|
return (
|
||||||
|
<Card.Text className="item-status item-status-clearence">
|
||||||
|
Liquidation
|
||||||
|
</Card.Text>
|
||||||
|
);
|
||||||
|
case 4:
|
||||||
|
return (
|
||||||
|
<Card.Text className="item-status item-status-promotion">
|
||||||
|
Promotion
|
||||||
|
</Card.Text>
|
||||||
|
);
|
||||||
|
case 5:
|
||||||
|
return (
|
||||||
|
<Card.Text className="item-status item-status-discontinued">
|
||||||
|
Discontinué
|
||||||
|
</Card.Text>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return (
|
||||||
|
<></>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderPrice(price, newPrice) {
|
||||||
|
|
||||||
|
if (newPrice < 0) {
|
||||||
|
return (
|
||||||
|
<Card.Text className="item-price-container">
|
||||||
|
<span className="item-price">
|
||||||
|
{price.toFixed(2).toString().replace(".", ",")} $ CA
|
||||||
|
</span>
|
||||||
|
</Card.Text>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return (
|
||||||
|
<Card.Text className="item-price-container">
|
||||||
|
<span className="item-old-price">
|
||||||
|
{price.toFixed(2).toString().replace(".", ",")} $ CA
|
||||||
|
</span>
|
||||||
|
<span className="item-new-price">
|
||||||
|
{newPrice.toFixed(2).toString().replace(".", ",")} $ CA
|
||||||
|
</span>
|
||||||
|
</Card.Text>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const Item = ({ imageUrl, name, price, newPrice, status }) => {
|
||||||
return (
|
return (
|
||||||
<div className="row item">
|
|
||||||
<div className="col-md-2">
|
<Card className="item">
|
||||||
<img src={imageUrl} alt={name} height="150" />
|
<Card.Img className="item-img" variant="top" src={imageUrl} />
|
||||||
</div>
|
<Card.Body className="item-info">
|
||||||
<div className="col-md-8 item-detail">
|
<div className="item-name-container">
|
||||||
<h4>{name}</h4>
|
<Card.Title className="item-name">
|
||||||
<div dangerouslySetInnerHTML={{ __html: status }}></div>
|
{name}
|
||||||
</div>
|
</Card.Title>
|
||||||
<div className="col-md-2 item-price">
|
</div>
|
||||||
{price}
|
<div className="item-status-container">
|
||||||
</div>
|
{renderStatus(status)}
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
{renderPrice(price, newPrice)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</Card.Body>
|
||||||
|
</Card>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -3,12 +3,13 @@ import Item from './Item';
|
|||||||
const ItemList = ({ items }) => {
|
const ItemList = ({ items }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className='item-list'>
|
||||||
{items.map((item) =>
|
{items.map((item) =>
|
||||||
<Item imageUrl={item.imageUrl}
|
<Item imageUrl={item.imageUrl}
|
||||||
name={item.name}
|
name={item.name}
|
||||||
price={item.price}
|
price={item.price}
|
||||||
status={item.status}
|
status={item.status}
|
||||||
|
newPrice={item.newPrice}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -3,24 +3,65 @@ import ItemList from "../components/ItemList";
|
|||||||
|
|
||||||
const Morceaux = () => {
|
const Morceaux = () => {
|
||||||
|
|
||||||
|
|
||||||
|
// public enum States {
|
||||||
|
// Available,
|
||||||
|
// BackOrder,
|
||||||
|
// Unavailable,
|
||||||
|
// Clearance,
|
||||||
|
// Promotion,
|
||||||
|
// Discontinued
|
||||||
|
// }
|
||||||
|
|
||||||
const products = [
|
const products = [
|
||||||
{
|
{
|
||||||
"name": "Ceinture flèchée",
|
"name": "Ceinture flèchée",
|
||||||
"status": "Disponible!",
|
"status": 0,
|
||||||
"price": "85,86",
|
"price": 85.86,
|
||||||
|
"newPrice": -1,
|
||||||
"imageUrl": "/images/ceintureflechee.jpg"
|
"imageUrl": "/images/ceintureflechee.jpg"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "Chandail de nowel",
|
||||||
|
"status": 2,
|
||||||
|
"price": 69.50,
|
||||||
|
"newPrice": -1,
|
||||||
|
"imageUrl": "/images/chandailquetaine.jpg"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "Pantoufles du Canadien en Phentex",
|
"name": "Pantoufles du Canadien en Phentex",
|
||||||
"status": "Non disponible...",
|
"status": 5,
|
||||||
"price": "15,64",
|
"price": 15.64,
|
||||||
|
"newPrice": -1,
|
||||||
"imageUrl": "/images/pantouflesCH.jpg"
|
"imageUrl": "/images/pantouflesCH.jpg"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Jean-Luc Mongrain",
|
"name": "Jean-Luc Mongrain",
|
||||||
"status": "Disponible!",
|
"status": 1,
|
||||||
"price": "1453,12",
|
"price": 1453.12,
|
||||||
|
"newPrice": -1,
|
||||||
"imageUrl": "/images/jeanlucmongrain.jpg"
|
"imageUrl": "/images/jeanlucmongrain.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Mitaines de laine",
|
||||||
|
"status": 4,
|
||||||
|
"price": 24.99,
|
||||||
|
"newPrice": 19.99,
|
||||||
|
"imageUrl": "/images/mitaines.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Sous-vêtements coquins",
|
||||||
|
"status": 3,
|
||||||
|
"price": 19.99,
|
||||||
|
"newPrice": 14.99,
|
||||||
|
"imageUrl": "/images/kokin.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Doudou douce et grise",
|
||||||
|
"status": 3,
|
||||||
|
"price": 99.99,
|
||||||
|
"newPrice": 89.99,
|
||||||
|
"imageUrl": "/images/doudou.jpg"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -30,7 +71,6 @@ const Morceaux = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="morceaux-container">
|
<div className="morceaux-container">
|
||||||
<h3>QWERTY</h3>
|
|
||||||
<ItemList items={products} />
|
<ItemList items={products} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -200,20 +200,159 @@ html {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* items */
|
||||||
|
.item-list {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:hover{
|
||||||
|
box-shadow: 10px 10px;
|
||||||
|
top:-5px;
|
||||||
|
left:-5px;
|
||||||
|
background-color: beige;
|
||||||
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
border: 5px purple double;
|
|
||||||
border-radius: 5px;
|
border:purple double 3px;
|
||||||
padding: 1rem 0;
|
margin-left: 1.25%;
|
||||||
margin: 1rem 0;
|
margin-right: 1.25%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
background-color: rgba(245, 245, 220, 0.75);
|
||||||
|
display: inline-block;
|
||||||
|
height:300px;
|
||||||
|
width: 30%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-detail {
|
.item-img {
|
||||||
padding: 0 2rem;
|
padding-top: 2%;
|
||||||
|
box-shadow: 5px 5px;
|
||||||
|
border-radius: 2px;
|
||||||
|
display:block;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
height:50%;
|
||||||
|
width:auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-price {
|
.item-info{
|
||||||
|
height:50%;
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-name-container{
|
||||||
|
height:45%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-name {
|
||||||
|
margin:auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-status-container{
|
||||||
|
height:40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-status {
|
||||||
|
font-weight: normal;
|
||||||
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
width: fit-content;
|
||||||
|
height:fit-content;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-right: 5px;
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
display: block;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-status-available{
|
||||||
|
color:green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-status-backorder{
|
||||||
|
color:yellow;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-status-unavailable{
|
||||||
|
color:red;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-status-clearence{
|
||||||
|
color:blue;
|
||||||
|
background-color: aliceblue;
|
||||||
|
font-size: large;
|
||||||
|
border: yellow 2px groove;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-status-promotion{
|
||||||
|
color:purple;
|
||||||
|
font-size: medium;
|
||||||
|
background-color: aliceblue;
|
||||||
|
border: yellow 2px groove;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-status-discontinued{
|
||||||
|
color:white;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-price-container{
|
||||||
|
height: fit-content;
|
||||||
|
width: auto;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-price{
|
||||||
|
color:green;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 140%;
|
font-size: large;
|
||||||
|
height:auto;
|
||||||
|
margin:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-old-price{
|
||||||
|
position:relative;
|
||||||
|
color:black;
|
||||||
|
text-decoration: line-through;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: small;
|
||||||
|
height:auto;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-new-price{
|
||||||
|
font-size: large;
|
||||||
|
margin-left: 10px;
|
||||||
|
font-weight: bolder;
|
||||||
|
background-color: aliceblue;
|
||||||
|
color: purple;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* -------------------------------------------------------- */
|
||||||
|
/* specification pour les moyennes écrans
|
||||||
|
/* -------------------------------------------------------- */
|
||||||
|
@media(max-width:900px){
|
||||||
|
.item{
|
||||||
|
width:45%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -222,6 +361,11 @@ html {
|
|||||||
/* -------------------------------------------------------- */
|
/* -------------------------------------------------------- */
|
||||||
|
|
||||||
@media (max-width:450px) {
|
@media (max-width:450px) {
|
||||||
|
|
||||||
|
.item{
|
||||||
|
width:85%;
|
||||||
|
}
|
||||||
|
|
||||||
.featured-img {
|
.featured-img {
|
||||||
border: 5px purple double;
|
border: 5px purple double;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -255,8 +399,8 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.contact-info-container{
|
.contact-info-container {
|
||||||
padding-top:5%;
|
padding-top: 5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.employee-text {
|
.employee-text {
|
||||||
|
Loading…
Reference in New Issue
Block a user