Default skin needs polish

[JohnMcLear]

I love the new default skin but it needs polish, especially around when the browser width is < 400px as you lose formatting buttons etc. Afaik this was all handled before so should be handled with any new versions with a copy/paste :)

[muxator]

For Colibris skin CCing @seballot

Edit: it should have been:
ccing @seballot who developed Colibris together with @mrflos, proposed it to the project, and donated his time for achieving the integration. Thanks Seballot!

:)

[seballot]

Hello !
Yes Indeed some formatting buttons disappears because I didn't want the toolbar to be too large and hide the text. I think before it was like this (or maybe this etherpad is not up to date)

But we might find an in between solution, like a "+" button in the toolbar to display the hidden formatting buttons? It's just a bit more work.

I'm not a mobile user, so please help me to understand the need !

[muxator]

There was an attempt to fix this issue with #3703, but I guess we need to do another try.

I would be ok with putting a "+" button when the screen gets too narrow (to leave as much space as possible to the text), but other solutions could be ok, as well.

One thing that we might want to ensure is that the solution works with both the legacy skin and Colibris.

[seballot]

ok, trying to fix right now

[seballot]

I found an easier solution: allow horizontal scroll on the toolbar for small screen? WDYT?
It's not perfect (people need to know that they can scroll), but I think formatting a pad on a mobile screen is not so used, so would say that is enough...

[pkrasicki]

This is a clever solution, but having to use a scrollbar to access buttons won't be convenient for users. You should instead break the bar into two rows, when it doesn't fit on screen.

[seballot]

The problem with going with 2 rows, is that if your etherpad install have a lot of fonctionalities, it will goes with 3 rows, maybe 4, and at the end you do not get the text, which the more important thing. That why I think the multi rows toolbar is not a solution

If you guys think scrolling is not a good solution either, then we need to add this "+" button to display all the buttons.

re your PR @pkrasicki, it's breaking the white background on colibris skin, and also some paddings. Also I made a fix to remove the left margin when the gutter is hidden

Seems like we are working both on the same thing. if it's fine by you, could I handle this issue?

[pkrasicki]

Sure, go ahead.

Edit:
One more thing, though. It's ok, because this task needs more work than I originally though, but it seems that I solved this problem for nothing and my time ended up being wasted. In the future please don't create a PR after someone to solve the exact same problem that they are working on.

[muxator]

Quick test of #3709 with my Firefox 74. Some questions follow.

This is the effect on Colibris:

This is the effect on the legacy skin:

@seballot, I did not have the time to test what happens with more icons. How do the toolbars get split? Do they arrange in multiple rows? Also, the commit message needs to describe what changed (referencing a Github issue is ok for quick work, but cannot end up as-is in the history). I can take care of it of it's easier for you.

@pkrasicki: thanks for your proposal. Even if it did not get merged, your effort was useful to bring up the discussion and reach a better solution overall. Probably we would not have had anything wasn't for your initiative. Thanks again.