Make Views UI usable on mobile

Tested on my *cough* mobile computer by re-sizing the screen.

However it worked just fine, so marking RTBC.

Let's get one of the VDC people to eyeball this/give it the OK.

What about posting some screenshots, of before and after. I would like to post a review, but
some members of the VDC team has a clear backend oriented background.

I have to agree with Daniel, we are pretty much backend folks.

As long as my views UI is the same on my computer, I'm happy with this patch. I TRUST you guys in other words... :)

Let's get a before/after screenshot.

Before:

The 3 column layout becomes unusable at small screen widths

After:

The patch makes the 3 columns show below eachother at screen widths below 450px.

One problem and a question:

Is 450px the right breakpoint? I wouldn't mind this happening at around 600px or so, it really starts to get cramped from there.

- The text field for adding arguments in the preview section is too wide for really small screen widths, forcing a horizontal scroll bar:

Needs work for the unresponsive textfield right?

The screenshot showing how the horizontal scrollbar is caused:

I agree that the breakpoint should be higher than 450px, as the column widths at 450px are really tight and the resulting wrapping makes it hard to use. I think 600px is more reasonable. The Advanced column when open is cramped even at 600px, but any wider than 600px might be too wide.

Views edit page at 600px - 3 columns

Views edit page at 600px with Advanced options open

Views edit page at 599px - Switches to 1 column

The textfield description had a 'no wrap', which is why the width was forced. Without it, the date wraps to the next line and looks out of place. I added a media query for that style so that the description wraps for smaller widths and not on wider ones.

Textfield wrap fix

Patch attached uses a 600px breakpoint, includes the textfield wrap fix, and I also removed the LTR inline comment that was copied into the RTL sheet.

Wow this is way better to edit on the mobile device (browser chrome)!
The same experience with the built in browser of android 4.x

+++ b/core/modules/views/views_ui/css/views-admin-rtl.cssundefined
@@ -62,14 +62,16 @@
+@media screen and (min-width:37.5em) { /* 600px */

This will be the only 600px breakpoint in core, the other media queries used are

@media screen and (min-width:28.125em) { /* 450px */
and
@media screen and (min-width:45em) { /* 720px */

Now that I'm rereading the issue I see #8/#10 said that 450px was too small, is 720px too big?

We might just want to go consistently with the core defined one, it will be weird if some things are wrapped and others things aren't.

I checked with @dead_arm, she chose the 600px while overlay was off.
I would imagine that with overlay on, 720px would end up being more like 600px.
I wonder how the other media queries deal with overlay.

Screenshots:

Media query at 700px without overlay:

Media query at 700px with overlay:

Sorry #15 was at the wrong width.

Media query at 720px without overlay:

Media query at 720px with overlay:

I think the UI change still works well at 720px so patch with that change attached.

Great, I feel much better about this now that we're following core's lead.

I can't believe it only takes 2.11 KB to do what it says in the issue title. :) NICELY done!

Committed and pushed to 8.x. Thanks!