Custom date format field too small on mobile

[desrosj]

On Settings > General, there is a field for entering a custom PHP date format string. This field is too small on mobile. The date preview is also broken up into two lines.

In #34539, the narrow field issue was addressed in other locations. Increasing the max-width here (it has its own CSS definition) does not necessarily fix the problem for this field.

The preview changes every time the option is changed, but it is displayed next to the custom option. If we move the preview to its own line, it fixes the issue of the preview being split up, and allows the field to be widened quite a bit.

[afercia]

To clarify: the bold text "Preview:" would be visible also on large screens. Not that I'm opposed to that :) a11y-wise, visible text is always better then visually hidden one. Just thought was something to clarify.

[desrosj]

@afercia Thanks for clarifying! I forgot to mention that this change was for all orientations. I also was not sure if there are a11y benefits to putting the preview at the top as opposed to the bottom, or if there are any tags that we should use other than <span> for something like this. Would a <label> be beneficial?

[afercia]

@desrosj thanks! Hm, no I think that text doesn't need a label and it's fine it's to the bottom. FWIW the settings pages would be greatly improved for accessibility and that's one of the goals of the ​Settings API project (just an experiment for now, nothing official).

[SergeyBiryukov]

Let's handle this along with #34539.

[melchoyce]

#34539 is merged. What do we need to get this finished up?

[melchoyce]

In 41857:

Settings: Widen time/day input fields on General Settings page, and move the preview onto the next line.

Props desrosj, afercia.
Fixes #41603.

[Presskopp]

Spinner is no more working for me

[Presskopp]

There was also some discussion on slack:
​https://wordpress.slack.com/archives/C02RP4X03/p1510153717000397

[afercia]

The JS part to update the preview and display the spinner looks for a sibling element with class .example:
.siblings( '.example' )

This change introduces a paragraph so the example is not a sibling any longer and the JS part fails.

[afercia]

41603.2.diff​ updates the jQuery selectors used in the JS part to make the preview and spinner work again.

[afercia]

Of course, the spinners will still be displayed on the right of the preview:

[melchoyce]

Patch works as expected 👍

[helen]

That chaining is getting a little out of control but patch looks good to me. :)

[westonruter]

In 42134:

Settings: Fix date/time format previewing.

Props afercia.
Amends [41857].
Fixes #41603.

[westonruter]

In 42135:

Settings: Fix date/time format previewing.

Props afercia.
Amends [41857].
Fixes #41603 for 4.9.