Improved order view - added checkmark

assets/css/detail.css

@@ -107,7 +107,7 @@ h2{
     display: none; /* Hidden by default */
     position: fixed; /* Stay in place */
     z-index: 1; /* Sit on top */
-    padding-top: 20%; /* Location of the box */
+    padding-top: 35%; /* Location of the box */
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */
@@ -121,17 +121,27 @@ h2{
     background-color: #fefefe;
     /* margin-top: 200px; */
     margin: 0 auto auto auto; 
-    padding: 20px;
+    padding: 30px 20px;
     border: 1px solid #888;
     width: 30%;
 }
 
+.modal-content > b{
+    margin-left:40px;
+}
+
+#order-id{
+    margin-left:40px;
+}
+
 /* The Close Button */
 .close {
-    color: #aaaaaa;
+    color: #999999;
     float: right;
-    font-size: 28px;
+    font-size: 18px;
     font-weight: bold;
+    margin-top : -23px;
+    margin-right : -10px;
 }
 
 .close:hover,

assets/js/detail.js

@@ -23,12 +23,28 @@ function order(){
     });
 }
 
+var checked = false;
+
 function showModal(data){
 
     let orderid = document.getElementById("order-id");
     orderid.innerHTML = 'Nomor Transaksi : ' + data['data'];
-    console.log(data['data']);
-
+    orderid.style.display = "inline";
+    if(!checked){
+        let modalcontent = document.getElementsByClassName("modal-content")[0];
+        let close = document.getElementsByClassName("close")[0];
+        let img = document.createElement("img");
+        img.setAttribute("src", "/book/assets/image/checkmark.png");
+        img.setAttribute("width", "35px");
+        img.setAttribute("height", "30px");
+        img.style.display = "inline-block";
+        img.style.position = "absolute";
+        img.style.marginTop = 0;
+        img.style.marginRight = "10px";
+        modalcontent.insertBefore(img, close);
+        checked = true;
+    }
+    
     // Get the modal
     var modal = document.getElementById('modal');
     modal.style.display = "block";