From a605ef42a106de07e32e201a1fc629c8e1788f14 Mon Sep 17 00:00:00 2001 From: jelveh Date: Sun, 6 Jul 2025 15:11:47 -0700 Subject: [PATCH] Enhance test UI with navigation and counter display - Added a fixed navigation bar for improved accessibility and layout. - Introduced a test counter to display the number of selected tests. - Updated styles for better alignment and spacing in the test UI. - Ensured the counter updates dynamically based on checkbox selections. --- src/puter-js/test/run.html | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/src/puter-js/test/run.html b/src/puter-js/test/run.html index adf822bbf..8b0556ea4 100644 --- a/src/puter-js/test/run.html +++ b/src/puter-js/test/run.html @@ -9,8 +9,19 @@ body { font-family: Arial, sans-serif; } + nav { + z-index: 1000; + display: flex; + align-items: center; + position: fixed; + top: 0; + width: 100%; + background: #EEE; + left: 0; + padding-left: 10px; + } #tests { - margin-top: 20px; + padding-top: 50px; } #run-tests { margin-top: 20px; @@ -380,6 +391,8 @@ const isChecked = $(this).prop('checked'); $('.test-checkbox').prop('checked', isChecked); $('#fsTests-group, #kvTests-group, #aiTests-group').prop('checked', isChecked); + // Update the counter display + updateMasterCheckboxState(); }); // Function to update master checkbox state @@ -387,6 +400,9 @@ const totalCheckboxes = $('.test-checkbox').length; const checkedCheckboxes = $('.test-checkbox:checked').length; + // Update the counter display + $('#test-counter').text(`${checkedCheckboxes} / ${totalCheckboxes}`); + if (checkedCheckboxes === 0) { $('#master-checkbox').prop('checked', false).prop('indeterminate', false); } else if (checkedCheckboxes === totalCheckboxes) { @@ -406,17 +422,23 @@ updateMasterCheckboxState(); }); + // Initialize the counter display + updateMasterCheckboxState(); + }); -