merch sizing-guide: ui & ux improvements, fix missing horizontal scroll
All checks were successful
/ build (push) Successful in 8s
All checks were successful
/ build (push) Successful in 8s
This commit is contained in:
parent
f99ef52958
commit
e80dadac8c
SSH key fingerprint:
SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
4 changed files with 308 additions and 149 deletions
128
styleguide/assets/style/merch.css
Normal file
128
styleguide/assets/style/merch.css
Normal file
|
|
@ -0,0 +1,128 @@
|
||||||
|
main {
|
||||||
|
max-width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
overflow-x: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
user-select: none;
|
||||||
|
width: fit-content;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border: solid 4px var(--color-shade-3);
|
||||||
|
}
|
||||||
|
table thead {
|
||||||
|
position: sticky;
|
||||||
|
top: calc(-1rem + 2px);
|
||||||
|
z-index: 10;
|
||||||
|
background-color: var(--color-background);
|
||||||
|
outline: solid 4px var(--color-shade-3);
|
||||||
|
outline-offset: -2px;
|
||||||
|
}
|
||||||
|
table thead tr > th {
|
||||||
|
outline: solid 1px var(--color-shade-3);
|
||||||
|
}
|
||||||
|
table thead tr > th.hover {
|
||||||
|
background-color: var(--color-shade-4);
|
||||||
|
}
|
||||||
|
table thead tr:first-child > th[colspan="15"] {
|
||||||
|
background-color: var(--color-shade-3);
|
||||||
|
}
|
||||||
|
table thead.currentEvent {
|
||||||
|
outline-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
table thead.currentEvent tr > th {
|
||||||
|
outline-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
table thead.currentEvent tr:first-child > th {
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
table tbody {
|
||||||
|
border-top: solid 4px var(--color-shade-3);
|
||||||
|
}
|
||||||
|
table tbody.currentEvent {
|
||||||
|
border: solid 4px var(--color-primary);
|
||||||
|
}
|
||||||
|
table tbody > tr > th,
|
||||||
|
table thead > tr > th,
|
||||||
|
table td {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
table th,
|
||||||
|
table td {
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
border: solid 1px var(--color-shade-3);
|
||||||
|
}
|
||||||
|
table th.hover,
|
||||||
|
table td.hover {
|
||||||
|
background-color: var(--color-shade-1);
|
||||||
|
}
|
||||||
|
table td.val {
|
||||||
|
font-family: "Departure Mono", ui-monospace, monospace;
|
||||||
|
}
|
||||||
|
table td.val.hover {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
table td.val:not(.empty) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
table td.val:not(.empty).hover {
|
||||||
|
background-color: var(--color-shade-1);
|
||||||
|
}
|
||||||
|
table td.val:not(.empty):hover {
|
||||||
|
background-color: var(--color-shade-4);
|
||||||
|
}
|
||||||
|
table td.val.highlighted[data-dim=A] {
|
||||||
|
background-color: rgb(96, 165, 249);
|
||||||
|
}
|
||||||
|
table td.val.highlighted[data-dim=B] {
|
||||||
|
background-color: rgb(211, 129, 247);
|
||||||
|
}
|
||||||
|
table td.val.highlighted[data-dim=C] {
|
||||||
|
background-color: rgb(255, 121, 117);
|
||||||
|
}
|
||||||
|
table td.val.currentDimension:not(.hover) {
|
||||||
|
background-color: var(--color-shade-3);
|
||||||
|
}
|
||||||
|
table td.val:not([data-diff=""])::after {
|
||||||
|
content: attr(data-diff);
|
||||||
|
display: block;
|
||||||
|
font-size: 0.8em;
|
||||||
|
background-color: var(--custom-color);
|
||||||
|
width: calc(100% + 1rem);
|
||||||
|
height: 1lh;
|
||||||
|
position: relative;
|
||||||
|
left: -0.5rem;
|
||||||
|
top: 0.25rem;
|
||||||
|
margin-top: -0.25rem;
|
||||||
|
}
|
||||||
|
table td.val[data-diff=""]::after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
font-size: 0.8em;
|
||||||
|
background-color: transparent;
|
||||||
|
width: calc(100% + 1rem);
|
||||||
|
height: 1lh;
|
||||||
|
position: relative;
|
||||||
|
left: -0.5rem;
|
||||||
|
top: 0.25rem;
|
||||||
|
margin-top: -0.25rem;
|
||||||
|
}
|
||||||
|
table td.dimension.hover {
|
||||||
|
background-color: var(--color-shade-4);
|
||||||
|
}
|
||||||
|
table td.dimension.currentDimension::after {
|
||||||
|
content: ">";
|
||||||
|
/*color: var(--color-secondary);*/
|
||||||
|
font-family: "Departure Mono", ui-monospace, monospace;
|
||||||
|
position: relative;
|
||||||
|
right: calc(-0.5rem - 0.5ch);
|
||||||
|
margin-left: -1ch;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=merch.css.map */
|
||||||
1
styleguide/assets/style/merch.css.map
Normal file
1
styleguide/assets/style/merch.css.map
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"sourceRoot":"","sources":["merch.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAIJ;EACE;;AAGF;EAKE;;AAJA;EACE;;AAKF;EACE;;AAKN;EACE;;AAEA;EACE;;AAIJ;AAAA;AAAA;EAGE;;AAGF;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;AAKF;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAKF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EACE;;AAGF;EACE;AACA;EACA;EACA;EACA;EACA;EACA","file":"merch.css"}
|
||||||
156
styleguide/assets/style/merch.scss
Normal file
156
styleguide/assets/style/merch.scss
Normal file
|
|
@ -0,0 +1,156 @@
|
||||||
|
main {
|
||||||
|
max-width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
overflow-x: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
user-select: none;
|
||||||
|
width: fit-content;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border: solid 4px var(--color-shade-3);
|
||||||
|
|
||||||
|
thead {
|
||||||
|
position: sticky;
|
||||||
|
top: calc(-1rem + 2px);
|
||||||
|
z-index: 10;
|
||||||
|
background-color: var(--color-background);
|
||||||
|
outline: solid 4px var(--color-shade-3);
|
||||||
|
outline-offset: -2px;
|
||||||
|
|
||||||
|
tr > th {
|
||||||
|
outline: solid 1px var(--color-shade-3);
|
||||||
|
|
||||||
|
&.hover {
|
||||||
|
background-color: var(--color-shade-4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:first-child > th[colspan='15'] {
|
||||||
|
background-color: var(--color-shade-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.currentEvent {
|
||||||
|
tr > th {
|
||||||
|
outline-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
outline-color: var(--color-primary);
|
||||||
|
|
||||||
|
tr:first-child > th {
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
border-top: solid 4px var(--color-shade-3);
|
||||||
|
|
||||||
|
&.currentEvent {
|
||||||
|
border: solid 4px var(--color-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody > tr > th,
|
||||||
|
thead > tr > th,
|
||||||
|
td {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
border: solid 1px var(--color-shade-3);
|
||||||
|
|
||||||
|
&.hover {
|
||||||
|
background-color: var(--color-shade-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
&.val {
|
||||||
|
font-family: "Departure Mono", ui-monospace, monospace;
|
||||||
|
|
||||||
|
&.hover {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.empty) {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&.hover {
|
||||||
|
background-color: var(--color-shade-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--color-shade-4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.highlighted {
|
||||||
|
&[data-dim="A"] {
|
||||||
|
background-color: rgb(96, 165, 249);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-dim="B"] {
|
||||||
|
background-color: rgb(211, 129, 247);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-dim="C"] {
|
||||||
|
background-color: rgb(255, 121, 117);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.currentDimension:not(.hover) {
|
||||||
|
background-color: var(--color-shade-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not([data-diff=''])::after {
|
||||||
|
content: attr(data-diff);
|
||||||
|
display: block;
|
||||||
|
font-size: 0.8em;
|
||||||
|
background-color: var(--custom-color);
|
||||||
|
width: calc(100% + 1rem);
|
||||||
|
height: 1lh;
|
||||||
|
position: relative;
|
||||||
|
left: -0.5rem;
|
||||||
|
top: 0.25rem;
|
||||||
|
margin-top: -0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-diff='']::after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
font-size: 0.8em;
|
||||||
|
background-color: transparent;
|
||||||
|
width: calc(100% + 1rem);
|
||||||
|
height: 1lh;
|
||||||
|
position: relative;
|
||||||
|
left: -0.5rem;
|
||||||
|
top: 0.25rem;
|
||||||
|
margin-top: -0.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.dimension {
|
||||||
|
&.hover {
|
||||||
|
background-color: var(--color-shade-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.currentDimension::after {
|
||||||
|
content: '>';
|
||||||
|
/*color: var(--color-secondary);*/
|
||||||
|
font-family: "Departure Mono", ui-monospace, monospace;
|
||||||
|
position: relative;
|
||||||
|
right: calc(-0.5rem - 0.5ch);
|
||||||
|
margin-left: -1ch;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -3,148 +3,11 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport"
|
<meta name="viewport"
|
||||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
content="width=device-width, user-scalable=no, initial-scale=1.0">
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
<link rel="stylesheet" type="text/css" href="assets/style/styleguide.css">
|
<link rel="stylesheet" type="text/css" href="assets/style/styleguide.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="assets/style/merch.css">
|
||||||
<title>EH22 - Merch</title>
|
<title>EH22 - Merch</title>
|
||||||
<style>
|
|
||||||
main {
|
|
||||||
max-width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
user-select: none;
|
|
||||||
width: fit-content;
|
|
||||||
border-collapse: collapse;
|
|
||||||
border: solid 4px var(--color-shade-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
thead {
|
|
||||||
position: sticky;
|
|
||||||
top: calc(-1rem + 2px);
|
|
||||||
z-index: 10;
|
|
||||||
background-color: var(--color-background);
|
|
||||||
outline: solid 4px var(--color-shade-3);
|
|
||||||
outline-offset: -2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody {
|
|
||||||
border-top: solid 4px var(--color-shade-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
table > thead > tr > th {
|
|
||||||
outline: solid 1px var(--color-shade-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-container {
|
|
||||||
overflow-x: auto;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
table > tbody > tr > th,
|
|
||||||
table > thead > tr > th,
|
|
||||||
td {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
padding: 0.25rem 0.5rem;
|
|
||||||
border: solid 1px var(--color-shade-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
td.val:not(.empty) {
|
|
||||||
background-color: var(--color-shade-1);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
td.val:not(.empty):hover {
|
|
||||||
background-color: var(--color-shade-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
td.val {
|
|
||||||
font-family: "Departure Mono", ui-monospace, monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
td.val.highlighted[data-dim="A"] {
|
|
||||||
background-color: rgb(96, 165, 249);
|
|
||||||
}
|
|
||||||
|
|
||||||
td.val.highlighted[data-dim="B"] {
|
|
||||||
background-color: rgb(211, 129, 247);
|
|
||||||
}
|
|
||||||
|
|
||||||
td.val.highlighted[data-dim="C"] {
|
|
||||||
background-color: rgb(255, 121, 117);
|
|
||||||
}
|
|
||||||
|
|
||||||
td.val.currentDimension:not(.highlighted) {
|
|
||||||
background-color: var(--color-shade-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
td.val:not([data-diff=''])::after {
|
|
||||||
content: attr(data-diff);
|
|
||||||
display: block;
|
|
||||||
font-size: 0.8em;
|
|
||||||
background-color: var(--custom-color);
|
|
||||||
width: calc(100% + 1rem);
|
|
||||||
height: 1lh;
|
|
||||||
position: relative;
|
|
||||||
left: -0.5rem;
|
|
||||||
top: 0.25rem;
|
|
||||||
margin-top: -0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
td.val[data-diff='']::after {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
font-size: 0.8em;
|
|
||||||
background-color: transparent;
|
|
||||||
width: calc(100% + 1rem);
|
|
||||||
height: 1lh;
|
|
||||||
position: relative;
|
|
||||||
left: -0.5rem;
|
|
||||||
top: 0.25rem;
|
|
||||||
margin-top: -0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
table > thead > tr > th.highlighted {
|
|
||||||
background-color: var(--color-shade-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:hover td.dimension {
|
|
||||||
background-color: var(--color-shade-4);
|
|
||||||
}
|
|
||||||
|
|
||||||
tr > td.dimension.currentDimension {
|
|
||||||
/*background-color: var(--color-secondary);*/
|
|
||||||
}
|
|
||||||
|
|
||||||
tr > td.dimension.currentDimension::after {
|
|
||||||
content: '>';
|
|
||||||
/*color: var(--color-secondary);*/
|
|
||||||
font-family: "Departure Mono", ui-monospace, monospace;
|
|
||||||
position: relative;
|
|
||||||
right: calc(-0.5rem - 0.5ch);
|
|
||||||
margin-left: -1ch;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead > tr:first-child > th[colspan='15'] {
|
|
||||||
background-color: var(--color-shade-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
#eh22 {
|
|
||||||
border-left: solid 4px var(--color-primary);
|
|
||||||
border-right: solid 4px var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody#eh22 > tr:first-child > th {
|
|
||||||
background-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
@ -156,7 +19,7 @@
|
||||||
<li>C - sleeve</li>
|
<li>C - sleeve</li>
|
||||||
</ul>
|
</ul>
|
||||||
<table>
|
<table>
|
||||||
<thead id="th_eh22">
|
<thead id="th_eh22" class="currentEvent">
|
||||||
<tr>
|
<tr>
|
||||||
<th colspan="15">Easterhegg - EH22</th>
|
<th colspan="15">Easterhegg - EH22</th>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -178,7 +41,7 @@
|
||||||
<th data-col="6XL">6XL</th>
|
<th data-col="6XL">6XL</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody class="currentEvent">
|
||||||
<tr>
|
<tr>
|
||||||
<th rowspan="3">Shirt Straight</th>
|
<th rowspan="3">Shirt Straight</th>
|
||||||
<td rowspan="3">Stanley/Stella</td>
|
<td rowspan="3">Stanley/Stella</td>
|
||||||
|
|
@ -225,7 +88,7 @@
|
||||||
<td class="val empty"></td>
|
<td class="val empty"></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody>
|
<tbody class="currentEvent">
|
||||||
<tr>
|
<tr>
|
||||||
<th rowspan="3">Shirt Fitted</th>
|
<th rowspan="3">Shirt Fitted</th>
|
||||||
<td rowspan="3">Stanley/Stella</td>
|
<td rowspan="3">Stanley/Stella</td>
|
||||||
|
|
@ -272,7 +135,7 @@
|
||||||
<td class="val empty"></td>
|
<td class="val empty"></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody>
|
<tbody class="currentEvent">
|
||||||
<tr>
|
<tr>
|
||||||
<th rowspan="3">Hoodie</th>
|
<th rowspan="3">Hoodie</th>
|
||||||
<td rowspan="3">Stanley/Stella</td>
|
<td rowspan="3">Stanley/Stella</td>
|
||||||
|
|
@ -319,7 +182,7 @@
|
||||||
<td class="val empty"></td>
|
<td class="val empty"></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody>
|
<tbody class="currentEvent">
|
||||||
<tr>
|
<tr>
|
||||||
<th rowspan="3">Zipper</th>
|
<th rowspan="3">Zipper</th>
|
||||||
<td rowspan="3">Stanley/Stella</td>
|
<td rowspan="3">Stanley/Stella</td>
|
||||||
|
|
@ -1238,17 +1101,28 @@
|
||||||
|
|
||||||
function hoverCell(e) {
|
function hoverCell(e) {
|
||||||
const cell = e.target;
|
const cell = e.target;
|
||||||
|
const group = cell.parentElement.parentElement;
|
||||||
const col = cell.dataset.col;
|
const col = cell.dataset.col;
|
||||||
|
const dim = cell.dataset.dim;
|
||||||
|
|
||||||
|
hoverOff()
|
||||||
document.querySelectorAll('table > thead > tr > th').forEach(match => {
|
document.querySelectorAll('table > thead > tr > th').forEach(match => {
|
||||||
match.classList.remove('highlighted')
|
if (match.dataset.col === col) match.classList.add('hover')
|
||||||
if (match.dataset.col === col) match.classList.add('highlighted')
|
});
|
||||||
|
group.querySelectorAll('td.dimension').forEach(match => {
|
||||||
|
if (match.innerText === dim) match.classList.add('hover')
|
||||||
|
});
|
||||||
|
group.querySelectorAll('td:not(.dimension), th').forEach(match => {
|
||||||
|
match.classList.add('hover')
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function hoverOff() {
|
function hoverOff() {
|
||||||
document.querySelectorAll('table > thead > tr > th').forEach(match => {
|
document.querySelectorAll('table > thead > tr > th').forEach(match => {
|
||||||
match.classList.remove('highlighted')
|
match.classList.remove('hover')
|
||||||
|
});
|
||||||
|
document.querySelectorAll('td.dimension, td, th').forEach(match => {
|
||||||
|
match.classList.remove('hover')
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1265,11 +1139,11 @@
|
||||||
cell.dataset.diff = '';
|
cell.dataset.diff = '';
|
||||||
cell.dataset.dim = cell.parentElement.querySelector('td.dimension').innerHTML;
|
cell.dataset.dim = cell.parentElement.querySelector('td.dimension').innerHTML;
|
||||||
|
|
||||||
cell.addEventListener('pointerdown', selectCellPlus);
|
cell.addEventListener('click', selectCellPlus);
|
||||||
});
|
});
|
||||||
|
|
||||||
// disable select on click outside value cell
|
// disable select on click outside value cell
|
||||||
document.addEventListener('pointerdown', e => {
|
document.addEventListener('click', e => {
|
||||||
document.querySelectorAll('td.val:not(.empty)').forEach(match => {
|
document.querySelectorAll('td.val:not(.empty)').forEach(match => {
|
||||||
match.dataset.diff = '';
|
match.dataset.diff = '';
|
||||||
match.classList.remove('highlighted')
|
match.classList.remove('highlighted')
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue