From 0d61d6bb13e2080cf08fc8c6799143500dec6669 Mon Sep 17 00:00:00 2001
From: Sebastian Castro <sebastian.castro@protonmail.com>
Date: Thu, 12 Mar 2020 18:47:12 +0100
Subject: [PATCH] ui: on mobile, move the right toolbar to the bottom and make
 the top toolbar scrollable

Before this change there was always a single toolbar on the top, with both
Colibris and the legacy skin. When the screen size was reduced:

- the legacy skin would compact the icons in the toolbar (this was fine,
  indeed);
- Colibris would hide some formatting icons. This would hamper the functionality
  for mobile users.

After this change both the skins work in the same way, which is the following:
- when the screen gets smaller the right toolbar (the one with "export",
  "timeslider", and other buttons) goes to the bottom of the screen;
- when there are many icons, the toolbar keeps all of them, and to see them the
  user must drag the toolbar.

This behaviour will probably be changed before release, opting instead to show
a "+" button when there is an overflow, since this appears to be more
discoverable (see the discusison in #3697).

Do not tested with custom toolbar elements (toolbar.left and toolbar.right
configuration items in settings.json).

Fixes #3697.
---
 src/static/css/pad.css                             | 11 +++++------
 .../skins/colibris/src/components/toolbar.css      | 14 ++++++--------
 src/static/skins/colibris/src/layout.css           |  1 +
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/static/css/pad.css b/src/static/css/pad.css
index 7d5985946..10dd69eaa 100644
--- a/src/static/css/pad.css
+++ b/src/static/css/pad.css
@@ -1063,9 +1063,6 @@ input[type=checkbox] {
     right:100px;
   }
 
-  .toolbar ul.menu_right {
-    right:0px;
-  }
   .popup {
     width:100%;
     max-width:300px;
@@ -1074,7 +1071,7 @@ input[type=checkbox] {
 }
 
 /* Mobile devices */
-@media only screen and (min-device-width: 320px) and (max-device-width: 720px) {
+@media only screen and (max-width: 720px) {
     #users {
       top: auto;
       right:0px !important;
@@ -1108,9 +1105,11 @@ input[type=checkbox] {
     }
     .toolbar ul.menu_left {
       right:0px;
-      position: fixed;
+      position: relative;
+      display: flex;
       top: 0;
-      padding-top: 4px;
+      overflow-x: auto;
+      padding: 4px 0 0 0;
       border-bottom: 1px solid #ccc;
       z-index: 10;
     }
diff --git a/src/static/skins/colibris/src/components/toolbar.css b/src/static/skins/colibris/src/components/toolbar.css
index 78d774c30..ce19b5be8 100644
--- a/src/static/skins/colibris/src/components/toolbar.css
+++ b/src/static/skins/colibris/src/components/toolbar.css
@@ -67,7 +67,7 @@
 }
 
 .toolbar ul.menu_left {
-  left: 8px;
+  padding-left: 8px;
 }
 
 .toolbar ul.menu_right {
@@ -97,23 +97,21 @@
 }
 
 @media (max-width: 720px) {
-.toolbar ul {
+  .toolbar ul {
     height: 39px;
     background: none;
     background-color: transparent;
-    border: none !important;
-    padding: 0 !important;
     overflow-x: visible;
   }
   .toolbar ul.menu_left {
-    padding-top: 2px !important;
+    padding: 2px 0 0 0;
   }
   .toolbar ul.menu_right {
     left: 0;
-    padding-left: 8px !important;
-    padding-top: 8px !important;
+    padding-left: 8px;
+    padding-top: 8px;
     height: 35px !important;
-    border-top: 1px solid #d2d2d2 !important;
+    border-top: 1px solid #d2d2d2;
     background-color: white;
   }
   .toolbar ul li a {
diff --git a/src/static/skins/colibris/src/layout.css b/src/static/skins/colibris/src/layout.css
index 9a32962cf..4a9827dc4 100644
--- a/src/static/skins/colibris/src/layout.css
+++ b/src/static/skins/colibris/src/layout.css
@@ -32,6 +32,7 @@
   #outerdocbody.plugin-ep_author_neat { padding-left: 0; }
   #options-linenoscheck { display:none; }
   #options-linenoscheck ~ label { display:none; }
+  #outerdocbody { padding-left: 0; } /* side div is hidden now */
 }
 
 #outerdocbody.sidediv-hidden {