Changed output blocks so that they wrap in logger HTML

sandialabs · Mar 6, 2021 · fd54ec7 · fd54ec7
1 parent bd12152
commit fd54ec7
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 61 deletions.
diff --git a/logger/resources/output_style.css b/logger/resources/output_style.css
@@ -1,41 +1,25 @@
 div.output-block-card {
     margin-top: 6pt;
 }
-table.output {
+code.output {
+    display: grid;
+    grid-template-columns: auto 1fr;
+}
+code.output pre {
+    line-height: 1.2;
+    font-size: 100%;
+    white-space: pre-wrap;
     width: 100%;
+    margin: 0;
 }
-table.output tr {
-    line-height: 1;
-    table-layout: fixed;
-    width: auto;
-}
-table.output tr[line-number] {
-    text-align: left;
-    clear: left;
-}
-table.output tr[line-number] td {
-    padding: 0;
-    border: 0;
-}
-table.output tr[line-number] td code {
-    white-space: pre;
-}
-table.output code {
-    vertical-align: top;
-}
-table.output td {
-    width: 100%;
-}
-table.output tr[line-number]::before {
+code.output div[line-number]::before {
+    line-height: 1.2;
+    font-size: 100%;
     font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
-    font-size: 87.5%;
     opacity: 0.5;
-    padding-bottom: 2px;
     white-space: pre;
     content: attr(line-number) ". ";
     display: inline-block;
-    float: right;
-    margin-left: auto;
-    text-align: right;
+    float: left;
 }
 
diff --git a/logger/resources/search_output.js b/logger/resources/search_output.js
@@ -2,7 +2,7 @@ function outputSearch(caller)
 {
     // The parameter caller may be wither the search bar or the checkbox for
     // "show duplicates"
-    var input, filter, table, tr, td, i, txtValue, lastTxtValue, checkbox, showDuplicates;
+    var input, filter, code, pre, i, txtValue, lastTxtValue, checkbox, showDuplicates;
     for (i = 0; i < caller.parentNode.childNodes.length; i++)
     {
         if (caller.parentNode.childNodes[i].type == "checkbox")
@@ -15,32 +15,31 @@ function outputSearch(caller)
         }
     }
     filter = input.value.toUpperCase();
-    table = document.getElementById(input.getAttribute("target"));
-    tr = table.getElementsByTagName("tr");
+    code = document.getElementById(input.getAttribute("target"));
+    pre = code.getElementsByTagName("pre");
+    div = code.querySelectorAll('[line-number]');
     showDuplicates = checkbox.checked;
 
 
-    // Loop through all table rows, and hide those who don't match the
+    // Loop through all code rows, and hide those who don't match the
     // search query
-    for (i = 0; i < tr.length; i++)
+    for (i = 0; i < pre.length; i++)
     {
-        td = tr[i].getElementsByTagName("td")[0];
-        if (td)
+        txtValue = pre[i].textContent || pre[i].innerText;
+        txtValue = txtValue.replaceAll("<[^>]*>", "");
+        txtValue = txtValue.replaceAll("\u2060", "").toUpperCase();
+        if (!filter ||
+            (txtValue.match(filter) && (!(txtValue === lastTxtValue) ||
+                                        showDuplicates)))
         {
-            txtValue = td.textContent || td.innerText;
-            txtValue = txtValue.replaceAll("<[^>]*>", "");
-            txtValue = txtValue.replaceAll("\u2060", "").toUpperCase();
-            if (!filter ||
-                (txtValue.match(filter) && (!(txtValue === lastTxtValue) ||
-                                            showDuplicates)))
-            {
-                tr[i].style.display = "";
-                lastTxtValue = txtValue;
-            }
-            else
-            {
-                tr[i].style.display = "none";
-            }
+            pre[i].style.display = "";
+            div[i].style.display = "";
+            lastTxtValue = txtValue;
+        }
+        else
+        {
+            pre[i].style.display = "none";
+            div[i].style.display = "none";
         }
     }
 }
diff --git a/logger/resources/templates/output_block.html b/logger/resources/templates/output_block.html
@@ -2,16 +2,14 @@
     <input type="text"
            id="{cmd_id}-{name}-search"
            onkeyup="outputSearch(this)"
-           target="{cmd_id}-{name}-table"
+           target="{cmd_id}-{name}-code"
            placeholder="Regex Search...">
     <input type="checkbox"
            id="{cmd_id}-{name}-checkbox"
            onclick="outputSearch(this)"
            name="{cmd_id}-{name}-show-duplicates">
     <label for="{cmd_id}-{name}-show-duplicates"> Show duplicates</label><br>
-    <table class="output display table" id="{cmd_id}-{name}-table">
-        <tbody>
-            {table_contents}
-        </tbody>
-    </table>
+    <code class="output" id="{cmd_id}-{name}-code">
+        {table_contents}
+    </code>
 </div>
diff --git a/logger/resources/templates/output_line.html b/logger/resources/templates/output_line.html
@@ -1,5 +1 @@
-<tr line-number="{lineno}">
-    <td>
-        <code>{line}</code>
-    </td>
-</tr>
+<div line-number="{lineno}"></div><pre>{line}</pre>