From ed04dc8293894e164b017e3080b5d7600b9e27d6 Mon Sep 17 00:00:00 2001
From: Victor Turgeon <76506447+Medenos@users.noreply.github.com>
Date: Sun, 6 Nov 2022 14:49:53 -0500
Subject: [PATCH] =?UTF-8?q?petits=20ajustements=20et=20d=C3=A9but=20boutto?=
=?UTF-8?q?n=20cart?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/components/CartButton.js | 15 ++
.../src/components/ItemList.js | 6 +-
.../src/components/Topbar.js | 128 ++++++++--------
.../src/stylesheets/site.css | 144 ++++++++++--------
4 files changed, 160 insertions(+), 133 deletions(-)
create mode 100644 GrossesMitaines/grosses-mitaines-ui/src/components/CartButton.js
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/CartButton.js b/GrossesMitaines/grosses-mitaines-ui/src/components/CartButton.js
new file mode 100644
index 0000000..13ad008
--- /dev/null
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/CartButton.js
@@ -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(
+
+ )
+}
+
+export default CartButton;
\ No newline at end of file
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js b/GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js
index 7e6167e..1eadd19 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js
@@ -9,8 +9,8 @@ const ItemList = ({ items }) => {
{items.length <= 0 && Aucun morceaux à montrer...
}
{items.map((item) =>
- - {
)}
-
+
)
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
index aa4c67a..40d3cef 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
@@ -6,6 +6,7 @@ import Button from 'react-bootstrap/Button';
import { Link } from "react-router-dom";
import Dropdown from "react-bootstrap/Dropdown";
import { useCookies } from "react-cookie";
+import CartButton from "./CartButton";
const Topbar = () => {
const [cookies, setCookie, removeCookie] = useCookies(['name']);
@@ -15,14 +16,14 @@ const Topbar = () => {
async function reset() {
await setLogin(await cookies.GMGM ?? null);
}
- reset();
+ reset();
});
async function logOut() {
const response = fetch(`https://localhost:7292/api/Logout`, {
method: 'POST',
credentials: 'include'
- })
+ })
await removeCookie("GMGM");
await setLogin(null); // Y U NO WORK?!?
}
@@ -52,73 +53,74 @@ const Topbar = () => {
Vie privée
{(user === null || user.LoggedIn === false) &&
-
- Connexion
-
+
+ Connexion
+
}
{(user === null || user.LoggedIn === false) &&
-
- S'inscrire
-
+
+ S'inscrire
+
}
{user !== null && user.LoggedIn &&
-
-
- Bonjour, {user.firstName} {user.lastName}!
-
-
-
-
- Mon Compte
-
-
-
-
- Mes Addresses
-
-
-
-
- Mes Commandes
-
-
-
-
-
- {user.role === "Administrateur" &&
-
-
-
- Gestion
-
-
-
- Inventaire
-
-
-
-
- Commandes
-
-
-
-
- Clients
-
-
-
-
- Adresses
-
-
-
- }
-
-
+
+
+ Bonjour, {user.firstName} {user.lastName}!
+
+
+
+
+ Mon Compte
+
+
+
+
+ Mes Addresses
+
+
+
+
+ Mes Commandes
+
+
+
+
+
+ {user.role === "Administrateur" &&
+
+
+
+ Gestion
+
+
+
+ Inventaire
+
+
+
+
+ Commandes
+
+
+
+
+ Clients
+
+
+
+
+ Adresses
+
+
+
+ }
+
+
}
+
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
index df6696e..1933ebc 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
@@ -17,7 +17,7 @@ html {
a {
color: white;
- text-decoration: none;
+ text-decoration: none;
}
.Contact {
@@ -243,14 +243,13 @@ a {
margin-bottom: 10px;
background-color: rgba(245, 245, 220, 0.75);
display: inline-block;
- height: 300px;
+ height: 375px;
width: 30%;
}
.item-img {
- /* box-shadow: 2px 5px rgba(0, 0, 0, 0.608); */
border-radius: 2px;
- margin-top: 5px;
+ margin-top: 15px;
display: block;
margin-right: auto;
margin-left: auto;
@@ -485,28 +484,28 @@ a {
}
- /* width */
- ::-webkit-scrollbar {
+/* width */
+::-webkit-scrollbar {
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{
- padding-top:10px;
+/* Track */
+::-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;
overflow-y: scroll;
border: purple 2px solid;
@@ -514,24 +513,24 @@ a {
background-color: rgba(245, 245, 220, 0.25);
}
-.filters-btn-container{
- width:100%;
- display:flex;
+.filters-btn-container {
+ width: 100%;
+ display: flex;
}
-.filters-btn{
- margin:auto;
- width:90% !important;
+.filters-btn {
+ margin: auto;
+ width: 90% !important;
}
-.filters-dropdown button{
+.filters-dropdown button {
width: 100%;
}
-.filters-menu{
- width:fit-content;
- display:flex;
- margin:5px 15px 10px 15px;
+.filters-menu {
+ width: fit-content;
+ display: flex;
+ margin: 5px 15px 10px 15px;
}
.filters-container {
@@ -539,32 +538,32 @@ a {
margin-left: 25px;
}
-.filters-price-container{
+.filters-price-container {
white-space: nowrap;
- padding:0px 10px 0px 10px;
+ padding: 0px 10px 0px 10px;
}
-.filters-state-container{
+.filters-state-container {
white-space: nowrap;
- padding:0px 10px 0px 10px;
+ padding: 0px 10px 0px 10px;
}
-.filters-info{
- width:fit-content;
- height:fit-content;
+.filters-info {
+ width: fit-content;
+ height: fit-content;
background-color: beige;
margin-top: 5px;
padding: 5px 10px 5px 10px;
border-radius: 5px;
}
-.img-preview-container{
+.img-preview-container {
margin-top: 15px;
- display:flex;
+ display: flex;
}
-.img-preview{
- margin:auto;
+.img-preview {
+ margin: auto;
max-width: 90%;
max-height: 200px;
}
@@ -572,7 +571,7 @@ a {
.sorting-container {
width: 20%;
height: fit-content;
- margin:auto;
+ margin: auto;
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
/* -------------------------------------------------------- */
@@ -720,7 +730,7 @@ a {
}
.sorting-container {
- margin:auto;
+ margin: auto;
width: 90%;
float: none;
}
@@ -736,43 +746,43 @@ a {
border: 2px white solid;
}
- .filters-dropdown button{
- height:60px;
+ .filters-dropdown button {
+ height: 60px;
}
- .filters-container{
- width:90%;
- margin:auto;
+ .filters-container {
+ width: 90%;
+ margin: auto;
margin-bottom: 16px;
background-color: rgba(0, 0, 0, 0.25);
border-radius: 10px;
padding-bottom: 16px;
}
- .filters-info{
- margin:auto;
- margin-top:16px;
+ .filters-info {
+ margin: auto;
+ margin-top: 16px;
}
- .filters-menu{
- padding:0px;
- margin:10px;
+ .filters-menu {
+ padding: 0px;
+ margin: 10px;
}
- .filters-menu .form-check-label{
- margin-left:5px;
+ .filters-menu .form-check-label {
+ margin-left: 5px;
}
- .filters-menu .form-check{
- margin-bottom:20px;
+ .filters-menu .form-check {
+ margin-bottom: 20px;
}
- .filters-menu input[type='radio']{
+ .filters-menu input[type='radio'] {
transform: scale(2);
}
- .morceaux-options-container{
- display:block;
+ .morceaux-options-container {
+ display: block;
}
}
@@ -783,7 +793,7 @@ a {
@media (max-width:450px) {
- .morceaux-container{
+ .morceaux-container {
height: 450px;
}