Ratio highlighting being wierd

[jacksalssome]

Hi, I got torrents from 0 to 800 ratio.

You probably didn't intend it, but when the ratio hits 10 to 20 it triggers "else if (string > "1.5" && string <= "2")", same with 100 to 200

I don't know JS, but here's my fix:

First i added 2 more purples

Core.css:

:root {
        color-scheme: dark;
        --darkmode-primary: #00d9ff;
        --darkmode-background: #202020;
        --darkmode-background-alt: #242424;
        --darkmode-background-alt2: #4e4e4e;
        --darkmode-text: #c2c2c2;
        --darkmode-text-alt: #d3d3d3;
        --darkmode-line-color: #2F3437;
        --highlight-color--darkred: #b83739;
        --highlight-color--red: #ce292c;
        --highlight-color--orange: #d0822b;
        --highlight-color--yellow: #fcdd04;
        --highlight-color--green: #64e67c;
        --highlight-color--brightgreen: #49ca61;
        --highlight-color--blue: #9FC8EB;
        --highlight-color--lightpurple: #DEAFEB;
        --highlight-color--purple: #D397E4;
        --highlight-color--darkpurple: #CA80DF;
        --callout-background-color-dark: #DFDFDC;
        --callout-background-color-dark: #DFDFDC;
        --calloutred-background-color-dark: #E8D4D8;
        --calloutorange-background-color-dark: #E8DAC8;
        --calloutyellow-background-color-dark: #E9E2BF;
        --calloutgreen-background-color-dark: #CDE6D0;
        --calloutblue-background-color-dark: #D6E2E6;
        --calloutpurple-background-color-dark: #E4D5E3;
        --text-shadow: 0.01em 0.01em 0.03em #727E84;
}

.highlight-lightpurple {
        color: var(--highlight-color--lightpurple) !important;
}

.highlight-purple {
        color: var(--highlight-color--purple) !important;
}

.highlight-darkpurple {
        color: var(--highlight-color--darkpurple) !important;
}

I think there's something wrong with the greater than and less than, so I put "Number()" around it and it fixed the colours. 🤷

dynamicTable.js:

            // ratio
            this.columns['ratio'].updateTd = function(td, row) {
                const ratio = this.getRowValue(row);
                const string = (ratio === -1) ? '∞' : window.qBittorrent.Misc.toFixedPointString(ratio, 2);
                td.set('text', string);
                td.set('title', string);
                td.classList.add('ratio');
                td.set('class', 'ratio');
                // color by percentage
                if (string === 0 || string === "0.00") {
                    td.classList.add('highlight-darkred');
                } else if (string > "0" && string <= "0.10") {
                    td.classList.add('highlight-red');
                } else if (string > "0.10" && string <= "0.20") {
                    td.classList.add('highlight-orange');
                } else if (string > "0.20" && string <= "0.40") {
                    td.classList.add('highlight-yellow');
                } else if (string > "0.40" && string <= "0.60") {
                    td.classList.add('highlight-yellow');
                } else if (string > "0.60" && string <= "0.80") {
                    td.classList.add('highlight-green');
                } else if (string > "0.80" && string <= "1.0") {
                    td.classList.add('highlight-brightgreen');
                } else if (string > "1.0" && string <= "1.5") {
                    td.classList.add('highlight-blue');
                } else if (string > Number("1.5") && string <= Number("2")) {
                    td.classList.add('highlight-lightpurple');
                } else if (string > Number("2") && string <= Number("10")) {
                    td.classList.add('highlight-purple');
                } else if (string > Number("10")) {
                    td.classList.add('highlight-darkpurple');
                }
            };

It could probably do with re-doing to colors slightly. For example, split the blues into a light and dark up to ratio of 10, light purple to 100 and dark purple till 1000 and then gold after.

[Carve]

Would you like to put this into a merge request and I add it?

[jacksalssome]

Ok. Il put some more work into it and get a quality fix for you.

[jacksalssome]

Closing, I submitted a patch: https://github.com/Carve/qbittorrent-webui-cjratliff.com/pull/67