petits ajustements et début boutton cart
This commit is contained in:
parent
5c789e2cc7
commit
ed04dc8293
@ -0,0 +1,15 @@
|
|||||||
|
import { Button } from "react-bootstrap";
|
||||||
|
import { faCartShopping } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
|
||||||
|
const CartButton = () =>{
|
||||||
|
|
||||||
|
return(
|
||||||
|
<Button id="cart-button">
|
||||||
|
<FontAwesomeIcon icon={faCartShopping}/>
|
||||||
|
<div id="cart-count">3</div>
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CartButton;
|
@ -9,8 +9,8 @@ const ItemList = ({ items }) => {
|
|||||||
{items.length <= 0 && <p>Aucun morceaux à montrer...</p>}
|
{items.length <= 0 && <p>Aucun morceaux à montrer...</p>}
|
||||||
{items.map((item) =>
|
{items.map((item) =>
|
||||||
<Link key={item.id} className='item-link' to={`/morceaux/${item.id}`}>
|
<Link key={item.id} className='item-link' to={`/morceaux/${item.id}`}>
|
||||||
<Item
|
<Item
|
||||||
productId={item.id}
|
productId={item.id}
|
||||||
name={item.title}
|
name={item.title}
|
||||||
price={item.price}
|
price={item.price}
|
||||||
status={item.status}
|
status={item.status}
|
||||||
@ -19,7 +19,7 @@ const ItemList = ({ items }) => {
|
|||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
|
|
||||||
)
|
)
|
||||||
|
@ -6,6 +6,7 @@ import Button from 'react-bootstrap/Button';
|
|||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import Dropdown from "react-bootstrap/Dropdown";
|
import Dropdown from "react-bootstrap/Dropdown";
|
||||||
import { useCookies } from "react-cookie";
|
import { useCookies } from "react-cookie";
|
||||||
|
import CartButton from "./CartButton";
|
||||||
|
|
||||||
const Topbar = () => {
|
const Topbar = () => {
|
||||||
const [cookies, setCookie, removeCookie] = useCookies(['name']);
|
const [cookies, setCookie, removeCookie] = useCookies(['name']);
|
||||||
@ -15,14 +16,14 @@ const Topbar = () => {
|
|||||||
async function reset() {
|
async function reset() {
|
||||||
await setLogin(await cookies.GMGM ?? null);
|
await setLogin(await cookies.GMGM ?? null);
|
||||||
}
|
}
|
||||||
reset();
|
reset();
|
||||||
});
|
});
|
||||||
|
|
||||||
async function logOut() {
|
async function logOut() {
|
||||||
const response = fetch(`https://localhost:7292/api/Logout`, {
|
const response = fetch(`https://localhost:7292/api/Logout`, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
credentials: 'include'
|
credentials: 'include'
|
||||||
})
|
})
|
||||||
await removeCookie("GMGM");
|
await removeCookie("GMGM");
|
||||||
await setLogin(null); // Y U NO WORK?!?
|
await setLogin(null); // Y U NO WORK?!?
|
||||||
}
|
}
|
||||||
@ -52,73 +53,74 @@ const Topbar = () => {
|
|||||||
Vie privée
|
Vie privée
|
||||||
</Link>
|
</Link>
|
||||||
{(user === null || user.LoggedIn === false) &&
|
{(user === null || user.LoggedIn === false) &&
|
||||||
<Link className="nav-link" to="/login" >
|
<Link className="nav-link" to="/login" >
|
||||||
Connexion
|
Connexion
|
||||||
</Link>
|
</Link>
|
||||||
}
|
}
|
||||||
{(user === null || user.LoggedIn === false) &&
|
{(user === null || user.LoggedIn === false) &&
|
||||||
<Link className="nav-link" to="/register">
|
<Link className="nav-link" to="/register">
|
||||||
S'inscrire
|
S'inscrire
|
||||||
</Link>
|
</Link>
|
||||||
}
|
}
|
||||||
{user !== null && user.LoggedIn &&
|
{user !== null && user.LoggedIn &&
|
||||||
<Dropdown className="dropdown-gestion-container">
|
<Dropdown className="dropdown-gestion-container">
|
||||||
<Dropdown.Toggle className="dropdown-gestion" >
|
<Dropdown.Toggle className="dropdown-gestion" >
|
||||||
Bonjour, {user.firstName} {user.lastName}!
|
Bonjour, {user.firstName} {user.lastName}!
|
||||||
</Dropdown.Toggle>
|
</Dropdown.Toggle>
|
||||||
<Dropdown.Menu className="dropdown-gestion-menu">
|
<Dropdown.Menu className="dropdown-gestion-menu">
|
||||||
<Dropdown.Item>
|
<Dropdown.Item>
|
||||||
<Link className="nav-link" to="/myaccount" >
|
<Link className="nav-link" to="/myaccount" >
|
||||||
Mon Compte
|
Mon Compte
|
||||||
</Link>
|
</Link>
|
||||||
</Dropdown.Item>
|
</Dropdown.Item>
|
||||||
<Dropdown.Item>
|
<Dropdown.Item>
|
||||||
<Link className="nav-link" to="/myaddresses" >
|
<Link className="nav-link" to="/myaddresses" >
|
||||||
Mes Addresses
|
Mes Addresses
|
||||||
</Link>
|
</Link>
|
||||||
</Dropdown.Item>
|
</Dropdown.Item>
|
||||||
<Dropdown.Item>
|
<Dropdown.Item>
|
||||||
<Link className="nav-link" to="/myinvoices" >
|
<Link className="nav-link" to="/myinvoices" >
|
||||||
Mes Commandes
|
Mes Commandes
|
||||||
</Link>
|
</Link>
|
||||||
</Dropdown.Item>
|
</Dropdown.Item>
|
||||||
<Dropdown.Item>
|
<Dropdown.Item>
|
||||||
<Button className="nav-link" onClick={() => logOut()}>
|
<Button className="nav-link" onClick={() => logOut()}>
|
||||||
Déconnexion
|
Déconnexion
|
||||||
</Button>
|
</Button>
|
||||||
</Dropdown.Item>
|
</Dropdown.Item>
|
||||||
{user.role === "Administrateur" &&
|
{user.role === "Administrateur" &&
|
||||||
<Container>
|
<Container>
|
||||||
<Dropdown.Divider/>
|
<Dropdown.Divider />
|
||||||
<Dropdown.ItemText>
|
<Dropdown.ItemText>
|
||||||
Gestion
|
Gestion
|
||||||
</Dropdown.ItemText>
|
</Dropdown.ItemText>
|
||||||
<Dropdown.Item>
|
<Dropdown.Item>
|
||||||
<Link className="nav-link" to="/inventaire" >
|
<Link className="nav-link" to="/inventaire" >
|
||||||
Inventaire
|
Inventaire
|
||||||
</Link>
|
</Link>
|
||||||
</Dropdown.Item>
|
</Dropdown.Item>
|
||||||
<Dropdown.Item>
|
<Dropdown.Item>
|
||||||
<Link className="nav-link" to="/invoices" >
|
<Link className="nav-link" to="/invoices" >
|
||||||
Commandes
|
Commandes
|
||||||
</Link>
|
</Link>
|
||||||
</Dropdown.Item>
|
</Dropdown.Item>
|
||||||
<Dropdown.Item>
|
<Dropdown.Item>
|
||||||
<Link className="nav-link" to="/clients" >
|
<Link className="nav-link" to="/clients" >
|
||||||
Clients
|
Clients
|
||||||
</Link>
|
</Link>
|
||||||
</Dropdown.Item>
|
</Dropdown.Item>
|
||||||
<Dropdown.Item>
|
<Dropdown.Item>
|
||||||
<Link className="nav-link" to="/addresses" >
|
<Link className="nav-link" to="/addresses" >
|
||||||
Adresses
|
Adresses
|
||||||
</Link>
|
</Link>
|
||||||
</Dropdown.Item>
|
</Dropdown.Item>
|
||||||
</Container>
|
</Container>
|
||||||
}
|
}
|
||||||
</Dropdown.Menu>
|
</Dropdown.Menu>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
}
|
}
|
||||||
</Nav>
|
</Nav>
|
||||||
|
<CartButton />
|
||||||
</Navbar.Collapse>
|
</Navbar.Collapse>
|
||||||
</Container>
|
</Container>
|
||||||
</Navbar>
|
</Navbar>
|
||||||
|
@ -17,7 +17,7 @@ html {
|
|||||||
|
|
||||||
a {
|
a {
|
||||||
color: white;
|
color: white;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Contact {
|
.Contact {
|
||||||
@ -243,14 +243,13 @@ a {
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
background-color: rgba(245, 245, 220, 0.75);
|
background-color: rgba(245, 245, 220, 0.75);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 300px;
|
height: 375px;
|
||||||
width: 30%;
|
width: 30%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-img {
|
.item-img {
|
||||||
/* box-shadow: 2px 5px rgba(0, 0, 0, 0.608); */
|
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
margin-top: 5px;
|
margin-top: 15px;
|
||||||
display: block;
|
display: block;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
@ -485,28 +484,28 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* width */
|
/* width */
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 10px;
|
width: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Track */
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: beige;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Handle */
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: plum;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Handle on hover */
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: purple;
|
|
||||||
}
|
|
||||||
|
|
||||||
.morceaux-container{
|
/* Track */
|
||||||
padding-top:10px;
|
::-webkit-scrollbar-track {
|
||||||
|
background: beige;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle */
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: plum;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle on hover */
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
.morceaux-container {
|
||||||
|
padding-top: 10px;
|
||||||
height: 620px;
|
height: 620px;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
border: purple 2px solid;
|
border: purple 2px solid;
|
||||||
@ -514,24 +513,24 @@ a {
|
|||||||
background-color: rgba(245, 245, 220, 0.25);
|
background-color: rgba(245, 245, 220, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-btn-container{
|
.filters-btn-container {
|
||||||
width:100%;
|
width: 100%;
|
||||||
display:flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-btn{
|
.filters-btn {
|
||||||
margin:auto;
|
margin: auto;
|
||||||
width:90% !important;
|
width: 90% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-dropdown button{
|
.filters-dropdown button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-menu{
|
.filters-menu {
|
||||||
width:fit-content;
|
width: fit-content;
|
||||||
display:flex;
|
display: flex;
|
||||||
margin:5px 15px 10px 15px;
|
margin: 5px 15px 10px 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-container {
|
.filters-container {
|
||||||
@ -539,32 +538,32 @@ a {
|
|||||||
margin-left: 25px;
|
margin-left: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-price-container{
|
.filters-price-container {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
padding:0px 10px 0px 10px;
|
padding: 0px 10px 0px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-state-container{
|
.filters-state-container {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
padding:0px 10px 0px 10px;
|
padding: 0px 10px 0px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-info{
|
.filters-info {
|
||||||
width:fit-content;
|
width: fit-content;
|
||||||
height:fit-content;
|
height: fit-content;
|
||||||
background-color: beige;
|
background-color: beige;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
padding: 5px 10px 5px 10px;
|
padding: 5px 10px 5px 10px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-preview-container{
|
.img-preview-container {
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
display:flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-preview{
|
.img-preview {
|
||||||
margin:auto;
|
margin: auto;
|
||||||
max-width: 90%;
|
max-width: 90%;
|
||||||
max-height: 200px;
|
max-height: 200px;
|
||||||
}
|
}
|
||||||
@ -572,7 +571,7 @@ a {
|
|||||||
.sorting-container {
|
.sorting-container {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
margin:auto;
|
margin: auto;
|
||||||
margin-right: 25px;
|
margin-right: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -656,6 +655,17 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#cart-button {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
color: purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cart-count {
|
||||||
|
color:green;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* -------------------------------------------------------- */
|
/* -------------------------------------------------------- */
|
||||||
/* specification pour les moyennes écrans
|
/* specification pour les moyennes écrans
|
||||||
/* -------------------------------------------------------- */
|
/* -------------------------------------------------------- */
|
||||||
@ -720,7 +730,7 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sorting-container {
|
.sorting-container {
|
||||||
margin:auto;
|
margin: auto;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
@ -736,43 +746,43 @@ a {
|
|||||||
border: 2px white solid;
|
border: 2px white solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-dropdown button{
|
.filters-dropdown button {
|
||||||
height:60px;
|
height: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-container{
|
.filters-container {
|
||||||
width:90%;
|
width: 90%;
|
||||||
margin:auto;
|
margin: auto;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
background-color: rgba(0, 0, 0, 0.25);
|
background-color: rgba(0, 0, 0, 0.25);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding-bottom: 16px;
|
padding-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-info{
|
.filters-info {
|
||||||
margin:auto;
|
margin: auto;
|
||||||
margin-top:16px;
|
margin-top: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-menu{
|
.filters-menu {
|
||||||
padding:0px;
|
padding: 0px;
|
||||||
margin:10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-menu .form-check-label{
|
.filters-menu .form-check-label {
|
||||||
margin-left:5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-menu .form-check{
|
.filters-menu .form-check {
|
||||||
margin-bottom:20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-menu input[type='radio']{
|
.filters-menu input[type='radio'] {
|
||||||
transform: scale(2);
|
transform: scale(2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.morceaux-options-container{
|
.morceaux-options-container {
|
||||||
display:block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -783,7 +793,7 @@ a {
|
|||||||
|
|
||||||
@media (max-width:450px) {
|
@media (max-width:450px) {
|
||||||
|
|
||||||
.morceaux-container{
|
.morceaux-container {
|
||||||
height: 450px;
|
height: 450px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user