merch sizing-guide: minor ui fixes

styleguide/merch.html

@@ -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>