w33ble/gridfinity-calc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: move the unit selection above the inputs, make it blue

Browse Source
This commit is contained in:
w33ble
2026-01-11 20:01:29 -07:00
parent 925ecc395d
commit 92b90dd3b0
2 changed files with 33 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/main.ts
View File

@@ -22,7 +22,7 @@ const gapLength = document.getElementById('gap-length') as HTMLElement;
const gapHeight = document.getElementById('gap-height') as HTMLElement;
// State
let currentUnit: 'mm' | 'in' = 'mm';
let currentUnit: 'mm' | 'in' = 'in';
function updateResults() {
const width = parseFloat(inputWidth.value) || 0;
@@ -68,6 +68,20 @@ function updateResults() {
el.addEventListener('input', updateResults);
});
function setUnitStyles(unit: 'mm' | 'in') {
if (unit === 'in') {
unitInBtn.classList.add('bg-blue-600', 'text-white', 'shadow-sm');
unitInBtn.classList.remove('text-slate-600', 'hover:text-slate-900');
unitMmBtn.classList.remove('bg-blue-600', 'text-white', 'shadow-sm');
unitMmBtn.classList.add('text-slate-600', 'hover:text-slate-900');
} else {
unitMmBtn.classList.add('bg-blue-600', 'text-white', 'shadow-sm');
unitMmBtn.classList.remove('text-slate-600', 'hover:text-slate-900');
unitInBtn.classList.remove('bg-blue-600', 'text-white', 'shadow-sm');
unitInBtn.classList.add('text-slate-600', 'hover:text-slate-900');
}
}
unitMmBtn.addEventListener('click', () => {
if (currentUnit === 'mm') return;
@@ -81,10 +95,7 @@ unitMmBtn.addEventListener('click', () => {
if (height > 0) inputHeight.value = convertUnits(height, 'in', 'mm').toFixed(1);
currentUnit = 'mm';
unitMmBtn.classList.add('bg-white', 'shadow-sm');
unitMmBtn.classList.remove('text-slate-600');
unitInBtn.classList.remove('bg-white', 'shadow-sm');
unitInBtn.classList.add('text-slate-600');
setUnitStyles('mm');
updateResults();
});
@@ -101,12 +112,10 @@ unitInBtn.addEventListener('click', () => {
if (height > 0) inputHeight.value = convertUnits(height, 'mm', 'in').toFixed(2);
currentUnit = 'in';
unitInBtn.classList.add('bg-white', 'shadow-sm');
unitInBtn.classList.remove('text-slate-600');
unitMmBtn.classList.remove('bg-white', 'shadow-sm');
unitMmBtn.classList.add('text-slate-600');
setUnitStyles('in');
updateResults();
});
// Initial call
updateResults();
setUnitStyles(currentUnit);