finitions pour components item
This commit is contained in:
Medenos
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 (
|
||||
<div className="row item">
|
||||
<div className="col-md-2">
|
||||
<img src={imageUrl} alt={name} height="150" />
|
||||
<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 (
|
||||
|
||||
<Card className="item">
|
||||
<Card.Img className="item-img" variant="top" src={imageUrl} />
|
||||
<Card.Body className="item-info">
|
||||
<div className="item-name-container">
|
||||
<Card.Title className="item-name">
|
||||
{name}
|
||||
</Card.Title>
|
||||
</div>
|
||||
<div className="col-md-8 item-detail">
|
||||
<h4>{name}</h4>
|
||||
<div dangerouslySetInnerHTML={{ __html: status }}></div>
|
||||
</div>
|
||||
<div className="col-md-2 item-price">
|
||||
{price}
|
||||
<div className="item-status-container">
|
||||
{renderStatus(status)}
|
||||
</div>
|
||||
<div>
|
||||
{renderPrice(price, newPrice)}
|
||||
</div>
|
||||
|
||||
</Card.Body>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -3,12 +3,13 @@ import Item from './Item';
|
||||
const ItemList = ({ items }) => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='item-list'>
|
||||
{items.map((item) =>
|
||||
<Item imageUrl={item.imageUrl}
|
||||
name={item.name}
|
||||
price={item.price}
|
||||
status={item.status}
|
||||
newPrice={item.newPrice}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -3,24 +3,65 @@ import ItemList from "../components/ItemList";
|
||||
|
||||
const Morceaux = () => {
|
||||
|
||||
|
||||
// public enum States {
|
||||
// Available,
|
||||
// BackOrder,
|
||||
// Unavailable,
|
||||
// Clearance,
|
||||
// Promotion,
|
||||
// Discontinued
|
||||
// }
|
||||
|
||||
const products = [
|
||||
{
|
||||
"name": "Ceinture flèchée",
|
||||
"status": "Disponible!",
|
||||
"price": "85,86",
|
||||
"status": 0,
|
||||
"price": 85.86,
|
||||
"newPrice": -1,
|
||||
"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",
|
||||
"status": "Non disponible...",
|
||||
"price": "15,64",
|
||||
"status": 5,
|
||||
"price": 15.64,
|
||||
"newPrice": -1,
|
||||
"imageUrl": "/images/pantouflesCH.jpg"
|
||||
},
|
||||
{
|
||||
"name": "Jean-Luc Mongrain",
|
||||
"status": "Disponible!",
|
||||
"price": "1453,12",
|
||||
"status": 1,
|
||||
"price": 1453.12,
|
||||
"newPrice": -1,
|
||||
"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 (
|
||||
<div className="morceaux-container">
|
||||
<h3>QWERTY</h3>
|
||||
<ItemList items={products} />
|
||||
</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 {
|
||||
border: 5px purple double;
|
||||
border-radius: 5px;
|
||||
padding: 1rem 0;
|
||||
margin: 1rem 0;
|
||||
|
||||
border:purple double 3px;
|
||||
margin-left: 1.25%;
|
||||
margin-right: 1.25%;
|
||||
margin-bottom: 10px;
|
||||
background-color: rgba(245, 245, 220, 0.75);
|
||||
display: inline-block;
|
||||
height:300px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.item-detail {
|
||||
padding: 0 2rem;
|
||||
.item-img {
|
||||
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-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) {
|
||||
|
||||
.item{
|
||||
width:85%;
|
||||
}
|
||||
|
||||
.featured-img {
|
||||
border: 5px purple double;
|
||||
width: 100%;
|
||||
@ -255,8 +399,8 @@ html {
|
||||
}
|
||||
|
||||
|
||||
.contact-info-container{
|
||||
padding-top:5%;
|
||||
.contact-info-container {
|
||||
padding-top: 5%;
|
||||
}
|
||||
|
||||
.employee-text {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user