fix various expanding issues

NickHugi · Jul 14, 2024 · d81e33e · d81e33e
1 parent d7e44a0
commit d81e33e
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 57 deletions.
diff --git a/.gitignore b/.gitignore
@@ -68,3 +68,6 @@ installlog.txt
 powershell-bin/
 .env
 typings/*
+Tools/HoloPatcher/src/holopatcher/node_modules
+Tools/HoloPatcher/src/holopatcher/package-lock.json
+Tools/HoloPatcher/src/holopatcher/package.json
diff --git a/Tools/HoloPatcher/src/holopatcher/template.html b/Tools/HoloPatcher/src/holopatcher/template.html
@@ -14,13 +14,16 @@
         #content {
             height: calc(100vh - 60px);
             overflow-y: auto;
+            z-index: 1;
+            position: relative;
         }
         #log-container {
             position: fixed;
             bottom: 0;
             left: 0;
             width: 100%;
-            transition: height 1s ease;
+            transition: height 1s ease, top 1s ease;
+            z-index: 2;
         }
         #expander {
             text-align: center;
@@ -49,11 +52,17 @@
         .slightly-expanded #expander::after {
             content: ' --- LOG VIEW --- ';
         }
-        .expanded #log-container, .slightly-expanded #log-container {
+        .expanded #log-container {
+            height: 100%;
+            top: 0;
+        }
+        .slightly-expanded #log-container {
             height: 30%;
+            top: auto;
         }
         .collapsed #log-container {
             height: 5%;
+            top: auto;
         }
         table {
             width: 100%;
@@ -112,31 +121,29 @@
                 container.classList.remove('collapsed');
                 container.classList.add('slightly-expanded');
             }
+            updateExpanderState();
         }
 
-        let newLogCount = 0;
-
         function setContent(newContent) {
             document.getElementById('content').innerHTML = newContent;
             updateExpanderState();
         }
 
         function appendLogLine(logLine, logType) {
-            var tableBody = document.getElementById('logs-table').getElementsByTagName('tbody')[0];
-            var row = tableBody.insertRow();
-            var cell = row.insertCell(0);
+            const tableBody = document.getElementById('logs-table').getElementsByTagName('tbody')[0];
+            const row = tableBody.insertRow();
+            const cell = row.insertCell(0);
             cell.innerHTML = logLine;
             row.className = 'log-entry ' + logType + ' new';
-            var logs = document.getElementById('logs');
-            logs.scrollTop = logs.scrollHeight; // Auto-scroll to new log entry
+            document.getElementById('logs').scrollTop = document.getElementById('logs').scrollHeight; // Auto-scroll to new log entry
             updateExpanderState();
         }
 
         function filterLogs() {
-            var filter = document.getElementById('log-filter').value;
-            var logEntries = document.getElementsByClassName('log-entry');
-            for (var i = 0; i < logEntries.length; i++) {
-                var logEntry = logEntries[i];
+            const filter = document.getElementById('log-filter').value;
+            const logEntries = document.getElementsByClassName('log-entry');
+            for (let i = 0; i < logEntries.length; i++) {
+                const logEntry = logEntries[i];
                 if (filter === 'ALL' || logEntry.classList.contains(filter)) {
                     logEntry.style.display = 'table-row';
                 } else {
@@ -145,57 +152,26 @@
             }
         }
 
-        function toggleExpand() {
-            let content = document.getElementById('content');
-            let container = document.getElementById('log-container');
-            let logs = document.getElementById('logs');
-            let expander = document.getElementById('expander');
-
-            if (container.classList.contains('expanded')) {
-                container.classList.remove('expanded');
-                container.classList.add('collapsed');
-            } else if (container.classList.contains('slightly-expanded')) {
-                container.classList.remove('slightly-expanded');
-                container.classList.add('expanded');
-            } else {
-                container.classList.remove('collapsed');
-                container.classList.add('slightly-expanded');
-            }
-            updateExpanderState();
-        }
-
         function updateExpanderState() {
-            let logs = document.getElementById('logs');
-            let expander = document.getElementById('expander');
-            let hasLogs = logs.querySelector('tbody').children.length > 0;
-            let hasContent = document.getElementById('content').innerHTML.trim() !== '';
+            const logs = document.getElementById('logs');
+            const expander = document.getElementById('expander');
+            const logContainer = document.getElementById('log-container');
+            const hasLogs = logs.querySelector('tbody').children.length > 0;
+            const hasContent = document.getElementById('content').innerHTML.trim() !== '';
 
             console.log(`hasLogs: ${hasLogs}, hasContent: ${hasContent}`);
 
-            if (hasLogs || hasContent) {
+            if (hasLogs) {
                 expander.style.display = 'block';
-                if (hasLogs && !hasContent) {
-                    if (logs.classList.contains('expanded')) {
-                        expander.classList.remove('collapsed', 'slightly-expanded');
-                        expander.classList.add('expanded');
-                    } else {
-                        expander.classList.remove('expanded', 'slightly-expanded');
-                        expander.classList.add('collapsed');
-                    }
-                } else {
-                    if (logs.classList.contains('expanded')) {
-                        expander.classList.remove('collapsed', 'slightly-expanded');
-                        expander.classList.add('expanded');
-                    } else if (logs.classList.contains('slightly-expanded')) {
-                        expander.classList.remove('collapsed', 'expanded');
-                        expander.classList.add('slightly-expanded');
-                    } else {
-                        expander.classList.remove('expanded', 'slightly-expanded');
-                        expander.classList.add('collapsed');
-                    }
+                if (logContainer.classList.contains('collapsed')) {
+                    logContainer.classList.remove('collapsed');
+                    logContainer.classList.add('slightly-expanded');
                 }
             } else {
-                expander.style.display = 'none';
+                if (!hasContent) {
+                    expander.style.display = 'none';
+                }
+                logContainer.classList.add('collapsed');
             }
         }