Only highlight relevant cells

This commit is contained in:
Jeremy Thomas 2020-05-11 00:40:11 +01:00
parent f79d8c09e2
commit 64bb3085b5
4 changed files with 39 additions and 16 deletions

View File

@ -366,16 +366,22 @@ document.addEventListener('DOMContentLoaded', () => {
});
function resetTable() {
spacingRows.forEach(el => el.classList.remove('bd-current-row'));
spacingCells.forEach(el => el.classList.remove('bd-current-column'));
// spacingRows.forEach(el => el.classList.remove('bd-current-row'));
spacingCells.forEach(el => el.classList.remove('bd-current-row', 'bd-current-column'));
spacingValues.forEach(el => el.classList.remove('bd-current-value'));
}
function highlightRowAndColumn(rowIndex, columnIndex) {
const row = spacingRows[rowIndex];
row.classList.add('bd-current-row');
let i = columnIndex;
spacingRows.forEach(r => {
while (i > -1) {
row.children[i].classList.add('bd-current-row');
i--;
}
const nextRows = spacingRows.slice(rowIndex);
nextRows.forEach(r => {
r.children[columnIndex].classList.add('bd-current-column');
});

View File

@ -6,13 +6,18 @@
color: $border
.bd-current-row
background-color: $background
td:first-child,
.bd-current-column:not(:first-child)
&:first-child
background-color: $danger-light
color: $text-strong
code
background-color: $danger
color: $danger-invert
&.bd-current-column
background-color: $primary-light
color: $text-strong
code
background-color: $primary
color: $primary-invert
.bd-current-column
background-color: $background
.bd-current-value

View File

@ -13176,18 +13176,26 @@ svg {
background-color: whitesmoke;
}
#spacingTable .bd-current-row td:first-child,
#spacingTable .bd-current-row .bd-current-column:not(:first-child) {
#spacingTable .bd-current-row:first-child {
background-color: #feecf0;
color: #363636;
}
#spacingTable .bd-current-row td:first-child code,
#spacingTable .bd-current-row .bd-current-column:not(:first-child) code {
#spacingTable .bd-current-row:first-child code {
background-color: #f14668;
color: #fff;
}
#spacingTable .bd-current-row.bd-current-column {
background-color: #ebfffc;
color: #363636;
}
#spacingTable .bd-current-row.bd-current-column code {
background-color: #00d1b2;
color: #fff;
}
#spacingTable .bd-current-column {
background-color: whitesmoke;
}

View File

@ -370,11 +370,9 @@ document.addEventListener('DOMContentLoaded', function () {
});
function resetTable() {
spacingRows.forEach(function (el) {
return el.classList.remove('bd-current-row');
});
// spacingRows.forEach(el => el.classList.remove('bd-current-row'));
spacingCells.forEach(function (el) {
return el.classList.remove('bd-current-column');
return el.classList.remove('bd-current-row', 'bd-current-column');
});
spacingValues.forEach(function (el) {
return el.classList.remove('bd-current-value');
@ -383,9 +381,15 @@ document.addEventListener('DOMContentLoaded', function () {
function highlightRowAndColumn(rowIndex, columnIndex) {
var row = spacingRows[rowIndex];
row.classList.add('bd-current-row');
var i = columnIndex;
spacingRows.forEach(function (r) {
while (i > -1) {
row.children[i].classList.add('bd-current-row');
i--;
}
var nextRows = spacingRows.slice(rowIndex);
nextRows.forEach(function (r) {
r.children[columnIndex].classList.add('bd-current-column');
});