Until now, the "mobile layout" (with right toolbar on bottom of the screen) was displayed only when screen was smaller than 800px. It made the toolbar break for screen about 1000px when a lot of plugins are in the toolbar.
Now instead, we detect with javascript when the toolbar icons overflow the natural space available, and we switch in "mobile layout" in such case
- simplify template
- use flexboxes
- simplify javascript code
- remove some obsolete code adjusting a background-position when using steppers buttons
- add comments and remove old code
No more javascript to change css properties
Remove a number of useless tables
Try to stop positioning elements with absolute, but use flex-boxes instead
Adds comment to pad template, and move popups and chatbox inside editorcontainerbox (so absolute positioning is straightforward)
Make the design more consistent: always use base color, font-family and font-size. USe relative font size if necessary (.9rem instead of 11px for example)
Remove two columns in the popups, just use one column
Remove css meant to support old browser (like -webkit-box-shadow, -moz-box-shadow). Those css rules are quite common now, and If we want to support very old browser, we should use clean-css or other tools to add them automatically
Fix previous commit. As "force reconnect" buttons have all the same id
on DOM, on the previous commit we were only disallowing the first button
with that id on DOM -- "userdup" -- to be closed by a click on editor.
Casually the tests were using the same error to simulate a "force
reconnect", so even the tests were not getting the issue.
If a "force reconnect" message is displayed to the user, it means the
only way to go back to a healthy state is to reload the pad. So we
cannot hide this kind of message, like what is done with other modals
(eg: "settings").
