Interface des contracts

css/global.css

@@ -8,40 +8,67 @@ html {
 }
 
 
-button {
+.btn-infos {
   margin: 2px;
   /* color: black; */
-  background-color: white;
+  background-color: royalblue;
-  border: 2px solid white;
+  border: 2px solid royalblue;
   border-radius: 10px;
 }
 
-button:hover {
+.btn-infos:hover {
-  border-color: #eab308;
+  border-color: rgb(45, 73, 156);
-  background-color: #eab308;
+  background-color: rgb(45, 73, 156);
-  transition: all 1s;
 }
 
-main {
+.btn-accept {
-  /* display: flex;
+  margin: 2px;
-  justify-content: space-between; */
+  /* color: black; */
-  display: grid;
+  background-color: royalblue;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+  border: 2px solid royalblue;
-  padding-left: 30px;
+  border-radius: 10px;
 }
 
-/* Modal */
+.btn-accept:hover {
-
+  border-color: rgb(45, 73, 156);
-.status-onhold{
+  background-color: rgb(45, 73, 156);
-  color: orange;
 }
 
-.status-accepted{
+.contract-screen {
-  color: greenyellow;
+  display: flex;
+  justify-content: center;
+  background-image: url("/assets/contracts/contractscreen.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  height: 100vh;
+
 }
 
+.card-body {
+  margin-left: 200px;
+  margin-top: -160px;
+  width: 400px;
+}
 
+.card-body button {
+  margin-top: 15px;
+  margin-left: -10px;
+  width: 250px;
+}
 
+.contracts {
+  margin-left: 240px;
+  margin-top: 250px;
+  height: 100vh;
+  width: 100vh;
+}
 
+/* Modal */
 
+.status-onhold {
+  color: orange;
+}
 
+.status-accepted {
+  color: greenyellow;
+}

html/templates/contracts/contracts.html

@@ -1,2 +1,4 @@
 <link rel="stylesheet" href="css/global.css">
+<div class="contract-screen">
     <div class="contracts"></div>
+</div>

js/controllers/contracts.js

@@ -11,9 +11,11 @@ import { Modal } from "../skama_code/ui/modal.js";
 
 export default (temp_engine) => {
 
+
   let modal = new Modal("contract-modal", temp_engine);
 
   temp_engine.after_render((temp_engine) => {
+
     modal.load("templates/contracts/contracts_modal.html");
 
     Contract.list(10, 1, (contracts) => {
@@ -57,6 +59,8 @@ export default (temp_engine) => {
         let status
         let card
 
+
+
         if (contract.type = "PROCUREMENT") {
           img = "/assets/contracts/procurement.png"
         }
@@ -71,13 +75,17 @@ export default (temp_engine) => {
           status = "accepted"
           card =
             `                            
-                    <div class="card spacer" style="width: 20rem;">
+                    <div class="card" style="width: 20rem;">
                       <img src="${img}" class="card-img-top" alt="">
                       <div class="card-body">
                         <h5 style="color:white" class="card-title">${contract.faction}</h5>
                         <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
                         <p class="card-text status-accepted">Status : ${status}</p>
-                          <button data-id="${contract.id}" class="btn-infos" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>                      
+                        <button data-id="${contract.id}" type="button" class="btn btn-primary btn-infos" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>                      
                       </div>
                     </div>
             `
@@ -87,11 +95,14 @@ export default (temp_engine) => {
           status = "on hold"
           card =
             `                            
-                    <div class="card spacer" style="width: 20rem;">
+                    <div class="card" style="width: 20rem;">
                       <img src="${img}" class="card-img-top" alt="">
                       <div class="card-body">
                         <h5 style="color:white" class="card-title">${contract.faction}</h5>
                         <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
                         <p class="card-text status-onhold">Status : ${status}</p>
                         <p style="color:white" class="card-text revenu">Revenu : ${contract.paymentAccepted} $</p>
                         <button type="button" class="btn btn-primary btn-infos" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>
@@ -102,6 +113,7 @@ export default (temp_engine) => {
         }
 
         $('.contracts').append(card);
+        console.log(contract)
 
       });