client - mobile - Number of options for focus hours is reduced

[stephencmorton]

On small screens, the number of options for focus hours (1, 2, 3, 6, 12, 24)
is reduced. On mobile, focus options are displayed in a vertical manner and
were stealing valuable space from the BG/treatment graph itself.

Note that although "1 hour" is an option, it is effectively "hidden" from most people because you have to know to click on the word "Hours". (In future, I'd like to further improve this by making it a select element which is rendered the same was as today on big screens, but renders as a normal select on mobile which would be a picker wheel. But that's for the future.)

I don't love using !important but I don't think there's any big rule of cascading that I'm breaking by using it in this situation.

[sulkaharo]

How small screens are you thinking of? AFAIK most people actually display the smaller amount of hours you're hiding, so if this is merged as is, I'm assuming a lot of users will have their preferred option missing. For making the menu smaller, a refactor I've considered for a long time is moving the ... menu with prediction picking to the settings menu.

[stephencmorton]

@sulkaharo From the diff (if you keep opening up the context) you can see that the two modifications are in the @media (max-height: 480px) and (max-width: 400px) and @media (max-width: 400px) blocks of the .css file. So we're talking about phone-sized, but not even big phone sized. (e.g. iPhone 6: affected, iPhone 6Plus: not affected)

I'd also like to add pinch-to-zoom for mobile to make this all unnecessary.

There was a recent addition that added one more option to the hours added (I can't remember if "2" or "3" was added) and it's just far too much vertical space used now, on mobile.

Yes, the ... menu really does belong in the settings. That would improve things immenseley.

(I'll re-submit against dev as well.)

[sulkaharo]

The recent change to add one more hour option actually made the menu narrower in the total pixels needed (at least on my screen), as each option used to have "HR" text as part of the selection, so in terms of layout the change should not have changed anything. Let's see about moving the ... to see if that solves things. Please post a screen cap showing any layout issues - I don't have a phone currently that'd have small enough a screen to repro any issues. :(

[stephencmorton]

See attached screenshot. On small screens, the options are vertical so the removal of "HR" made no difference.

The reason I thought that moving ... would be beneficial is not direclty because of saved vertical space, it's just because then all of the HTML elements in the focus-range ul element would relate to focus range and could be handled in a generic way. Currently, they're all handled one way except for ... which is completely different.

(The different "brush" display being a white-shaded rectangle is something I'm experimenting with, please ignore. The reason you can read the axes --that they're not just a jumble of overlapping numbers-- is the result of my other pull request #5512 .)

[stephencmorton]

@sulkaharo I will withdraw this PR and work on a new change on the assumption that ‘...’ will move.