css: Improve toolbar responsiveness for small screen (#4322)

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

src/static/css/pad/layout.css

@@ -47,8 +47,6 @@ body {
   width: 0; /* hide when the container is empty */
 }
 
-@media only screen and (max-width: 800px) {
+.mobile-layout #editorcontainerbox {
-  #editorcontainerbox {
+  margin-bottom: 39px; /* Leave space for the bottom toolbar on mobile */
-    margin-bottom: 39px; /* Leave space for the bottom toolbar on mobile */
-  }
 }

src/static/css/pad/popup.css

@@ -78,9 +78,11 @@
   .popup#users .popup-content {
     overflow: visible;
   }
-  /* Move popup to the bottom, except popup linked to left toolbar, like hyperklink popup */
+}
-  .popup:not(.toolbar-popup) {
+/* Move popup to the bottom, except popup linked to left toolbar, like hyperklink popup */
-    top: auto;
+.mobile-layout .popup:not(.toolbar-popup) {
-    bottom: 1rem;
+  top: auto;
-  }
+  left: 1rem;
-}
+  right: auto;
+  bottom: 1rem;
+}

src/static/css/pad/popup_users.css

@@ -98,13 +98,15 @@ input#myusernameedit:not(.editable) {
   right: calc(100% + 15px);
   z-index: 101;
 }
-@media (max-width: 800px) {
+.mobile-layout #users.popup {
-  #mycolorpicker.popup {
+  right: 1rem;
-    top: auto;
+  left: auto;
-    bottom: 0;
+}
-    left: auto !important;
+.mobile-layout #mycolorpicker.popup {
-    right: 0 !important;
+  top: auto;
-  }
+  bottom: 0;
+  left: auto !important;
+  right: 0 !important;
 }
 #mycolorpicker.popup .btn-container {
   margin-top: 10px;

src/static/css/pad/toolbar.css

@@ -139,37 +139,40 @@
   .toolbar ul li.separator {
     width: 5px;
   }
-  /* menu_right act like a new toolbar on the bottom of the screen */
+}
-  .toolbar .menu_right {
+
-    position: fixed;
+/* menu_right act like a new toolbar on the bottom of the screen */
-    bottom: 0;
+.mobile-layout .toolbar .menu_right {
-    right: 0;
+  position: fixed;
-    left: 0;
+  bottom: 0;
-    border-top: 1px solid #ccc;
+  right: 0;
-    background-color: #f4f4f4;
+  left: 0;
-    padding: 0 5px 5px 5px;
+  border-top: 1px solid #ccc;
-  }
+  background-color: #f4f4f4;
-  .toolbar ul.menu_right > li {
+  padding: 0 5px 5px 5px;
-    margin-right: 8px;
+}
-  }
+.mobile-layout .toolbar ul.menu_right > li {
-  .toolbar ul.menu_right > li.separator {
+  margin-right: 8px;
-    display: none;
+}
-  }
+.mobile-layout .toolbar ul.menu_right > li[data-key="showusers"] {
-  .toolbar ul.menu_right > li a {
+  position: absolute;
-    border: none;
+  right: 0;
-    background-color: transparent;
+  top: 0;
-    margin-left: 5px;
+  bottom: 0;
-  }
+  margin: 0;
-  .toolbar ul.menu_right > li[data-key="showusers"] {
+}
-    position: absolute;
+.mobile-layout .toolbar ul.menu_right > li[data-key="showusers"] a {
-    right: 0;
+  height: 100%;
-    top: 0;
+  width: 40px;
-    bottom: 0;
+  border-radius: 0;
-    margin: 0;
+}
-  }
+.mobile-layout .toolbar ul.menu_right > li.separator {
-  .toolbar ul.menu_right > li[data-key="showusers"] a {
+  display: none;
-    height: 100%;
+}
-    width: 40px;
+.mobile-layout .toolbar ul.menu_right > li a {
-    border-radius: 0;
+  border: none;
-  }
+  margin-left: 5px;
-}
+}
+.mobile-layout .toolbar ul.menu_right > li a:not(.selected) {
+  background-color: transparent;
+}

src/static/js/pad_editbar.js

@@ -317,12 +317,14 @@ var padeditbar = (function()
     {
       // reset style
       $('.toolbar').removeClass('cropped')
+      $('body').removeClass('mobile-layout');
       var menu_left = $('.toolbar .menu_left')[0];
 
-      // on mobile the menu_right get displayed at the bottom of the screen
+      var menuRightWidth = 280; // this is approximate, we cannot measure it because on mobileLayour it takes the full width on the bottom of the page
-      var isMobileLayout = $('.toolbar .menu_right').css('position') === 'fixed';
+      if (menu_left && menu_left.scrollWidth > $('.toolbar').width() - menuRightWidth || $('.toolbar').width() < 1000) {
-
+        $('body').addClass('mobile-layout');
-      if (menu_left && menu_left.scrollWidth > $('.toolbar').width() && isMobileLayout) {
+      }
+      if (menu_left && menu_left.scrollWidth > $('.toolbar').width()) {
         $('.toolbar').addClass('cropped');
       }
     }

src/static/skins/colibris/src/components/toolbar.css

@@ -131,23 +131,24 @@
   }
 }
 
-@media (max-width: 800px) {
+.mobile-layout .toolbar ul li {
-
+  margin: 5px 2px;
-  .toolbar ul li {
+}
-    margin: 5px 2px;
+.mobile-layout .toolbar ul li.separator {
-  }
+  margin: 0 5px;
-
+}
-  .toolbar .menu_right {
+@media (max-width: 800px) {
-    border-top: 1px solid #d2d2d2;
+  .mobile-layout .toolbar ul li.separator {
-    border-top: var(--toolbar-border);
+    display: none;
-    background-color: #ffffff;
+  }
-    background-color: var(--bg-color);
+}
-    padding: 0;
+.mobile-layout .toolbar .menu_right {
-  }
+  border-top: 1px solid #d2d2d2;
-
+  border-top: var(--toolbar-border);
-  .toolbar ul li a:hover { background-color: transparent; }
+  background-color: #ffffff;
-
+  background-color: var(--bg-color);
-  .toolbar ul li.separator { margin: 0; display: none; }
+  padding: 0;
+}
+.mobile-layout .toolbar ul li a:hover {
+  /* background-color: transparent; */
 }
-
-

src/static/skins/colibris/src/layout.css

@@ -46,10 +46,3 @@
     border-radius: 0;
   }
 }
-
-@media only screen and (max-width: 800px) {
-  #editorcontainerbox {
-    margin-bottom: 39px; /* margin for bottom toolbar */
-  }
-}
-