search

viresh-ratnakar / exolve

Online interactive crossword software in JavaScript
MIT License
71 stars 15 forks source link

Current clues overlap with the grid on mobile phones when they span more than two lines #32

Closed Antagony1060 closed 3 years ago

Antagony1060 commented 3 years ago

I am very pleased with the new (v80.0) responsive behaviour for mobiles. However, having just checked a few puzzles on my phone, I have found this problem (from my Alphabetical Jigsaw puzzle):

image

I also checked the mobile device toolbar in Chrome's (Windows) dev tools and found it shows the same issue when using one of the built in devices, the Galaxy S5:

image

viresh-ratnakar commented 3 years ago

Fixed now, with v0.81. PTAL, thanks.

Antagony1060 commented 3 years ago

Thanks! I've only tried it on my private site so far and it's a great improvement, but I notice it now overlaps the preamble instead. This is much less of a nuisance of course, as tapping a black square or refreshing the page will hide the clue strip if one wants to reread the preamble, but it seems to me like the strip should be dynamically adjusting the space for itself rather than overlapping anything. Although I imagine that is easier said than done. :\^)

viresh-ratnakar commented 3 years ago

With any solution to this, there will be some threshold beyond which things will look bad. In the solution that I have put in place currently, if the clue is so long that it overshoots the top of the window itself, it will get clipped.

If we reduce the font size for long clues and stick to two lines, I think there will be a much smaller length threshold where the clue will be unreadable, especially on smaller devices. Otoh, if by "the strip should be dynamically adjusting the space for itself" you mean that the strip should just expand more and push the grid down, I'm afraid I'm not a fan of the idea of the grid jumping around (that would also mean that after tapping on a cell to enter a letter, the cell and the cursor might slip away to a location further below).

I can also try to estimate the space needed (based upon the longest clue length) and allocate that ahead of time, but that will be inexact and subject to device/platform vagaries. Moreover, if only a few clues are long, it will look like a lot of wasted space most of the time.

So, in summary, I cannot think of a more satisfactory solution for now. But am happy to consider more ideas, always! :-)

Antagony1060 commented 3 years ago

Fair enough. It's a lot better now that it was before, so I'm happy to declare this issue resolved. Thanks again.

viresh-ratnakar commented 3 years ago

Just one small follow-up: you can always place a few
tags at the end of the preamble to create more blank space and avoid the overlap.

Viresh

On Sat, Aug 1, 2020, 7:50 AM Antagony1060 notifications@github.com wrote:

Fair enough. It's a lot better now that it was before, so I'm happy to declare this issue resolved. Thanks again.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/viresh-ratnakar/exolve/issues/32#issuecomment-667543167, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJQ562B64WFJDZBYEAZBNTTR6QTSBANCNFSM4PN3MCWA .

Antagony1060 commented 3 years ago

Interesting. I knew the preamble in my alphabet puzzle already had a few breaks, so I experimented with double length clues and found I could accommodate them by adding breaks and hard spaces (<br>&#160;) as required to the end of the preamble. It shouldn't be necessary under normal circumstances, but it's useful to know if a puzzle ever has crazy long clues any time.