Contrat à l'intérieur de l'écran (Vinayak le dieu du CSS)

css/contracts.css

@@ -5,9 +5,35 @@
 }
 .contracts
 {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  height: 50%;
+  width: 50%;
+  overflow-y: scroll;
+}
+
+.contract-screen
+{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+
+
+.screen-img {
+  z-index: -1;
   position: absolute;
-  top: 25%;
-  left: 30%;
+  top: 10%;
+  height: 80%;
+  bottom: 1%;
+  right: 20%;
+  left: 20%;
+  width: 60%;
 }
 .card-body{
   margin-left: 50px;

css/global.css

@@ -36,14 +36,11 @@ select {
     color: var(--text-color);
 }
 
-#block-content{
+.block-content{
     margin: 0;
     padding: 0;
     width: 100%;
     height: 100vh;
-    background-repeat: no-repeat;
-    background-size: cover;
-    overflow: hidden;
 }
 
 .modal-disable::backdrop {

html/template.html

@@ -7,5 +7,5 @@
 <div id="links" class="languettes">
 
 </div>
-<div id="block-content">
+<div class="block-content">
 </div>

html/templates/contracts/contracts.html

@@ -1,2 +1,5 @@
-<div class="contracts">
+<div class="contract-screen">
+    <img class="screen-img" src="/assets/contracts/screen.png">
+    <div class="contracts">
+    </div>
 </div>

js/controllers/contracts.js

@@ -10,7 +10,6 @@ export default function contracts(temp_engine) {
   let modal = new Modal("contract-modal", temp_engine);
 
   temp_engine.after_render((temp_engine) => {
-    $("#block-content").css("background-image", "url('/assets/contracts/screen.png')");
     modal.load("templates/contracts/contracts_modal.html");
 
     Contract.list(10, 1, (contracts) => {