Make the CMS work for mobile (responsive UI)

[bdougie]

- Do you want to request a feature or report a bug? Enhancement: It would be nice to quickly check in on a post on the CMS from my phone

- What is the current behavior? The current UI has no consideration for mobile and non-usable from a mobile device.

- If the current behavior is a bug, please provide the steps to reproduce. Look at the https://cms-demo.netlify.com/ from your phone.

- What is the expected behavior? The editor can be ignored for now because it would require a larger scope. However, the editorial workflow and list of posts could be tweaked quickly fit on a mobile screen. Even it was just a list of post.

I recently had a situation where I was AFK and needed to ship a blog post from my phone. My only option was logging into GitHub and merging the PR, but it would have been nice to just hit publish from the CMS

- Please mention your node.js, and operating system version. iPhone 7

[sachgits]

am so waiting for this too

[erquhart]

@rafaelconde 🙏 🙏 🙏

I'd at-mention @danielpost but he's not a collaborator. Maybe I should add him as a collaborator...

[erquhart]

Oh snap it worked! Going to add him anyway :)

[danielpost]

@erquhart Sweet, thanks!

I'm too busy for the next ~2 weeks but I'm going to take a crack at designing potential interfaces for the CMS over the summer.

EDIT: With that being said, I think it's important to prioritize properly. Do we want to optimize the current state of the app for mobile, or do we want to wait for the new design? Do we start working on a mobile version when the main parts of the new design aren't even set in stone yet? I'm guessing #180 is a better place to discuss those issues though.

[erquhart]

@danielpost super excited that you're looking into this! I think it'd be okay to do this as a part of the greater design improvement effort, since it's slated for 1.0.

[tech4him1]

The main improvement that I see on this is just to make it responsive -- most of the general UI as it stands should work fine on mobile. @erquhart Do you think this should be done mainly after the general UI improvement, or as part of it?

[erquhart]

A little of both, there will be some basic effort to ensure that things are more or less responsive, but actually optimizing for mobile will probably happen post-1.0, as it goes beyond just the UI. The markdown editor, for example, might need a bit of work to function properly on a touch device.

[erquhart]

So this isn't addressed in 1.0, but it's sort of better. The real reason we aren't pushing mobile is that there are technical issues beyond layout responsiveness - for example, Slate doesn't officially support touch input. Making the CMS work on a mobile touch device will require a good amount of effort, but it's definitely something to push for.

[01ivr3]

there appear to be some traction for adding mobile support to Slate https://github.com/ianstormtaylor/slate/issues/1656#issuecomment-372186682

[tech4him1]

Updated Slate mobile issue: https://github.com/ianstormtaylor/slate/issues/1720.

[erquhart]

Closing #1339 as a duplicate of this.

[tech4him1]

Updated Slate issue: https://github.com/ianstormtaylor/slate/issues/2062.

[binaryoverload]

Any update on this? It'd be really handy to be able to edit my blog on mobile :)

[niyabits]

Any updated on this? Can I work on this issue if no one is doing that? I really want the feature.

[erquhart]

Hi @yashguptaz - we’re always open to community contributions! I would recommend starting with a small PR that addresses one aspect of this issue. Maybe try making the sidebar in the collections view responsive?

If you’re up for that, create an issue outlining what you want to tackle first, and maybe spell out design decisions there (Eg., where the collections sidebar would be on mobile, is it hidden, how does show/hide work, etc).

Let me know what you think!

_{Sent with GitHawk}

[edrex]

Fix for https://github.com/ianstormtaylor/slate/issues/2062 was released Nov 27 in 0.50.0 so updating netlify's slate deps currently 0.47 should help significantly (likely will cause some breakages that need to be fixed though).

[austincondiff]

We are building this into our UI refresh as part of #2557. Responsive design is something we are prioritizing in each screen and component as part of this effort. You are welcome to help as @erquhart mentioned. We are working off of the v3-ui-redesign branch.

[edrex]

I'm happy to help with testing, as mobile editing is important for me. Is that branch ready for testing?

[austincondiff]

@edrex Not yet. There is still quite a bit of work to do. You can preview it here, and check out the components in our Storybook here. There is a button you can use to toggle between various screen sizes here...

[Nixinova]

+1, mobile editing is really needed. Also, when editing a markdown widget while on mobile, it's completely broken: you can't type anything, only copy paste, as the cursor jumps all over the place and only half the stuff I type actually goes into the textarea. Here's me trying to type "Most of the stuff I type doesn't get put in the textarea", with spaces replaced by underscores: ___f____p_n___

[austincondiff]

Here are some mobile concepts...

[erquhart]

@austincondiff as I’ve mentioned in chat, these designs are 🔥🔥🔥

@edrex sorry for the late reply here but just so everyone is clear, upgrading to Slate >= 0.50 will require a complete and exhaustive overhaul of the markdown widget internals. This will definitely happen, just not at the top of the pile yet.

[eur2]

@austincondiff This is wonderful! @erquhart Any hope this responsive design is included in a future version of netlify-cms?

[truongoi]

While waiting for official mobile support, I’ve came out with my temporary CSS solution to include to your admin/index.html below your closing </body> tag so it can overwrite netlify-generated css.

admin.css

Screenshots are here

Hope it helps temporarily! Peace ✌🏼

[erezrokah]

Very cool @truongoi thanks for sharing!

[goodevilgenius]

I see a lot of commits on this issue. Is there any information on when there might be a release, even maybe a beta release?

For me, mobile is critical. I specifically decided to put together a Netlify CMS instance in order to post to my blog from my phone. I don't need a CMS when using my desktop.

[erezrokah]

Hi @goodevilgenius, there is a bigger effort on improving the UX and UI. You can track it here: https://github.com/netlify/netlify-cms/projects/9

Also see https://github.com/netlify/netlify-cms/issues/441#issuecomment-603811698

[erikkroes]

Just to add another voice, not being able to use a mobile phone is a real let down. This 3.5 year old issue is a reason for me too look for other options.

[blakedietz]

Just to add another voice, not being able to use a mobile phone is a real let down. This 3.5 year old issue is a reason for me too look for other options.

I strongly agree with this sentiment.

[clarkhacks]

Just throwing my had in the ring.