add range css selector
This commit is contained in:
parent
a6e4aa701f
commit
e181276de9
|
@ -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");
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
|
36
standard.css
36
standard.css
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue