Fix ratings columns on smaller screens

[jauggy]

Currently in production it looks like this for small screens:

This ticket gives a better layout for smaller screens by adjusting the column widths and padding. Also I changed the uncertainty delta color to grey because it will always go down and users might be confused why that column is always red (and it's not bad to go down).

Test Steps

Go here http://localhost:4000/battle/ratings

Test on resolutions such as
1360 x 768
1280 x 1024
(or similar if you don't have any of these screen sizes)

[jauggy]

@L-e-x-o-n can you please review if you have spare time thanks.

[L-e-x-o-n]

1360x768 and 1280 x 1024

Should uncertainty arrow should always be next to number (not in next row)?

PR

Original 1360x768 and 1280 x 1024

1920x1080

For reference, looks the same with and without PR, except grey uncertainty

[jauggy]

Yeah your screenshot looks wrong. I'll take a look.

[jauggy]

@L-e-x-o-n can you try in incognito mode. Maybe css is getting cached? Also please check you have the latest from this pr/branch. In my PR, each row should only take up one line and the arrow should be on same row.

[L-e-x-o-n]

Tried, on latest PR, same thing :( Firefox

[jauggy]

I tested with Firefox again (latest version 125.0.2 and it works). can you do an experiment for me?

Open up
assets/scss/custom/_styles.scss and modify to add background-color to the Map column:
Find this section

//Map column for Ratings table
.table-ratings tr th:nth-child(1) {
  width: 200px;
}

Then modify to this:

//Map column for Ratings table
.table-ratings tr th:nth-child(1) {
  width: 200px;
  background-color: red;
}

Do you get the new color for the map heading?

[L-e-x-o-n]

I tested with Firefox again (latest version 125.0.2 and it works). can you do an experiment for me?

Open up assets/scss/custom/_styles.scss and modify to add background-color to the Map column: Find this section

//Map column for Ratings table
.table-ratings tr th:nth-child(1) {
  width: 200px;
}

Then modify to this:

//Map column for Ratings table
.table-ratings tr th:nth-child(1) {
  width: 200px;
  background-color: red;
}

Do you get the new color for the map heading?

Doesn't work, even with cleared cache...

[jauggy]

Part of the local setup is sass install

mix sass.install

@L-e-x-o-n Can you run that and try again?

[L-e-x-o-n]

Part of the local setup is sass install

mix sass.install

@L-e-x-o-n Can you run that and try again?

No changed :(
Would be nice if someone else can try, maybe it's just me?

[jauggy]

geekingfrog can you help test this PR? If the css is working correctly you should be able to go here:
http://localhost:4000/battle/ratings
and the columns will all be same width except the first one. For some reason it's not working for Lexon.

EDIT: Nevermind geekingfrog; Adam has tested it below.

[AdamChlupacek]

I can confirm the PR works as expected:

On master:

On your branch:

This is working as expected.

[jauggy]

Thanks Adam. I wonder why css is not working on Lexon's machine.

[geekingfrog]

It breaks down under 1080px for viewport width, but otherwise it's a net improvement, can fix that (mobile view?) later.

[geekingfrog]

not a fan of putting dimensions in pixels, since they don't adapt with font size. So if the user changes its font size, it gets out of whack easily. The default font size is 16px, that means 200px is 12.5rem.

[jauggy]

Have updated to use REM and confirmed it looks the same.