Netlify-cms: Make the CMS work responsively

[growdigital]

- Do you want to request a feature or report a bug?

Bug

- What is the current behavior?

2 column layout has minimum width of 800px. Layout is cropped below that.

- If the current behavior is a bug, please provide the steps to reproduce.

Resize browser to below 800px.

- What is the expected behavior?

2 columns collapse in to 1 column, Quick Add & Logout buttons fold under Content and Media links.

Issue 411 is entitled 'Make the CMS work for mobile' - however, this issue is far more limited in scope (and thus easier to implement) and doesn't concern itself with mobile specific problems:
https://github.com/netlify/netlify-cms/issues/441

- Please mention your versions where applicable.

Netlify CMS version: ^1.0.0
Browser version: Firefox 59.0.2
Node.JS version: v8.9.1
Operating System: MacOS 10.13.4

- Please link or paste your config.yml below if applicable.

[erquhart]

Agreed, just addressing the CSS stuff so it's at least responsive is a sensible step. For the immediate purposes of this issue, I'd be okay with someone opening a PR and hacking it out there.

Design thoughts: I'm not certain combining the two editor columns to one would work well - we should probably hide it entirely and provide a floating button to show/hide it. For the collections view, maybe similar treatment for the collections menu on the left and the collections themselves go single column.

[growdigital]

I'm not certain combining the two editor columns to one would work well

Yep, funnily enough was thinking the same thing today whilst watering the polytunnel… Is there a preferred React show/hide button way of doing things, like a standard React animations library? (please excuse my React ignorance!)

I’ll try to have a look at it one evening this week. Do you have anything like a browser/device matrix that you test against? Something like this:
http://www.bbc.co.uk/guidelines/futuremedia/technical/browser_support.shtml#support_table

I've never hacked a React app before, so should be interesting 🙂

[tech4him1]

In my opinion, our basic (must have) browser support would be the latest two versions of the major browsers. Nice to haves would be other browsers with high usage.

Supported Browsers (link):

last 2 Chrome versions
last 2 Opera versions
last 2 Firefox versions
Firefox ESR # This is not currently in our build, but it should be added.
last 2 Edge versions
last 2 Safari versions
last 2 iOS versions
last 2 ChromeAndroid versions

Other Browsers (link)

[growdigital]

Brilliant, thank you 🙂. Is GitHub best place for these type of questions, or Gitter?

[erquhart]

Questions may get a faster response on Gitter, but either is valid since it's relevant to the issue.

_{Sent with GitHawk}

[robertkarlsson]

This will probably be easier to tackle if the post-css config allows for nesting the media-query rules like its done for the /website part of the project. Is there a reason why this is not in the post-css config for the cms?

[erquhart]

Nesting is working, are you seeing otherwise?

[robertkarlsson]

You are 100% correct, my bad. I tested it and couldn't get the media queries to trigger when nested, but now it worked without a problem.

[zivc]

Any movement on this? Can't upload new images from mobile which is frustrating.

[erquhart]

It's open for contribution, no one has taken it on yet.

[jaybonthius]

Would love to see this issue tackled. Personally, Netlify CMS wins on all fronts against Forestry.io except for mobile usability.

[erquhart]

Just realizing this is a duplicate of https://github.com/netlify/netlify-cms/issues/441 - please watch that one for movement on this matter.

[growdigital]

@erquhart it’s subtly different! Making interface responsive is on the road to making it mobile friendly, as not dealing with issues with Slate editor on Android. hth 🙂

[erquhart]

I'd say this issue is more specific, while that issue covers both responsiveness and mobile-specific bugs. From the OP:

The current UI has no consideration for mobile and non-usable from a mobile device.

I think we can cover both in that issue since neither issue is claimed right now anyway, and break down to separate issues if someone commits to tackling a specific concern.

[growdigital]

Good luck! Hope it’s all going well 🙂

[erquhart]

Thanks Jake!