simon-git: puzzles (main): Simon Tatham

[Commits to Tartarus hosted VCS]

TL;DR:
  e98ede7 Make JavaScript game controls work better in small viewports

Repository:     https://git.tartarus.org/simon/puzzles.git
On the web:     https://git.tartarus.org/?p=simon/puzzles.git
Branch updated: main
Committer:      Simon Tatham <anakin at pobox.com>
Date:           2022-10-05 12:59:37

commit e98ede7a727e7a193ffec79f31343de6cb5825a7
web diff https://git.tartarus.org/?p=simon/puzzles.git;a=commitdiff;h=e98ede7a727e7a193ffec79f31343de6cb5825a7;hp=27dd36e3e642d255702789423bb001b3ff08e8e3
Author: Ben Harris <bjh21 at bjh21.me.uk>
Date:   Wed Oct 5 11:10:44 2022 +0100

    Make JavaScript game controls work better in small viewports
    
    In the old design, when they wrapped onto multiple lines, various bad
    things happened.  The lines overlapped one another, the lines got
    broken within buttons but not between buttons, and if they had got
    broken between buttons the left button on each line would have lacked
    a left border.
    
    I've made two major changes to fix this.  First, I've switched from
    flow layout to flex layout.  This has much better default behaviour,
    breaking lines in the right places, not overlapping lines, and even
    arranging line-wrapping within a button when the viewport gets really
    narrow.
    
    Second, I've given each button a border on all four sides and then
    used negative margins to overlap them.  This required changing the
    borders from transparent black to opaque grey to make them display
    correctly when overlapping.
    
    The result is not quite identical to the old version on a wide
    viewport, but I think it's as close as I can get while keeping the new
    CSS pleasant.
    
    Ideally, the separator would vanish when it was adjacent to a line
    break, but I've not worked out how to do that yet.

 html/jspage.pl | 49 +++++++++++++------------------------------------
 1 file changed, 13 insertions(+), 36 deletions(-)