diff --git a/GrossesMitaines/GrossesMitainesAPI/Controllers/ProductController.cs b/GrossesMitaines/GrossesMitainesAPI/Controllers/ProductController.cs index bcd5a71..101e24d 100644 --- a/GrossesMitaines/GrossesMitainesAPI/Controllers/ProductController.cs +++ b/GrossesMitaines/GrossesMitainesAPI/Controllers/ProductController.cs @@ -58,8 +58,8 @@ public class ProductController : ControllerBase { } [EnableCors("_myAllowSpecificOrigins")] - [HttpPut(Name = "Product")] - public ActionResult Put(Product prod) { + [HttpPatch(Name = "Product")] + public ActionResult Patch(Product prod) { try { _context.Products.Update(prod); _context.SaveChanges(); diff --git a/GrossesMitaines/grosses-mitaines-ui/package-lock.json b/GrossesMitaines/grosses-mitaines-ui/package-lock.json index 5aab806..e5682f0 100644 --- a/GrossesMitaines/grosses-mitaines-ui/package-lock.json +++ b/GrossesMitaines/grosses-mitaines-ui/package-lock.json @@ -8,6 +8,9 @@ "name": "grosses-mitaines-ui", "version": "0.1.0", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.2.0", + "@fortawesome/free-solid-svg-icons": "^6.2.0", + "@fortawesome/react-fontawesome": "^0.2.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -15,10 +18,13 @@ "bootstrap": "^5.2.1", "fa": "^1.0.1", "font-awesome": "^4.7.0", + "fontawesome": "^5.6.3", + "fortawesome": "^0.0.1-security", "react": "^18.2.0", "react-bootstrap": "^2.5.0", "react-devtools": "^4.26.0", "react-dom": "^18.2.0", + "react-fontawesome": "^1.7.1", "react-icons": "^4.6.0", "react-router-dom": "^6.4.1", "react-scripts": "^5.0.1", @@ -2260,6 +2266,51 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz", + "integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz", + "integrity": "sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.2.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.0.tgz", + "integrity": "sha512-UjCILHIQ4I8cN46EiQn0CZL/h8AwCGgR//1c4R96Q5viSRwuKVo0NdQEc4bm+69ZwC0dUvjbDqAHF1RR5FA3XA==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.2.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.10.7", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz", @@ -8715,6 +8766,11 @@ "node": ">=0.10.3" } }, + "node_modules/fontawesome": { + "version": "5.6.3", + "resolved": "https://registry.npmjs.org/fontawesome/-/fontawesome-5.6.3.tgz", + "integrity": "sha512-FCc+CawwsJWWprVEg9X14yI7zI+l9YVAyhzgu70qwGeDn0tLLDH/dVfqgij72g4BBGgLGfK2qnvFGAmYUkhaWg==" + }, "node_modules/fork-ts-checker-webpack-plugin": { "version": "6.5.2", "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz", @@ -8903,6 +8959,11 @@ "node": ">= 6" } }, + "node_modules/fortawesome": { + "version": "0.0.1-security", + "resolved": "https://registry.npmjs.org/fortawesome/-/fortawesome-0.0.1-security.tgz", + "integrity": "sha512-o/pwn9ZSnveFLYP0d5IejSwz0rpGMDQsBaYVvR8WXSvnxILIwh7IUJK0P90QMF4cnIyouVF2BGrz0LEVSyzimA==" + }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -15269,6 +15330,20 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-fontawesome": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/react-fontawesome/-/react-fontawesome-1.7.1.tgz", + "integrity": "sha512-kottReWW1I9Uupub6A5YX4VK7qfpFnEjAcm5zB4Aepst7iofONT27GJYdTcRsj7q5uQu9PXBL7GsxAFKANNUVg==", + "dependencies": { + "prop-types": "^15.5.6" + }, + "engines": { + "node": ">=0.10.0" + }, + "peerDependencies": { + "react": ">=0.12.0" + } + }, "node_modules/react-icons": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz", @@ -20023,6 +20098,35 @@ } } }, + "@fortawesome/fontawesome-common-types": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz", + "integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz", + "integrity": "sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.2.0" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.0.tgz", + "integrity": "sha512-UjCILHIQ4I8cN46EiQn0CZL/h8AwCGgR//1c4R96Q5viSRwuKVo0NdQEc4bm+69ZwC0dUvjbDqAHF1RR5FA3XA==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.2.0" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "requires": { + "prop-types": "^15.8.1" + } + }, "@humanwhocodes/config-array": { "version": "0.10.7", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz", @@ -24780,6 +24884,11 @@ "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==" }, + "fontawesome": { + "version": "5.6.3", + "resolved": "https://registry.npmjs.org/fontawesome/-/fontawesome-5.6.3.tgz", + "integrity": "sha512-FCc+CawwsJWWprVEg9X14yI7zI+l9YVAyhzgu70qwGeDn0tLLDH/dVfqgij72g4BBGgLGfK2qnvFGAmYUkhaWg==" + }, "fork-ts-checker-webpack-plugin": { "version": "6.5.2", "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz", @@ -24907,6 +25016,11 @@ "mime-types": "^2.1.12" } }, + "fortawesome": { + "version": "0.0.1-security", + "resolved": "https://registry.npmjs.org/fortawesome/-/fortawesome-0.0.1-security.tgz", + "integrity": "sha512-o/pwn9ZSnveFLYP0d5IejSwz0rpGMDQsBaYVvR8WXSvnxILIwh7IUJK0P90QMF4cnIyouVF2BGrz0LEVSyzimA==" + }, "forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -29349,6 +29463,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "react-fontawesome": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/react-fontawesome/-/react-fontawesome-1.7.1.tgz", + "integrity": "sha512-kottReWW1I9Uupub6A5YX4VK7qfpFnEjAcm5zB4Aepst7iofONT27GJYdTcRsj7q5uQu9PXBL7GsxAFKANNUVg==", + "requires": { + "prop-types": "^15.5.6" + } + }, "react-icons": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz", diff --git a/GrossesMitaines/grosses-mitaines-ui/package.json b/GrossesMitaines/grosses-mitaines-ui/package.json index f15364d..fb6e146 100644 --- a/GrossesMitaines/grosses-mitaines-ui/package.json +++ b/GrossesMitaines/grosses-mitaines-ui/package.json @@ -3,6 +3,9 @@ "version": "0.1.0", "private": true, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.2.0", + "@fortawesome/free-solid-svg-icons": "^6.2.0", + "@fortawesome/react-fontawesome": "^0.2.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -10,10 +13,13 @@ "bootstrap": "^5.2.1", "fa": "^1.0.1", "font-awesome": "^4.7.0", + "fontawesome": "^5.6.3", + "fortawesome": "^0.0.1-security", "react": "^18.2.0", "react-bootstrap": "^2.5.0", "react-devtools": "^4.26.0", "react-dom": "^18.2.0", + "react-fontawesome": "^1.7.1", "react-icons": "^4.6.0", "react-router-dom": "^6.4.1", "react-scripts": "^5.0.1", diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js index be57fde..fcab8d8 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js @@ -1,5 +1,6 @@ -import { useState } from "react" +import { useState } from "react"; import { Dropdown } from "react-bootstrap"; +import { Button } from "react-bootstrap"; const Ajouter = ({ onCreation }) => { @@ -11,13 +12,13 @@ const Ajouter = ({ onCreation }) => { const [price, setPrice] = useState(""); const [quantity, setQuantity] = useState(""); const [imageName, setImageName] = useState("sqdc.jpg"); - const [statusValue, setStatusValue] = useState(0) + const [status, setStatusValue] = useState(0) const handleSubmit = (e) => { e.preventDefault(); // Empêcher de reloader la page au submit. // Appeler le comportement onCreation - onCreation({ title, description, category, price, quantity, imageName, statusValue }) + onCreation({ title, description, category, price, quantity, imageName, status }) // Reset les états du formulaire. setTitle("") @@ -75,52 +76,57 @@ const Ajouter = ({ onCreation }) => { value={imageName} onChange={(e) => setImageName(e.target.value)} /> - - - {currentStatus} - +
+ + + + {currentStatus} + - - { - setStatus("Disponible"); // Mets le nom afficher quand le dropdown est fermé - setStatusValue(0); - }}> - Disponible {/*Le nom de l'option*/} - - { - setStatus("Indisponible"); - setStatusValue(1); - }}> - Indisponible - - { - setStatus("En Commande"); - setStatusValue(2); - }}> - En Commande - - { - setStatus("Liquidation"); - setStatusValue(3); - }}> - Liquidation - - { - setStatus("Promotion"); - setStatusValue(4); - }}> - Promotion - - { - setStatus("Discontinué"); - setStatusValue(5); - }}> - Discontinué - - - + + { + setStatus("Disponible"); // Mets le nom afficher quand le dropdown est fermé + setStatusValue(0); + }}> + Disponible {/*Le nom de l'option*/} + + { + setStatus("Indisponible"); + setStatusValue(1); + }}> + Indisponible + + { + setStatus("En Commande"); + setStatusValue(2); + }}> + En Commande + + { + setStatus("Liquidation"); + setStatusValue(3); + }}> + Liquidation + + { + setStatus("Promotion"); + setStatusValue(4); + }}> + Promotion + + { + setStatus("Discontinué"); + setStatusValue(5); + }}> + Discontinué + + + +
- + + + ) diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Button.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Button.js deleted file mode 100644 index 73def42..0000000 --- a/GrossesMitaines/grosses-mitaines-ui/src/components/Button.js +++ /dev/null @@ -1,9 +0,0 @@ -const Button = ({text, color, onClick}) => { - return ( - - ) -}; - -export default Button; \ No newline at end of file diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js new file mode 100644 index 0000000..fd15027 --- /dev/null +++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js @@ -0,0 +1,150 @@ +import { useState } from "react" +import { Dropdown } from "react-bootstrap"; +import {Button} from "react-bootstrap"; + +function renderStatus(statusCode) { + if (statusCode !== undefined) { + + switch (statusCode) { + case 0: + return ("Disponible"); + case 1: + return ("En commande"); + case 2: + return ("Indisponible"); + case 3: + return ("Liquidation"); + case 4: + return ("Promotion"); + case 5: + return ("Discontinué"); + default: + return (<>); + } + } + +} + +const Modify = ({ morceau, onModify }) => { + + const [currentStatus, setStatus] = useState(renderStatus(morceau.status)); + + const [title, setTitle] = useState(morceau.title); + const [description, setDescription] = useState(morceau.description); + const [category, setCategory] = useState(morceau.category); + const [price, setPrice] = useState(morceau.price); + const [quantity, setQuantity] = useState(morceau.quantity); + const [imageName, setImageName] = useState(morceau.imageName); + const [status, setStatusValue] = useState(morceau.status) + + const id = morceau.id; + + const handleSubmit = (e) => { + e.preventDefault(); // Empêcher de reloader la page au submit. + + // Appeler le comportement onCreation + onModify({ id, title, description, category, price, quantity, imageName, status }) + } + + + return ( +
+
+

Modifier un morceau

+
+ + setTitle(e.target.value)} /> +
+
+ + setDescription(e.target.value)} /> +
+
+ + setCategory(e.target.value)} /> +
+
+ + setPrice(e.target.value)} /> +
+
+ + setQuantity(e.target.value)} /> +
+
+ + setImageName(e.target.value)} /> +
+
+ + + + {currentStatus} + + + + { + setStatus("Disponible"); // Mets le nom afficher quand le dropdown est fermé + setStatusValue(0); + }}> + Disponible {/*Le nom de l'option*/} + + { + setStatus("Indisponible"); + setStatusValue(1); + }}> + Indisponible + + { + setStatus("En Commande"); + setStatusValue(2); + }}> + En Commande + + { + setStatus("Liquidation"); + setStatusValue(3); + }}> + Liquidation + + { + setStatus("Promotion"); + setStatusValue(4); + }}> + Promotion + + { + setStatus("Discontinué"); + setStatusValue(5); + }}> + Discontinué + + + +
+ + +
+
+ ) +} + +export default Modify \ No newline at end of file diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/SimpleItem.js b/GrossesMitaines/grosses-mitaines-ui/src/components/SimpleItem.js index 807436d..5e849dc 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/components/SimpleItem.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/components/SimpleItem.js @@ -1,5 +1,8 @@ -import { FaTimes } from 'react-icons/fa' -import { FaTools } from 'react-icons/fa' +import { useState } from 'react'; +import { faTools, faTimes } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +import Modify from './Modify'; function renderStatus(statusCode) { if (statusCode !== undefined) { @@ -25,19 +28,29 @@ function renderStatus(statusCode) { } const SimpleItem = ({ item, onDelete, onModify }) => { + + const [isFormvisible, setFormVisibility] = useState(false); + return (
-

- {item.title} -
- onModify(item.id)} /> - +

+ {item.title} + +

+

+ setFormVisibility(!isFormvisible)} /> + onDelete(item.id)} /> -

-

-

Categoie: {item.category}, Prix: {item.price}, Promo: {item.promoPrice}, Quantité: {item.quantity}, Disponibilité: {renderStatus(item.status)}

-

Description: {item.description}

+ +
+ {isFormvisible && } + {!isFormvisible &&
+

Catégorie: {item.category}, Prix: {item.price}, Promo: {item.promoPrice}, Quantité: {item.quantity}, Disponibilité: {renderStatus(item.status)}

+

Description: {item.description}

+
+ } ) } diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/ContactUs.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/ContactUs.js index d758d4d..663a9ea 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/pages/ContactUs.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/ContactUs.js @@ -9,9 +9,9 @@ const ContactUs = () => { }); return ( - <> +
- +
); } diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js index 66f7cb8..92b5ab1 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Inventaire.js @@ -1,6 +1,5 @@ import { useEffect, useState } from "react"; - -import Button from '../components/Button' +import { Button } from 'react-bootstrap'; import SimpleItemList from "../components/SimpleItemList"; import Ajouter from "../components/Ajouter"; @@ -31,6 +30,7 @@ const Inventaire = () => { }) const newMorceau = await response.json(); + console.log(newMorceau); if (response.ok) { setMorceaux([...morceaux, { ...newMorceau }]); @@ -54,8 +54,23 @@ const Inventaire = () => { console.log("Erreur leur du DELETE de " + id); }; - const handleModifyItem = async (id) => { + const handleModifyItem = async (morceau) => { + const response = await fetch(`https://localhost:7292/api/Product`, { + method: 'PATCH', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + body: JSON.stringify(morceau) + }) + + const modifiedMorceau = await response.json(); + + if (response.ok) + setMorceaux([...(morceaux.filter((morceau) => morceau.id !== modifiedMorceau.id)), { ...modifiedMorceau }].sort((a, b) => a.id - b.id)); + else + console.log("Erreur de creation " + morceau); }; return ( @@ -63,10 +78,11 @@ const Inventaire = () => {

Inventaire

+
{isFormvisible && } {morceaux.length > 0 ? diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css index 3b7e18c..57707b3 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css +++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css @@ -15,6 +15,10 @@ html { height: 100%; } +.contactUs { + height: 100vh; +} + .home-text { /* border: black 1px solid; */ text-align: center; @@ -355,20 +359,6 @@ html { text-decoration: none; } -.btn { - display: inline-block; - background: #000; - color: #fff; - border: none; - padding: 10px 20px; - margin: 5px; - border-radius: 5px; - cursor: pointer; - text-decoration: none; - font-size: 15px; - font-family: inherit; -} - .btn-primary { background-color: purple; color: white; @@ -397,8 +387,14 @@ html { width: 85%; } +.status-dropdown { + width: fit-content; + margin-bottom: 20px; + width: 85%; +} + .privacy { - height: 100%; + height: 100vh; } .morceaux { @@ -415,9 +411,10 @@ html { align-items: center; margin: 1.25%; padding: 1.25%; - color:purple; + color: purple; background-color: beige; - border: purple solid 3px;; + border: purple solid 3px; + ; } .inventaire-form-container { @@ -448,17 +445,17 @@ html { .dropdown-gestion, .dropdown-gestion:hover { - margin:0px; - padding:auto; + margin: 0px; + padding: auto; color: grey; background-color: transparent !important; border-color: transparent !important; - padding-left:10%; + padding-left: 10%; } -.dropdown-gestion-container button:hover{ - color:rgb(102, 102, 102) !important; - +.dropdown-gestion-container button:hover { + color: rgb(102, 102, 102) !important; + } .dropdown-gestion-menu { @@ -475,16 +472,16 @@ html { margin-bottom: 15px; } -.sorting-dropdown{ - width:fit-content; - margin:auto; - float:right; +.sorting-dropdown { + width: fit-content; + margin: auto; + float: right; } -.cat-load{ - display:block; - margin:auto; - width:auto; +.cat-load { + display: block; + margin: auto; + width: auto; background-image: url("/public/images/cat-yarn.gif"); background-repeat: no-repeat; background-color: white; @@ -497,17 +494,17 @@ html { .detail-container { display: flex; background-color: plum; - padding:16px; + padding: 16px; } .detail-container-left { - margin:auto; + margin: auto; width: 48%; height: 100%; } .detail-container-right { - margin:auto; + margin: auto; width: 48%; height: 100%; } @@ -517,30 +514,68 @@ html { height: auto; } -.detail-old-price{ +.detail-old-price { text-decoration: line-through; } +.btn-fermer { + background-color: red !important; + color: white !important; +} + +.btn-ajouter-morceau { + background-color: purple !important; + color: white !important; +} + +.form-group { + margin-bottom: 10px; +} + +.simple-item-top-container{ + display:flex; +} + +.simple-item-title{ + text-align: left; + margin: auto; + margin-left: 0px; + max-width: 80%; +} + +.simple-item-buttons{ + width:fit-content; + margin-right: 5px; +} /* -------------------------------------------------------- */ /* specification pour les moyennes écrans /* -------------------------------------------------------- */ @media(max-width:900px) { - .dropdown-gestion, - .dropdown-gestion:hover { - padding-left:0; + .btn-ajouter-morceau { + display: block; + margin: auto; + margin-top: 20px; + height: 50px !important; + width: 90% !important; + font-size: larger; } - .detail-container{ - display:inline-block; + .dropdown-gestion, + .dropdown-gestion:hover { + padding-left: 0; + } + + .detail-container { + display: inline-block; } .detail-container-left { width: 95%; } - + .detail-container-right { width: 95%; } @@ -553,6 +588,18 @@ html { width: 45%; } + + .status-dropdown { + float: none; + width: 100%; + } + + .status-dropdown button { + height: 60px !important; + width: 100% !important; + font-size: larger; + } + .sorting-dropdown { width: 100%;