Making new topic editor exactly fit mobile screen space with mobile keyboard expanded


#1

Hello,
I was just thinking of creating a single topic to request features and another to report bugs for mobile, so anything related to mobile can be put there. I am writing here first just to make sure that it is appropriate as I cannot find similar topics. One of my reasons for this is because it seems to me that developments are focused on desktop users when it comes to user experience. Discourse works really well with desktop PC but there can be improvements for mobile devices. For example, when creating new topic on a mobile device one is presented with a small space to write.

It would be nice to have a full screen text editor like NodeBB has (the keyboard will take much of the screen space but still it utilises the whole screen).

Another reason is that increasingly people are spending more time on mobile devices than desktop PCs and people from some regions like southeast asia which is where I am from, use primarily mobile devices to access the internet.

I myself prefer using desktop PC but my target audiences probably dont have the same preference like I do.

Maybe dedicated topics or better yet, a category for mobile would encourage more feedbacks relating to mobile and can better give the development team ideas on what to prioritise when it comes to mobile.

I hope that my suggestion here is taken into notice as I dont see myself using any other forum software. No other open source forum software are developing at the same pace as Discourse or have the designs, features, and visions at the same level as Discourse. At first, I was not impressed with Discourse as I felt it was too minimalistic (not to mention that you also need much resource to run it) but after using it for a while, my eyes hurt when seeing other forum softwares :sweat_smile:. Anyway, keep up the good work! :thumbsup:


Composer full screen "not really full screen" in mobile
(Jeff Atwood) #2

Try expanding the keyboard, the editor expands when keyboard is visible. Did you actually test this before posting here? Here is a screenshot on iOS.

Last time we checked, it is impossible to make the editor fit the space exactly since the mobile browser does not report the size of the on-screen keyboard.


#3

Did you mean the size of the text editor? On my phone with latest Google Chrome, the editor is the same size whether the keyboard is visible or not. I see you edited the title, that is exactly what I would like to have but maybe a responsive text editor would be more accurate. The NodeBB text editor that is shown above will change its size depending on how much screen space is available which means it utilizes screen space efficiently and also adjusts its size when the keyboard is visible. This also means that you can read more easily what you typed when you close the keyboard which to me is a very good thing to have. Actually I found out the whole site is responsive, it changes its layout between mobile and desktop when you resize the browser.

So, a responsive text editor might take a lot of work?


(Jeff Atwood) #4

You’ll need to ask @sam about this…


(Sam Saffron) #5

Really hard, mobile provides no API to get the actual screen size excluding keyboard


(Christoph) #6

Excuse me if this is a naive question, but if we can’t get the editor to maximize automatically, wouldn’t it help to let users resize it manually?


#7

I was hoping it was easy to implement. Just out of curiosity, do you have any insight on how NodeBB does it? Is it that it uses separate interface for the text editor that makes it possible?

This is a good alternative. Maybe can also add extra functionality, the user resizes the editor to the desired size and Discourse saves the users preference with that device. Anytime the user creates a new topic with the same device, the editor comes with the size that was configured. But this seems to be a lot of work as well…

From what I found the editor is kind of responsive when you get the screen area to be very small for example when writing in landscape. The keyboard does not cover the text editor although the text area is squished. Would it be possible to make the text area reasonably big enough that it covers most of the screen area? I assume the text editor would resize itself when the keyboard is visible and would utilize the whole of the sceen. Although this seems to be the easier alternative, what constitute ‘reasonably big enough’ is going to be a problem since there are myriad of devices of different sizes out there.

Just another idea, what about some kind of buttons that let you choose what size you want the text editor to be in, like small, medium, large etc? There is still some space on top of the text editor to put some buttons. This seems to be quite practical and an addition to @tophee idea.


(David Taylor) #8

It looks like they make the editor fill the entire screen, including the space under the keyboard. That means that you can be typing, and content ends up behind the keyboard, requiring you to manually scroll to see it.


#9

The text editor is responsive and it properly resizes when the keyboard is visible. So, the keyboard does not cover the screen.


(David Taylor) #10

On my iPhone the text ends up behind the keyboard:


#11

Oh. I am using android, maybe that is why I get different behaviour. Is it the same with Discourse as well? Do your keyboard covers the screen as well if you try to write in landscape? Anyway thank you informing me about that, I would not have knew.


#12

So, after seeing @David_Taylor post I thought the solution to this problem could be a simple one. I opened up the topic editor and edit this css code

#reply-control.edit-title.open
{
     max-height: 100%;
     height: 250px;
}

I changed the height value to 100%

#reply-control.edit-title.open
{
     max-height: 100%;
     height: 100%;
}

And I get a responsive topic editor. I don’t know how to change css with mobile so I am using desktop Chrome here. Using the provided device simulator, the text editor also adjusts itself when I opened up the screen keyboard as shown below. Left without keyboard and right with keyboard.

So being a very simple solution, is the reason that the fixed height is used because a responsive topic editor would not work well with all platforms? Would an iphone behave the same way like what @David_Taylor showed with NodeBB (keyboard covers the editor) when you make the topic editor to be responsive?

Changing css code is the easy part, anybody can do that, the hard part is to implement it and I have no idea how to do that :sweat_smile:. I was thinking having a button that toggles between normal text editor and responsive text editor would be a practical implementation. Can a plugin do this?


(Christoph) #13

Wow, this is fantastic! I added this to my theme (settings - > customize - > themes) and it just works. Infinitely better UX compared to before, at least from what I can see after brief testing (Android, Galaxy S7).

The big improvement is that only the keyboard moves, not the editor.

If it turns out that this doesn’t work for some devices, you could have different themes and let people choose the one that works for them. I also wonder what the reason was for the current design decision…

The provided code only works for new topics, though. What would be the selector for replies (and possibly othet variants of the editor)?


(Jeff Atwood) #14

Is this an acceptable solution @sam?


(Sam Saffron) #15

I have been thinking about this… if height: 100% works perfect on android we should just add it at least for android, iPhone can have a slightly suckier experience.

@tgxworld can you confirm that height 100% works perfect on your android (apply it after you click on the composer)


(Christoph) #16

What would be even better is to have the “Create Topic”, “Cancel”, and “Upload” buttons stick to the bottom of the screen and the keyboard slides over them. More real estate for text with the bonus benefit that you don’t hit “Create Topic” accidentally (it has happened to me more than once).

But I don’t know if that can be achieved via CSS.


(Jeff Atwood) #17

ping @falco also, if this is an easy fix we should do it.


(Rafael dos Santos Silva) #19

I created a new user selectable here on Meta to test this:

I must admit, it’s a pretty good experience for new topic on Android. And since on new Topics, you won’t be referring to current content so often I believe is a worth trade-off.

If anyone want to test it just select the theme on your mobile.


Help us test the restyled composer
Theme keeps reverting to "Full Height Composer"
(Sam Saffron) #20

What happens with the keyboard? can you do a screenshot when the keyboard is open?


(Rafael dos Santos Silva) #21

There is a problem @sam: clicking on the “physical” back button, goes back in browser history, but since the composer cover it all, you don’t notice it. And you keep clicking until you are outside Discourse :thinking: