Reasonable Layout

What are the problems that most of the people want to solve? See #158

• Have a consistent layout most of the time (without too much hassle).
• Have some useful defaults, if needed, but ensure that settings of the user will win.

Here are some examples, that may be relevant (or not, just collecting).

• Width (set by div), layout: top ==> Width == boardSize, movesHeight consistent (with a max height)
• Width, layout: left ==> width == boardSize + movesWidth. half / half would be consistent
• No width, boardSize, layout == top ==> Similar to the first one, on difference

How to do it

1. Create some basic examples for: layout == top|bottom|left|right
2. Remove all styling that corresponds to layout: margin, padding, ...
3. Remove all styling from the Javascript source code.
4. Create for each example the corresponding CSS.
5. Decide how to do the styling in Javascript: at the end once, in between, ...?

Learned

• Chessground has a default board size of 320px (if not set).
• Grid is possible to have a reasonable layout, but if elements are variable sized, it gets complex
  • Moves height depends on the number of moves (and comments). If you reserve in top-layout 40% of the whole space for moves, that is too much. So perhaps there should be some heuristic:
    • number of half moves == # vmin (but not more than 40%??)