fave77/pbchess

Video player extends out of visible area

Closed this issue · 4 comments

ISSUE DETAILS
Currently, the video player extends the scope of the visible area which makes it difficult to see the entire board in one go.
Also, the player overlaps the vocabulary section on some small screen sizes.

We can display the player with a size corresponding to the screen sizes.

Hey @fave77, I am a GSSOC 2021 participant. I would like to work on the issue.
Could you please update the issue with relevant tags and assign the same (Aanchal#1668)?

@aanchal-fatwani Please provide screenshots while reporting bugs relating to UI. Having said that, my plan for /learn page is to render the following components - vocab, videos, lessons and puzzles by implementing tabs.

NOTE: The lessons and puzzles component are not yet implemented.

Considering your claimed bug regarding UI is true, then why not use React Bootstrap Tabs for vocab and videos for now, and later when the other two components are done, we can easily extend it with few lines of code inside /learn page

The tabs should solve the overlap issue, and as for overflowing on smaller form factor, you can make the videos component responsive accordingly.

Provide screenshots for the issue, will assign it to you then 👍🏻

@fave77 Please find the screenshots of the issue and the proposed solution.

The video player had to be scrolled to check the entire game as the player extends the scope of the visible area.
Problem1

The player is overlapping the vocabulary section.
Problem2

Proposed solution:
ProposedStyle1

ProposedStyle2

Hey , I'm a GSSOC participant and I'm well acquainted with HTML,CS,JS and React. I would love to collaborate with @aanchal-fatwani on this issue.