Dyalog / TryAPL

This is the source code for TryAPL.org
https://tryapl.org
MIT License
22 stars 7 forks source link

Provide GO button on mobile #4

Open abrudz opened 3 years ago

abrudz commented 3 years ago

When hiding the single-line input field, replace it with a purple ▷ in the lower right, for mobiles without Enter

sloorush commented 4 months ago

Hi @abrudz, Do you have any suggestions as to where the button should be on the screen?

Edit: Do you think adding a floating purple button on the bottom right corner is a good choice?

image
abrudz commented 4 months ago

I don't see any better options, but why do we hide the single-line input field on mobile?

sloorush commented 4 months ago

why do we hide the single-line input field on mobile?

That is true, I think the single line input field could also solve the issue.

sloorush commented 4 months ago

From what I could find, it is intentionally hidden on mobile devices. It was done in the initial git (GitHub) commit. Do we have any old git or svn history to find more information on why it was done?

https://github.com/Dyalog/TryAPL/blob/7cc020a7b5a98306027634af8bf2d1a0a68482d4/style.css#L27-L31

abrudz commented 4 months ago

There was private history before then. @rikedyp might remember why we did this, but at this point, I think we can just always show it.

sloorush commented 4 months ago

I think I found out why it was intentionally hidden:

So it looks like this when I test on my PC browser emulating a phone (All good):

image

But it looks like this default on the phone (single line bar is hidden behind the bottom menu bar):

But if I zoom out and the browser enables a (kind of) full-screen mode it looks like this (All good):

abrudz commented 4 months ago

Ah yes, I remember now. The mobile browser will hide the bottom of the screen with a keyboard. We really should implement on-screen keyboard ourselves…

sloorush commented 4 months ago

Ah okay! I will try to get it to be visible or add the circle floating run button as we discussed above.