Implement a simple way to wrap moves to new layout depending on parent element width?

[zachy9]

I use a 'left' layout (moves to the right of the board) and have been trying to get it to switch to a 'top' layout (moves underneath the board) when the parent div gets narrower.

Is there currently an easy way to do this?

[mliebelt]

There is no easy way (currently) to do that. Have a look at #107 which has similar ideas about that. Currently there is some adjustment done at the end of the rendering, after the whole HTML is finished. The function is resizeLayout.

The base idea would be:

• Have a layout possible named e.g. best that selects left for landscape mode, and top for portrait mode.
• Use the size of the display (if needed) as maximum.
• Trigger the change on resize of the screen (see e.g. this article how to do that).

So I don't think this is not possible, but at the moment, it is just not done. I'am not an expert, and pretty busy, but I will try to have a look if there is a simple way to add this.

[zachy9]

Thanks for the suggestions! I've been toying with the grid layout css to see if I can make it work but I'm new to grids.

And thanks for all your work on this library.

[matt-d-webb]

@zachy9 I had a similar issue.

I am using tailwind css as my base css framework lib, as such, I leveraged the css classes (sm:hidden / sm:block) to target device sizes (media queries), to render the specific layout per device size I need.

I actually only needed to render a desktop / laptop view and a mobile view, so dynamically passed the layout props "left" to render the PGN Viewer for desktop, then "top" to do so for mobile, relying on the css show / hide classes.

My implementation:

    /* DESKTOP SPECIFIC */
          <div className="hidden sm:block bg-white dark:bg-gray-800 shadow overflow-auto sm:rounded-lg m-1 p-4 mt-5">
            <PGNViewer layout={"left"}>{games[0].pgn}</PGNViewer>
          </div>
          
   /* MOBILE SPECIFIC */
          <div className="block sm:hidden bg-white shadow overflow-auto p-2">
            <PGNViewer layout={"top"}>{games[0].pgn}</PGNViewer>
          </div>
          

Reference:

Dynamic layout:

• https://github.com/chess-centre/platform/blob/master/chess-centre-app/src/pages/App/Members.js#L26

React component:

• https://github.com/chess-centre/platform/blob/107f0a0e8096b84ccd2b1376a670b86db4c7d7ec/chess-centre-app/src/components/ChessBoard/ChessBoard.js#L7

Hope that is helpful.