Responsive web design on mobile devices

mliebelt / pgn-viewer

Simple PGN viewer with the necessary features to display chess games

GNU General Public License v3.0

161 stars 44 forks source link

Responsive web design on mobile devices #107

Open mliebelt opened 5 years ago

mliebelt commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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.