Joined: 31 Jul 2021 Posts: 2146 Location: All over YOUR webs
Posted: Fri Dec 03, 2021 8:00 Post subject:
@giuliomagnifico
I took the liberty of splitting this from build report, so as to not cause too much noise.
It's not vertically stretched its horizontally stretched.
This is a SVG and the aspect ratio has always been set to none, however because there was a bug where if people use a browser font size that was not 16px, like 18px or greater full width was no longer used and there were large empty spaces on the right. It looked ugly.
So I made it use all available width which causes this side effect of looking stretched.
The solution that was acceptable for BrainSlayer was to use all width, I could have enabled the aspect ratio but that meant the SVG was centered with large spaces on left/right but looked all perfect. BS didnt want these empty spaces either.
So now Ive added more fixes https://svn.dd-wrt.com/changeset/47727#file2 that makes the svg use monospace font and Ive centered a few other elements and the issue you perceived will be sort of in disguise.
The real issue is that browsers have a nasty habit of depending on browser font-size set to scale things accordingly (this is wrong), and there is no way to tell the browsers to use font-sizes what developers set and stop fucking around with scaling things based on both font-size set by the website and browser.
So wait for builds newer than r47729 and the issue will be better disguised.
Joined: 31 Jul 2021 Posts: 2146 Location: All over YOUR webs
Posted: Mon Dec 13, 2021 13:16 Post subject:
Hello again
Just to add a note of some worthy, that the graph progress is now 100% drawn right to left as all other such graphs on any (semi-sane) software. It is also drawn in the background, so when the progress covers the bandwidth text markers they are drawn ontop and thus more readable.
Previously the graph progress filled from left to right until it filled the available width and then scrolled from right to left, looking quite odd and out of place.
Should provide for better UX while visiting this page.
Joined: 31 Jul 2021 Posts: 2146 Location: All over YOUR webs
Posted: Mon Dec 13, 2021 13:17 Post subject:
Hello again
Just to add a note of some worthy, that the graph progress is now drawn now right to left as all other such graphs on any (semi-sane) software. It is also drawn in the background, so when the progress covers the bandwidth text markers they are drawn ontop and thus readable.
Should provide for better UX while visiting this page.
Oh I've just checked, thanks, the graphs are very nice, but the text still looks like a bit stretched to me, or I'm a bit fussy because I'm a graphic/photographer?
Joined: 31 Jul 2021 Posts: 2146 Location: All over YOUR webs
Posted: Tue Dec 14, 2021 10:36 Post subject:
Im sure we can argue round how 1px being out of alignment is noticeable, as a graphic designer myself, I have to agree with you, I see it, you see it, and perhaps others see it too.
The issue is due to the aspect ratio of the svg, yes the graph is a dynamic SVG.
That has always been an issue because as I explained originally the preserveAspectRatio="none" as always been set to none and must be set to none, if we dont want large empty spaces to left/right of the graphs. Brainslayer said he prefers this as is.
Just to show you a graph with aspect ratio as it should be set, the issue will be gone but we get empty spaces to right/left of graph that varies depending on browser font size.
So You me and anyone else has to agree that its a compromise between one or the other at this time, until I have time to waste on something minor like this. Because this is displayed inside an iframe and that causes its own issues, depending on browser font-size and screen sizes.
If I increase viewport width it causes other issues like the graph draying is no longer edge to edge.
There is another usability issue with the new graphs. When both In and Out are high the combined graph is darker, and when it overlaps the scale labels, the labels practically cannot be read anymore. Can the labels be just painted on top of the graphs? Or at least make text colors more contrast.
Joined: 31 Jul 2021 Posts: 2146 Location: All over YOUR webs
Posted: Tue Dec 14, 2021 15:53 Post subject:
Thhats for that report.
Yes I noticed this, obviously being me
Perhaps, Ill try and see if I can do the same and override the colors via CSS like I did in Inspired themes, If I can and the classic themes CSS reaches the iframe then yes. Cant jump for joy just yet though.
It's usually a problem because there is no dark/light version of this, its just one for all atm. It use to be worse,contrast was not even there.
But if you read my previous, previous announcement, the graph is already drawn in the background now because of this issue exactly.
If you use inspired themes its much better so try use them for now.
I see. I prefer a lighter theme so normal Elegant is just fine. You can also try placing text inside its own not transparent background div (same color as the graph surface) so when it's overlapped it will be inside a box. May look a little ugly though...
can't wait to see the updated ones!