add range css selector

This commit is contained in:
Wolfgang 2024-05-29 17:47:19 +02:00
parent a6e4aa701f
commit e181276de9
2 changed files with 29 additions and 21 deletions

View file

@ -257,12 +257,15 @@ div>label {
// e. g. cell-bandwidth-2700
// list like cw, narrow will be split to two entries
column.formatter = function(cell) {
let f = String(cell.getField()).toLowerCase().replace(/[\W]+/g, " ").replaceAll(" ", "_");
let v = String(cell.getValue()).toLowerCase().replaceAll("+", "_plus_").replace(/[^\w,]+/g, " ").replaceAll(" ", "_");
let f = String(cell.getField()).toLowerCase().replace(/[\W]+/g, " ").replaceAll(" ", "_").replace(/__+/g, "_");
let v = String(cell.getValue()).toLowerCase().replaceAll("+", "_plus_").replace(/[^\w,-]+/g, " ").replaceAll(" ", "_").replace(/__+/g, "_");
v.split(",").forEach((s) => {
cell.getElement().classList.add("cell-" + f + "-" + s.replace(/^_+|_+$/g, ""));
});
cell.getElement().classList.add("cell-" + f);
if ((f === "frequency") && (v.indexOf("-") > -1)) {
cell.getElement().classList.add("cell-" + f + "-" + "is_range");
}
return cell.getValue();
}
});
@ -274,11 +277,14 @@ div>label {
// list like cw, narrow will be split to two entries
rowFormatter: function(row){
for (const [key, value] of Object.entries(row.getData())) {
let k = String(key).toLowerCase().replace(/[\W]+/g, " ").replaceAll(" ", "_");
let v = String(value).toLowerCase().replaceAll("+", "_plus_").replace(/[^\w,]+/g, " ").replaceAll(" ", "_");
let k = String(key).toLowerCase().replace(/[\W]+/g, " ").replaceAll(" ", "_").replace(/__+/g, "_");
let v = String(value).toLowerCase().replaceAll("+", "_plus_").replace(/[^\w,-]+/g, " ").replaceAll(" ", "_").replace(/__+/g, "_");
v.split(",").forEach((s) => {
row.getElement().classList.add("row-" + k + "-" + s.replace(/^_+|_+$/g, ""));
});
if ((k === "frequency") && (v.indexOf("-") > -1)) {
row.getElement().classList.add("row-" + k + "-" + "is_range");
}
}
},
});

View file

@ -1,25 +1,27 @@
div.cell-bandwidth-20 {
background-color: Salmon !important;
.cell-bandwidth-20 {
background-color: color-mix(in srgb, Salmon 50%, transparent);
}
div.cell-bandwidth-200 {
background-color: LightPink !important;
.cell-bandwidth-200 {
background-color: color-mix(in srgb, Pink 50%, transparent);
}
div.cell-bandwidth-500 {
background-color: LightGreen !important;
.cell-bandwidth-500 {
background-color: color-mix(in srgb, Green 50%, transparent);
}
div.cell-bandwidth-2700 {
background-color: LightYellow !important;
.cell-bandwidth-2700 {
background-color: color-mix(in srgb, Yellow 50%, transparent);
}
div.cell-bandwidth-6000 {
background-color: LightBlue !important;
.cell-bandwidth-6000 {
background-color: color-mix(in srgb, Blue 50%, transparent);
}
div.cell-bandwidth-unrestricted {
background-color: LightGray !important;
.cell-bandwidth-unrestricted {
background-color: color-mix(in srgb, Gray 50%, transparent);
}
div.cell-bandwidth-undefined {
background-color: Red !important;
.row-bandwidth-undefined>.tabulator-cell {
background-color: color-mix(in srgb, Red 50%, transparent);
}
div.tabulator-cell[class*='contest_preferred'] {
background-color: Gold !important;
.cell-frequency:not(.cell-frequency-is_range) {
background-color: color-mix(in srgb, Cyan 50%, transparent);
}
[class*='contest_preferred'] {
background-color: color-mix(in srgb, Gold 30%, transparent);
}