Responsive web design on mobile devices

[mliebelt]

PgnViewerJS works well on normal computer screens, but is not optimal on small devices like mobiles. It would be nice to have a rudimentary "Responsive Web Design" here, that ensures that styles and sizes are chosen that allow to play through the games.

Principles

• In portrait mode, ensure that layout top | bottom is used.
• In landscape mode, use instead left | right.
• Ensure that the board is visible on the full screen.
• Try to have enough screen space for the moves then.

I think that should be doable without too much problems. And it would allow to look at my games when having only my mobile to browse.

[eigentor]

You need any help on this one? I am no totally devoted frontend developer, but a professional Web Dev. Could help out with SASS, CSS and testing (in terms of trying out a new version and reporting back). You built the library with vanilla JS, or on top of some framework?

What would be totally awesome is to also resize the board for mobile devices so it always fills the viewport (minus padding of course). Am evaluating modern PGN viewers and besides Canvas Chess yours appears to be the most modern. Canvas Chess appears to be less feature-rich and not actively maintained.

[mliebelt]

Just some comments on what constraints the solution:

• Viewport and resolution of some mobile devices.
• When looking on my device, I have a width of 1080px, but a viewport of 360px. Same for height.

[mliebelt]

I build the solution on base of (only relevant parts for the UI)

• https://github.com/ornicar/chessground which is the chessboard implemented and used on lichess.org. Therefore, there are many features that I inherit by using that.