Making Editor Responsive.

[NitinBhasneria]

Currently, the editor is not responsive for the small devices. This issue aims in making the editor responsive.

[cypherean]

@NitinBhasneria to answer #490 (comment) , personally, I would prefer slightly modified design. I think the current design is not really space efficient? As a user, I would like something minimalistic and compact (I'm not sure if I am using the words in the right context here). Two things that could be modified to some extent for the same, in my opinion, are the guidelines and numbers. Some screenshots to explain what I mean,

1. The numbers left aligned and occupying a complete line:
   

2. The guidelines won't be visible till I click on the editor module content container but occupy almost the complete screen.
   

3. When I do click on the container it redirects to the guidelines which occupy more space than the content container's default size.
   

4. Some more extra space
   

These are some things that I feel could be modified. We can add a help button at the beginning which tells the user how each module is to be used? What do you all think?

[jywarren]

Copying from #490 --

@NitinBhasneria i believe the current approach is to use responsive and variably hidden/shown classes from Bootstrap to get the editor to work cleanly in both. However, please also take a look at @cesswairimu's work on a simple editor which we wanted to pilot alongside the main editor, for certain uses: #351 (and other related issues). Perhaps that could be adopted as the "mobile view" of the editor? It bears some discussion, what do people think?

[NitinBhasneria]

@jywarren Yea, this requires some discussion. Also, the points @shreyaa-sharmaa pointed are noticeable and should be solved.

[jywarren]

This might link to the convo with @Shulammite-Aso in #464 actually! Can you two sync up a bit about responsive classes in Bootstrap? Thank you so much!

[NitinBhasneria]

Things need to be fixed and the ways:

1. Hovering the tips: Tips take too much space in the editor module and so when the tip is not displayed the black space should be removed.
2. Toolbar: The present toolbar is very weird to look at the mobile screen.
3. Tips spacing: The tips are taking more spaces than required which looks unsystematic in the mobile screen.
4. The numbers left aligned and occupying a complete line: This can be fixed by having one line in front of this.

We need some discussion on the mobile design of the toolbar @Shulammite-Aso @jywarren @keshav234156 @Shreyaa-s. Please give your views.

[Shulammite-Aso]

1. Hovering the tips: Tips take too much space in the editor module and so when the tip is not displayed the black space should be removed.

@NitinBhasneria I notice this too.

2. Toolbar: The present toolbar is very weird to look at the mobile screen.

This certainly needs to be worked on. There's a discussion about the possible ways to make the toolbar look instead going on here publiclab/plots2#7067

3. Tips spacing: The tips are taking more spaces than required which looks unsystematic in the mobile screen.

i don't really get this part. You mind add a photo specifically for it?

4. The numbers left aligned and occupying a complete line: This can be fixed by having one line in front of this.

Also about this, do you mean having the numbering and help text on the same line?

You have eyes for details actually!!🎉

[NitinBhasneria]

1. Tips spacing: The tips are taking more spaces than required which looks unsystematic in the mobile screen.

i don't really get this part. You mind add a photo specifically for it?

You can see a lot of spaces between the lines than required.

1. The numbers left aligned and occupying a complete line: This can be fixed by having one line in front of this.

Also about this, do you mean having the numbering and help text on the same line?

Yes,

[cypherean]

How about adding a button that will open the detailed guidelines or something similar? It takes more space than the textarea, which seems a little strange. Also, it is only available when you click on the textarea and this feature looks neat in the desktop mode but not in mobile view in my opinion.

[NitinBhasneria]

How about adding a button that will open the detailed guidelines or something similar? It takes more space than the textarea, which seems a little strange. Also, it is only available when you click on the textarea and this feature looks neat in the desktop mode but not in mobile view in my opinion.

I was thinking the guidelines(with space) will appear when we focus on particular module. What do you think about this

[cypherean]

I think the guidelines would work the best if they guide a new user on the module use as well as not obstruct or hinder an experienced user in their work. What I wanted to highlight was a smooth transition from one module to to another. I'm not sure of how this would look but if you think that guidelines on focusing would serve the purpose, I'm down with it.
Also, that's a nice idea with the tooltips.

[NitinBhasneria]

Good idea @Shreyaa-s. @jywarren @keshav234156 @Shulammite-Aso have a look at the comments and give your views.

[fiona-byte]

Hi, is this issue up for fix? I'd love to work on it

[Sagarpreet]

Yes @fiona-byte , this is still an enhancement we want. Feel free to work on this 😄

[fiona-byte]

Thank you @Sagarpreet 🙂

[Charu271]

Hi @NitinBhasneria
Is this issue resolved ? If not I would like to work on it

[NitinBhasneria]

Hi @NitinBhasneria
Is this issue resolved ? If not I would like to work on it

Yea, there are still many works left in this issue. @fiona-byte If you are working on this please let us know. @Charu271 you can start the work if we get no reply from @fiona-byte

[Charu271]

Okay

[RaviAnand111]

Is this issue still open, I would like to work to make editor responsible.

[noobyogi0010]

Hi, @NitinBhasneria
Is this issue still up for fixing? If so can I work upon it?