Fixing flexbox issues with large comments

ArneVogel / listudy

Listudy - chess training server

https://listudy.org

GNU Affero General Public License v3.0

292 stars 45 forks source link

Fixing flexbox issues with large comments #141

Closed olleeriksson closed 1 year ago

olleeriksson commented 1 year ago

I had a go at fixing the flexbox issues with large comments where they sort of overlayed the chapter selection before.

OLD:

NEW:

Also a video: https://user-images.githubusercontent.com/41130048/206902948-6e5d03b0-9b7f-4d89-a8eb-18802a8e1661.mp4

Note! I fixed the issue with the horizontal scrollbar by the way after recording the video.

Changes:

Moved chapter selection to below the board, on the right side.
Made a scrollbar appear that covers the whole right area.
Removed the old scrollbars for mobile which made it really hard to scroll sometimes on mobile.
Made the comment section never extend higher than the board itself.
Changed the options from 3 columns to 2 columns.
Added close button (x) to the info boxes.
Made sure the Reset line option ends up in the right column.
I moved some options from app.scss to study.css which were only local to studies.

ArneVogel commented 1 year ago

I like the general change and with some changes would be happy to merge.

In the new design I am not happy with the way the progress bar looks right now. It is not aligned with anything and looks out of place.

Two ideas: Move it right below the board and have the progress label in front of it. Or move it below the settings with the labels either below it like currently or as in the first idea in front of the bar.

How the chapter selection should probably align with the other option to the button then.

olleeriksson commented 1 year ago

I'd say it's pretty well aligned when the screen has plenty of space.. but yeah when it is in that middle ground it doesn't line up. At the same time I kind of like using the space on the right side for both the chapter selection and the progress bar.

How about this then:

This is just a screenshot, because I don't want to be fiddling with the css until I know we have a design that is good.

If the chapter and progress bar does not occupy the space below the comments, then I suppose we might as well let the options extend all the way out, using three columns right?

In the idea world I would like to see the comments extend below the chess board, but I just don't think I know of a way to make flexbox behave that way. I'd have to resort to using plain old html tables I think. :) Or maybe grid, which I have never worked with.

ArneVogel commented 1 year ago

I dont like all the whitespace in that design (1). How about the chapter selection in position (2)?

I like the three column layout for the options better than the two column design.

In the idea world I would like to see the comments extend below the chess board

I dont see how this could be done nicely. Wouldn't this shift the layout and position for the settings for long comments?

olleeriksson commented 1 year ago

I dont see how this could be done nicely. Wouldn't this shift the layout and position for the settings for long comments?

No exactly, me neither.

How about this? If you like I can clean it up and commit the changes.

https://user-images.githubusercontent.com/41130048/206925062-d5243db1-d909-4d69-95a8-b7ecc7b69a3b.mp4

olleeriksson commented 1 year ago

All the changes are now committed, so ready for review.