EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

merch sizing-guide: minor ui fixes
All checks were successful
/ build (push) Successful in 9s
Details

Browse source
This commit is contained in:
kritzl 2025-02-13 02:55:57 +01:00
commit 0a2826842e
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
1 changed files with 17 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

26
styleguide/merch.html
View file

@ -61,7 +61,7 @@
}
td.val:not(.empty):hover {
background-color: var(--color-primary);
background-color: var(--color-shade-4);
}
td.val {
@ -109,11 +109,11 @@
}
table > thead > tr > th.highlighted {
background-color: var(--color-primary);
background-color: var(--color-shade-4);
}
tr:hover td.dimension {
background-color: var(--color-primary);
background-color: var(--color-shade-4);
}
tr > td.dimension.currentDimension {
@ -150,7 +150,7 @@
<h1>Merch</h1>
<ul>
<li>A - width</li>
<li>B - height</li>
<li>B - length</li>
<li>C - sleeve</li>
</ul>
<table>
@ -1183,7 +1183,6 @@
group.querySelectorAll(`td[data-col='${col}']`).forEach(match =>{
values[match.dataset.dim] = parseFloat(match.dataset.val);
})
console.log(values);
document.querySelectorAll('td.val:not(.empty)').forEach(match => {
match.style.backgroundColor = ``
@ -1218,17 +1217,26 @@
});
}
function hoverOff() {
document.querySelectorAll('table > thead > tr > th').forEach(match => {
match.classList.remove('highlighted')
});
}
document.querySelectorAll('td.val').forEach(cell => {
const rowTitle = cell.parentElement.querySelector('th');
cell.dataset.col = sizes[rowTitle !== null ? cell.cellIndex - 4 : cell.cellIndex - 1];
cell.addEventListener('pointerenter', hoverCell);
cell.addEventListener('pointerleave', hoverOff);
});
// initialize table
document.querySelectorAll('td.val:not(.empty)').forEach(cell => {
cell.dataset.val = cell.innerText;
cell.dataset.diff = '';
cell.dataset.dim = cell.parentElement.querySelector('td.dimension').innerHTML;
const rowTitle = cell.parentElement.querySelector('th');
cell.dataset.col = sizes[rowTitle !== null ? cell.cellIndex - 4 : cell.cellIndex - 1];
cell.addEventListener('pointerdown', selectCellPlus);
cell.addEventListener('pointerenter', hoverCell);
});
</script>