style refactor for wf logs

pradip-allwyn · Mar 30, 2024 · c1aa4c0 · c1aa4c0
1 parent c020f37
commit c1aa4c0
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 42 deletions.
diff --git a/htdocs/css/style.css b/htdocs/css/style.css
@@ -708,6 +708,7 @@ td.table_label {
 
 		.CodeMirror {
 			border: 1px solid lightgray;
+			text-align: left;
 			font-family: consolas, monaco, "Andale Mono", monospace;
 			font-style: normal;
 			font-weight: 400;
@@ -749,4 +750,26 @@ td.table_label {
 
 		span.red2 {
 			background-color: #ac394d;
-		}
+		}
+
+		/* WF job details grid*/
+
+		.wflog.grid-container {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 10px;
+            padding: 20px;
+        }
+
+        .wflog.grid-item {
+            border: 1px solid #ccc;
+            padding: 10px;
+			word-wrap: break-word;
+			overflow: hidden;
+			white-space: normal;
+        }
+
+        .wflog.grid-title {   
+			/* font-weight: bold;        */
+			font-size: 1.6em;
+        }
diff --git a/htdocs/js/pages/JobDetails.class.js b/htdocs/js/pages/JobDetails.class.js
@@ -383,45 +383,7 @@ Class.subclass(Page.Base, "Page.JobDetails", {
 
 		// log grid
 
-		html += `
-		<style>
-
-		.grid-container {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 10px;
-            padding: 20px;
-        }
-
-        .grid-item {
-            border: 1px solid #ccc;
-            padding: 10px;
-			word-wrap: break-word;
-			overflow: hidden;
-			white-space: normal;
-        }
-
-        .grid-title {   
-			/* font-weight: bold;        */
-			font-size: 1.6em;
-        }
-		</style>
-		<script>
-        // Get all grid items
-        function addNewItem(id, text) {
-
-            const newItem = document.createElement('div');
-            newItem.className = 'grid-item'; // Apply any necessary classes
-            newItem.innerHTML = '<div class="grid-title">text1</div><pre>' + text + '</pre>';
-            const gridContainer = document.getElementById('log_grid');
-            gridContainer.appendChild(newItem);
-
-        }
-
-    </script>
-		<div id="log_grid" class="grid-container"></div>
-		
-		`
+		html += `<div id="log_grid" class="wflog grid-container"></div>`
 
 		// job log (IFRAME)
 		html += '<div class="subtitle" style="margin-top:15px;">';
@@ -732,8 +694,8 @@ Class.subclass(Page.Base, "Page.JobDetails", {
 			data = new AnsiUp().ansi_to_html(resp.split("\n").slice(-1*size - 4, -4).join("\n"))
 			const newItem = document.createElement('div');
 			newItem.setAttribute('id', 'log_' + id)
-            newItem.className = 'grid-item'; // Apply any necessary classes
-            newItem.innerHTML = `<div class="grid-title">${title}<i class="fa fa-window-close" style="float:right; cursor: pointer" onclick="$P().unsetLogIcon('${id}');this.parentNode.parentNode.remove()"></i></div> <pre>${data}</pre>`;
+            newItem.className = 'wflog grid-item'; // Apply any necessary classes
+            newItem.innerHTML = `<div class="wflog grid-title">${title}<i class="fa fa-window-close" style="float:right; cursor: pointer" onclick="$P().unsetLogIcon('${id}');this.parentNode.parentNode.remove()"></i></div> <pre>${data}</pre>`;
             const gridContainer = document.getElementById('log_grid');
             gridContainer.appendChild(newItem);