Enhance test UI with navigation and counter display
Docker Image CI / build-and-push-image (push) Has been cancelled
Maintain Release Merge PR / update-release-pr (push) Has been cancelled
release-please / release-please (push) Has been cancelled
test / test (18.x) (push) Has been cancelled
test / test (20.x) (push) Has been cancelled
test / test (22.x) (push) Has been cancelled

- 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.
This commit is contained in:
jelveh
2025-07-06 15:11:47 -07:00
parent b4143a6f39
commit a605ef42a1
+25 -3
View File
@@ -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();
});
</script>
</head>
<body>
<nav style="position: fixed; top: 0; width: 100%; background: #EEE; left: 0; padding-left: 10px;">
<nav>
<label style="margin-left: 8px; margin-right: 10px; cursor: pointer; display: inline-flex; align-items: center;">
<input type="checkbox" id="master-checkbox" checked style="margin-right: 5px; transform: scale(1.2);">
</label>
<button id="run-tests">Run Tests</button>
<span id="test-counter" style="font-size: 14px; color: #666; margin-right: 10px;"></span>
<div style="flex: 1; text-align: right;">
<button id="run-tests" style="margin-right: 30px;">Run Tests</button>
</div>
</nav>
<div id="tests"></div>
</body>