[Feature Request] Mobile friendly

[Shinigami-shinto]

On a smarthphone, you only see a portion of the chess board.

EDIT: Thanks for this awesome plugin by the way!

I'd like to be able to contribute, but I only recently got started with React so this is too ambitious at the moment. I'll revisit this when I have improved in React :)

[latenitecoding]

There's a similar case open in #3 ; this plugin needs a responsive board

[latenitecoding]

I looked into how we could do this. You have to create a container that has the maximum height and width you'd like to permit which currently looks to be max-width: 750px; max-height: 450px;. You place a second container inside that's position: relative; with a 15:9 aspect ratio which is achieved through padding-bottom: 60%;. You place another container inside of that with position: absolute; top: 0; bottom: 0; left: 0; right: 0;. The outermost container sets the largest size of the view. The middle container creates a flexible view that scales down while maintaining the same aspect ratio. The innermost container always stretches to fill the entire space of the middle container so that the components in the view properly scale down.

The PGN container with the board, the moves, and the buttons have to be placed in the innermost container. The board should occupy height: 100%; width: 60%; while the moves + buttons occupy height: 100%; width: 40%;. Within their space, the moves should occupy height: 80%; width: 100%; and the buttons should occupy two groups of height: 10%; width: 100%;.

You'll also need to modify the text and the button icons. You can't use any padding or gaps with a fixed px size. You have to use vw instead, which is view width. You can combine this with min to limit the maximum view width to a desirable px size like 12px or 16px but it should probably be 2vw for cases where the view begins to scale down. This will allow the entire board + moves to scale down to mobile and tablet.

The comments should be handled separately within another view. Same width but different aspect ratio. I would say 5:2, so padding-bottom: 40%;.

[latenitecoding]

Unfortunately, the process is not as straightforward as just using flex boxes because you can't just make a responsive board. You have to maintain a certain aspect ratio for the board or the pieces will become misaligned with the board at various scales.

[latenitecoding]

Alternatively, you may want to consider an entirely different view for mobile that places the moves and buttons below the board between the board and the comments. This would allow the board to be bigger on smaller screens since it would have more horizontal space to use. However, you'd still need to have everything I mentioned above and move the moves container to a separate container at smaller view sizes.