macports / macports-webapp

Web application to display information about ports, build history and installation statistics
https://ports.macports.org/
BSD 2-Clause "Simplified" License
56 stars 28 forks source link

Comma-delimit numbers; use tabular figures in tables #338

Closed amake closed 2 years ago

amake commented 2 years ago

I find large numbers difficult to read without delimiters. Also, in tables, using tabular-nums can help a lot with legibility.

I did try to test this with a local setup, but I'm not very confident that I didn't maybe break something.

codecov[bot] commented 2 years ago

Codecov Report

Merging #338 (da3f478) into main (ed3d8ef) will not change coverage. The diff coverage is n/a.

@@           Coverage Diff           @@
##             main     #338   +/-   ##
=======================================
  Coverage   81.17%   81.17%           
=======================================
  Files         111      111           
  Lines        2762     2762           
  Branches      216      216           
=======================================
  Hits         2242     2242           
  Misses        474      474           
  Partials       46       46           

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update ed3d8ef...da3f478. Read the comment docs.

arjunsalyan commented 2 years ago

Thank you. From a quick look it all looks good to me, but I do not have access to my computer at this moment, so can't verify the actual behaviour. Let's keep it open until someone or I can verify that this does not break anything.

amake commented 2 years ago

Using #339 I was able to locally confirm that all pages I could feasibly test are working without issue.

The only one I wasn't able to test was the profile screen which requires logging in.

mojca commented 2 years ago

Can you please share some screenshots here?

amake commented 2 years ago

Before

image

After

image

amake commented 2 years ago

The screenshots above illustrate 99% of the change. Basically anywhere an integer is shown it will be comma-delimited.

The tabular number thing is extremely subtle: without changing the font, only numbers become monospaced. This helps with tabular data where you want to be able to visually compare the sizes of numbers; otherwise for instance a run of 1s will make a number appear much narrower than a perhaps larger number that has multiple 8s.

Because I don't have mpstats working locally, I had to manually "fake" the following "after" picture:

Before

Screen Shot 2022-05-06 at 21 46 54

After

Screen Shot 2022-05-06 at 21 46 42