crud with conditions

static/css/styles.css

@@ -38,10 +38,32 @@ td {
     text-align: left;
 }
 
+td div {
+    max-width: 6ch;
+    white-space: nowrap;
+    overflow: hidden;
+    display: block;
+}
+
+thead td:first-child {
+    border: none;
+}
+
+th.nodata {
+    text-align: center;
+}
+
 tfoot td {
     border: none;
 }
 
+tbody td:first-child {
+    max-width: 1ch;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 button {
     background-color: #4CAF50;
     color: white;
@@ -67,13 +89,20 @@ fieldset {
 /* Dialog box */
 dialog {
     width: 400px;
-    height: 420px;
     padding: 20px;
     border: 1px solid #ccc;
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     overflow: hidden;
 }
+
+dialog.create {
+    height: 320px;
+}
+
+dialog.update {
+    height: 500px;
+}
   
   /* Labels */
 label {
@@ -84,7 +113,7 @@ label {
 }
   
 /* Text inputs */
-input, form div {
+input, select, form div {
     padding: 8px;
     margin-bottom: 10px;
     border: 1px solid #ccc;
@@ -93,7 +122,7 @@ input, form div {
     font-size: 16;
 }
 
-input {
+input, select {
     width: 100%;
 }
 

static/js/main.js

@@ -13,7 +13,14 @@ function documentReady() {
             openDialog.close();
             window.location.reload();
         } else {
-            document.querySelector("dialog").showModal()
+            const dialog = document.querySelector("dialog")
+            if (iframe.contentWindow.location.href.split("/").pop() === "create") {
+                dialog.className = 'create';
+            } else {
+                dialog.className = 'update';
+            }
+            dialog.showModal()
+
         }
     }
 }