Greasy Fork

Interesting script:
Work like a charm !

But it don't work with (My Pastebin of it, not maintained by its dev):
[TS] Citrus GFork v.1.1.49 Fix by KONF + new require
I know, i am very irritating by using old things, but i appreciate a lot this one:
Some little bugs in it, but it work.
It is very useful and helpful.
So.... can you make it compatible with it, if it is not too complicate for you?

If not, don't busy you ;-)

Note:
i make some test with CSS on it:

https://i.imgur.com/TTG3Yh3.jpeg

In fact, with Citrus, the .statistics-bar appear, but stay to 0...

@decembre wow what a styling! Can you send it? I think will fit better to Greasy Fork website style.

I finally normally fixed bug when total amount is 0 + make number more readable.

But it don't work with (My Pastebin of it, not maintained by its dev):
[TS] Citrus GFork v.1.1.49 Fix by KONF + new require

Don't know buddy, works perfectly fine on my device (screenshot below).

1 - My quick test for your script (not certain you can use it for all devices...):
It put the stats block on the right of the pages, not in the menu.

/* (new219) TEST - GM "Greasy Fork User Statistics+" hy NoyYou (2022) */
#user-statistics {
position: fixed !important;
width: 150px !important;
left: 12px !important;
padding: 5px !important;
border-radius: 5px;
background: #111 !important;
}
.statistics-bar {
margin: 0 0 0 1rem !important;
margin: 30px 0 0px 1rem !important;
width: calc(100% - 2.4vw);
}
.statistics-bar span {
position: relative;
display: inline-block !important;
width: 140px !important;
height: 25px !important;
left: -15px;
bottom: 29px;
margin: 10px 0 0px 0 !important;
padding: 2px 2px 10px 2px !important;
text-align: center !important;
border-radius: 4px !important;
z-index: 50;
color: gray !important;
border: 1px solid red !important;
}
.statistics-bar div {
height: 5px !important;
margin: 0px 0 -15px 0 !important;
padding: 0 3px !important;
border-radius: 4px;
text-align: center !important;
}
.statistics-bar div:before {
content: "." !important;
position: absolute !important;
display: inline-block !important;
width: 110px !important;
height: 7px !important;
line-height: 30px !important;
margin: -2px 0 4px 0 !important;
padding: 0 0px !important;
left: 18px !important;
border-radius: 4px;
font-size: 0 !important;
text-align: center !important;
box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.3), 0px 0px 4px 1px rgba(0, 0, 0, 0.3) inset !important;
border: 1px solid #222 !important;
}

2 - [TS] Citrus GFork: "Don't know buddy, works perfectly fine on my device (screenshot below)."

Haa...strange:
Do you use this userscipt too ?

With it, on my profile page and your, it give 0 for each stats.
Tested with Tampermonkey an Greasemonkey 3.16 / Waterfox Classic

@decembre okay, I tried my best to make it optimized as much as possible. Hope it will work for you bud :)

Haa...strange: Do you use this userscipt too ?

Nah, not really, installed it to make it workable for you.

I'll do CSS later, idea with pinable stats is actually cool 😎, tomorrow things must be done 💪

Ok!
"tomorrow things must be done"
;-)

Arrg!!! this damn re edit function on greasyfork which close after 2second!!!!
Hmmm
Me, after seeing your:
Faviconize SearX
I discover this Meta search engine and open source!

And now, i do CSS to try making the SearX engine displaying in multicolumn...
Each day an "interesting" thing to try.

I see you make an update for Citrus!
An it It work.

Just a little thing:
There is no Style Stats...
:-)

@decembre just added ability to pin stats and upgraded styles based on your styles :)

By the way, there is styling for two-columned search results (SearX):

#main_results > .result {
    display: inline-block;
    width: calc(50% - .5em);
}

#urls .result {
    display: inline-block;
    width: calc(50% - 2.3rem);
}

(Supported Oscar and Simple themes)

Upgraded, now you can choose amount of columns:

:root {
    --amount-of-columns: 2; /* WRITE AMOUNT OF COLUMNS HERE */
}

#main_results > .result, #urls .result {
    display: inline-block;
}

#main_results > .result {
    width: calc(100% / var(--amount-of-columns) - .5em);
}

#urls .result {
    width: calc(100% / var(--amount-of-columns) - 2.5rem);
}

Great idea the pin !
:)
But for "Citrus", as i said before, always not stats for Styles and userstyles,
and i have a lot because JavaScript is too difficult for me .


I Tested your solution for SearX multi column:
Interesting, but need some testing to have equal block results i want ...

Here my early test :



Your First Solution (red border) screen shot:


And your 2eme Solution (green border), very similar screen shot:

Yeah, I have troughs about grid layout, but wasn't sure about compatibility. (auto = +1 column)

.row > #main_results {
    display: grid;
    grid-template-columns: auto auto;
}

(That one is for Oscar theme)

Ha yes, the grid...
I am not so familiar with it.
Seems complicated...

But but... Thanks for the idea:
My first test with it (with Firefox Quantum, because Waterfox Classic don't support grid),
is nearly fine without too much codding!

I need to learn Grid.
Without it, it's a lot of work to have a similar effect.

Here a screenshot with a test of a variant of your proposal:
grid-template-columns: repeat(4, [col] 38%) !important;
And a 100% container (i deleted the right sidebar for the moment)
And yes, Oscar work with it!



The principal problem:
grid-template is not compatible with Waterfox Classic (based on v.56 of Firefox)

For the story:
I write my userstyles on Waterfox Classic.
With it, i can use and i appreciate:
- Firebug (It provide a readable info about which style is applied to a selector)
- Firepath (to easy testing my selectors with a devtool's special panel for that)
- An OLD stylish extension, without privacy concern,
boosted by an old userscript providing an editor which work very well (many functions useful in it).

I have not find a better alternative and i search them actively, because Waterfox became more and more far of last standard (hmmm...Chrome standard in fact..).

I can write simple userstyle with Quantum / Chrome.
But it's a pain when my code is huge and i need to test many userstyles an once.
By example, if i appreciate the Stylus extension i don't like its Editor too much.
...

In an other hand, my userstyles are compatible with old browsers!
:-)

Anyway, thanks for all these good ideas, maybe i go to drop an eye more seriously to adapt my "workflow" to this modern time.

After a little of rework, your solution 2, should be doable easily too (and compatible Waterfox Classic):

I need to learn Grid.
Without it, it's a lot of work to have a similar effect.

@decembre true.

grid-template-columns: repeat(4, [col] 38%) !important;

repeat is a modern feature, even I try to don't use it.

For the story:...

I use those tools for creating user styles:

• Default Firefox Dev Tools (Version 70+) - It has style inspector and comfort editing + Style Editor, that's what I need.
• Stylus (Version 1.4+) - Warnings and errors highlight, plus live editing (without reloads), flexible settings. That's it. Not much, but those tools are enough to create user styles.

In an other hand, my userstyles are compatible with old browsers!

Yeah, that's a thing that I can't provide. 😅

Anyway, thanks for all these good ideas, maybe i go to drop an eye more seriously to adapt my "workflow" to this modern time.

Nice buddy :), I recommend you to learn about: flex layout, calc, and :where (and :is). Those things will improve your user styles.

Let's continue our conversation here.