Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make the CMS work for mobile (responsive UI) #441

Open
bdougie opened this issue Jun 2, 2017 · 28 comments
Open

Make the CMS work for mobile (responsive UI) #441

bdougie opened this issue Jun 2, 2017 · 28 comments

Comments

@bdougie
Copy link
Contributor

@bdougie bdougie commented Jun 2, 2017

- 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.

img_1018 png
img_1019

- 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

@bdougie bdougie added the improvement label Jun 2, 2017
@sachgits
Copy link

@sachgits sachgits commented Jun 24, 2017

am so waiting for this too

@erquhart
Copy link
Member

@erquhart erquhart commented Jun 28, 2017

@rafaelconde 🙏 🙏 🙏

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

@erquhart
Copy link
Member

@erquhart erquhart commented Jun 28, 2017

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

@danielpost
Copy link

@danielpost danielpost commented Jul 1, 2017

@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
Copy link
Member

@erquhart erquhart commented Jul 2, 2017

@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.

@erquhart erquhart added this to the 1.0.0 milestone Sep 8, 2017
@erquhart erquhart added this to Sprint 3 (10/12 - 10/25) in Sprint Planning | Sprint 6 (11/23 - 12/6) Sep 13, 2017
@erquhart erquhart removed this from Sprint 3 (10/12 - 10/25) in Sprint Planning | Sprint 6 (11/23 - 12/6) Sep 13, 2017
@erquhart erquhart added this to Ready for Assignment in Sprint Planning | Sprint 6 (11/23 - 12/6) Oct 11, 2017
@tech4him1
Copy link
Contributor

@tech4him1 tech4him1 commented Oct 12, 2017

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
Copy link
Member

@erquhart erquhart commented Oct 23, 2017

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 erquhart removed this from the 1.0.0 milestone Oct 25, 2017
@erquhart erquhart removed this from Ready for Assignment in Sprint Planning | Sprint 6 (11/23 - 12/6) Oct 25, 2017
@erquhart
Copy link
Member

@erquhart erquhart commented Dec 9, 2017

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.

@erquhart erquhart changed the title Mobile Considerations in the design Make the CMS work for mobile Dec 9, 2017
@erquhart erquhart removed the help wanted label Dec 19, 2017
@01ivr3
Copy link

@01ivr3 01ivr3 commented Mar 16, 2018

there appear to be some traction for adding mobile support to Slate
ianstormtaylor/slate#1656 (comment)

@tech4him1
Copy link
Contributor

@tech4him1 tech4him1 commented May 9, 2018

Updated Slate mobile issue: ianstormtaylor/slate#1720.

@binaryoverload
Copy link

@binaryoverload binaryoverload commented Sep 7, 2019

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

@yashguptaz
Copy link

@yashguptaz yashguptaz commented Nov 2, 2019

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

@erquhart
Copy link
Member

@erquhart erquhart commented Nov 2, 2019

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
Copy link

@edrex edrex commented Mar 16, 2020

Fix for ianstormtaylor/slate#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
Copy link
Collaborator

@austincondiff austincondiff commented Mar 16, 2020

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
Copy link

@edrex edrex commented Mar 16, 2020

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

@austincondiff
Copy link
Collaborator

@austincondiff austincondiff commented Mar 16, 2020

@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...
image

@Nixinova
Copy link

@Nixinova Nixinova commented Mar 24, 2020

+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
Copy link
Collaborator

@austincondiff austincondiff commented Mar 24, 2020

Here are some mobile concepts...

m01-dashboard m02-dashboard-scrolled m03-collection-view-thumb m04-collection-view-list m05-collection-view-scrolled m06-editor-view m07-editor-view-scrolled m08-editor-view-new

@erquhart
Copy link
Member

@erquhart erquhart commented Mar 25, 2020

@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
Copy link

@eur2 eur2 commented Apr 12, 2020

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

@truongoi
Copy link

@truongoi truongoi commented Apr 25, 2020

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
Copy link
Collaborator

@erezrokah erezrokah commented Apr 26, 2020

Very cool @truongoi thanks for sharing!

yoshiki-0428 added a commit to yoshiki-0428/trip-blog that referenced this issue May 6, 2020
yoshiki-0428 added a commit to yoshiki-0428/trip-blog that referenced this issue May 6, 2020
yoshiki-0428 added a commit to yoshiki-0428/trip-blog that referenced this issue May 6, 2020
yoshiki-0428 added a commit to yoshiki-0428/trip-blog that referenced this issue May 6, 2020
yoshiki-0428 added a commit to yoshiki-0428/trip-blog that referenced this issue May 6, 2020
yoshiki-0428 added a commit to yoshiki-0428/trip-blog that referenced this issue May 6, 2020
dihak added a commit to digitalkode/digitalkode that referenced this issue Aug 18, 2020
@goodevilgenius
Copy link

@goodevilgenius goodevilgenius commented Aug 18, 2020

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
Copy link
Collaborator

@erezrokah erezrokah commented Aug 19, 2020

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 #441 (comment)

@erikkroes
Copy link

@erikkroes erikkroes commented Dec 11, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Linked pull requests

Successfully merging a pull request may close this issue.

None yet