Scaling on high resolution

Hi everyone,

I would like to suggest better scaling for the games history list in profile. I am using a 31 inch monitor at 2560x1440 resolution but still have to scroll to left and right, because the history list is limited in scaling. There is a lot of space towards each side, but the list is not shown completely.

I love the OGS interface though. Keep up that great work!

6 Likes

+1 @anoek this really makes no sense. Nobody wants several inches of blank space on both sides AND a horizontal scroll bar <3

4 Likes

Any chance we will see changes soon? I’m still annoyed :wink:

3 Likes

Unfortunately, I believe this is unlikely to change until there is a full overview of the design of the user page. The complexity comes from having a compatible design between desktop and mobile, I believe.

1 Like

I agree that a careful redesign would be nice.

However, in the meantime, I think a simple fix would be to increase the maximum width (or remove the max limit altogether) of the central column where the game history is displayed.

The width of this column already appears to be adaptive (in order to accommodate mobile and other smaller screens). However on larger screens, the width of this column seems to stop growing once it reaches 789 pixels. The width limit seems to be ultimately coming from a parent div with the class “User container”, which has a max width of 1200 pixels. Changing a single number in the CSS from 1200 to 1600 seems to allow for the column to grow wide enough (adaptively for larger screens).

Currently testing possible solutions for this :slight_smile:

2 Likes

All I remember is that anoek was against it… but all power to you if you can get it through :slight_smile:
I think the issue is he wants the whole page to align and there isn’t a good way that we’ve found to make the sections higher up that wide

Solutions to the need to scroll don’t necessarily have to include changing widths. With that being said, however, the current layout is using two columns. The right hand column only contains the activity section. Far from optimal

3 Likes

What exactly was he against?

I mention a solution in my previous post that accomplishes alignment.

There is a parent div holding the entire column of user content (including the upper sections). This div is labeled with the classes “User container”, and gets assigned a “max-width” of 1200px that seems to come from the CSS in “global_styl/bootstrap-esq.styl”, which defines that parameter for the “container” class. Changing the max-width value to something wider (or maybe just getting rid of the max-width limit altogether) still preserves the same layout, alignment, and adaptive functionality of the page, but then allows the entire column of user content to grow large enough (on sufficiently wide screens) to drop the scroll bar and avoid big margins.

I agree that this is bad layout, and it should be rethought in a more careful redesign of the whole page.

Changing the bootstrap .container to .container-fluid should accomplish the same thing. You can’t remove the container completely though as the bootstrap grid columns depend on it

I don’t mean getting of the entire class/container/etc. I just mean getting rid of the max-width limit.

After all, how we do know what’s a reasonable limit? Won’t we all have 8K displays soon?

From memory I think he voiced some concern about the spacing in area “A” in the below image growing too large and looking weird…?

But looking at it now, there’s no reason why game history can’t grow out horizontally to align with the outer edge of the Activity tab, as long as we also remember to make sure Activity never grows below the marked lower point, and to add a vertical scroller to activity if it should need to grow that far.

Gotcha. In that case it would probably still be best to switch from .container to .container-fluid which has a 100% width rather than editing the bootstrap css. This would affect spacing in other areas as @BHydden has just pointed out.

Looks like putting activity in a row with active games and giving game history its own row on the grid may be the best solution for now

Game history overlaps with the activity tab if there are no ongoing games. Dealing with the activity tab would require a more significant change.

Personally, I think the huge margins around game history, necessitating a scroll bar, is far more ugly than the “A gap” getting a bit larger. Even if that’s a concern, it might be relatively simple to figure out some CSS to limit the size of the “A gap”.

Consider how that might look on a profile page with no active games.

1 Like

If you remove the redacted element (most OGS users don’t see it), you cannot stretch the history to the right anymore. The Activity list gets in your way.

Yeah my bad, for reference, here is the exact same page (with no active games) and with the redacted section gone.

So for many users, you can’t grow game history without growing the total width of the whole page. Basically returning us to “it’s a great idea, but would essentially require a redesign of the whole page”

1 Like

In that case maybe it could be made to expand to fill the entire row, or we could just always include the active games section with something saying “This user has no active games” or similar?

You will very quickly notice this isn’t a practical solution when you come across the many users who have lots of ladders AND tournaments AND groups…

Nobody would want to scroll down that far to get to game history, which is why they’re currently in separate columns.

2 Likes

Yeah, that wouldn’t work at all.

Edit: Unless we give the activity section a fixed height and make it scrollable within its slot. Then it might still be doable

1 Like

As is so often the case when we have a UI based dilemma, I turned to lichess.org :stuck_out_tongue:

Their solution to this problem is a tabbed share-space so that activity and games can both have a big viewing area, you just need to pick which one you want to see.


2 Likes