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!
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.
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).
All I remember is that anoek was against it… but all power to you if you can get it through
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
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.
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.
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”