From 12bd617f511de1da4f4511617ffed6e2804ac9d7 Mon Sep 17 00:00:00 2001 From: Sebastian Castro Date: Sat, 19 Sep 2020 20:09:30 +0200 Subject: [PATCH] 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 | 6 +- src/static/css/pad/popup.css | 14 ++-- src/static/css/pad/popup_users.css | 16 +++-- src/static/css/pad/toolbar.css | 71 ++++++++++--------- src/static/js/pad_editbar.js | 10 +-- .../skins/colibris/src/components/toolbar.css | 39 +++++----- src/static/skins/colibris/src/layout.css | 7 -- 7 files changed, 82 insertions(+), 81 deletions(-) diff --git a/src/static/css/pad/layout.css b/src/static/css/pad/layout.css index 7b64936d7..e5b79c268 100644 --- a/src/static/css/pad/layout.css +++ b/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) { - #editorcontainerbox { - margin-bottom: 39px; /* Leave space for the bottom toolbar on mobile */ - } +.mobile-layout #editorcontainerbox { + margin-bottom: 39px; /* Leave space for the bottom toolbar on mobile */ } diff --git a/src/static/css/pad/popup.css b/src/static/css/pad/popup.css index 00fc8ca51..0eb000996 100644 --- a/src/static/css/pad/popup.css +++ b/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) { - top: auto; - bottom: 1rem; - } -} \ No newline at end of file +} +/* Move popup to the bottom, except popup linked to left toolbar, like hyperklink popup */ +.mobile-layout .popup:not(.toolbar-popup) { + top: auto; + left: 1rem; + right: auto; + bottom: 1rem; +} diff --git a/src/static/css/pad/popup_users.css b/src/static/css/pad/popup_users.css index 8b6ba82bc..ce4d14365 100644 --- a/src/static/css/pad/popup_users.css +++ b/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) { - #mycolorpicker.popup { - top: auto; - bottom: 0; - left: auto !important; - right: 0 !important; - } +.mobile-layout #users.popup { + right: 1rem; + left: auto; +} +.mobile-layout #mycolorpicker.popup { + top: auto; + bottom: 0; + left: auto !important; + right: 0 !important; } #mycolorpicker.popup .btn-container { margin-top: 10px; diff --git a/src/static/css/pad/toolbar.css b/src/static/css/pad/toolbar.css index bc258510a..1a398b199 100644 --- a/src/static/css/pad/toolbar.css +++ b/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; - bottom: 0; - right: 0; - left: 0; - border-top: 1px solid #ccc; - background-color: #f4f4f4; - padding: 0 5px 5px 5px; - } - .toolbar ul.menu_right > li { - margin-right: 8px; - } - .toolbar ul.menu_right > li.separator { - display: none; - } - .toolbar ul.menu_right > li a { - border: none; - background-color: transparent; - margin-left: 5px; - } - .toolbar ul.menu_right > li[data-key="showusers"] { - position: absolute; - right: 0; - top: 0; - bottom: 0; - margin: 0; - } - .toolbar ul.menu_right > li[data-key="showusers"] a { - height: 100%; - width: 40px; - border-radius: 0; - } -} \ No newline at end of file +} + +/* menu_right act like a new toolbar on the bottom of the screen */ +.mobile-layout .toolbar .menu_right { + position: fixed; + bottom: 0; + right: 0; + left: 0; + border-top: 1px solid #ccc; + background-color: #f4f4f4; + padding: 0 5px 5px 5px; +} +.mobile-layout .toolbar ul.menu_right > li { + margin-right: 8px; +} +.mobile-layout .toolbar ul.menu_right > li[data-key="showusers"] { + position: absolute; + right: 0; + top: 0; + bottom: 0; + margin: 0; +} +.mobile-layout .toolbar ul.menu_right > li[data-key="showusers"] a { + height: 100%; + width: 40px; + border-radius: 0; +} +.mobile-layout .toolbar ul.menu_right > li.separator { + display: none; +} +.mobile-layout .toolbar ul.menu_right > li a { + border: none; + margin-left: 5px; +} +.mobile-layout .toolbar ul.menu_right > li a:not(.selected) { + background-color: transparent; +} diff --git a/src/static/js/pad_editbar.js b/src/static/js/pad_editbar.js index 30d223059..0e40bb990 100644 --- a/src/static/js/pad_editbar.js +++ b/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 isMobileLayout = $('.toolbar .menu_right').css('position') === 'fixed'; - - if (menu_left && menu_left.scrollWidth > $('.toolbar').width() && isMobileLayout) { + var menuRightWidth = 280; // this is approximate, we cannot measure it because on mobileLayour it takes the full width on the bottom of the page + if (menu_left && menu_left.scrollWidth > $('.toolbar').width() - menuRightWidth || $('.toolbar').width() < 1000) { + $('body').addClass('mobile-layout'); + } + if (menu_left && menu_left.scrollWidth > $('.toolbar').width()) { $('.toolbar').addClass('cropped'); } } diff --git a/src/static/skins/colibris/src/components/toolbar.css b/src/static/skins/colibris/src/components/toolbar.css index 91e9991ed..7f3e71403 100644 --- a/src/static/skins/colibris/src/components/toolbar.css +++ b/src/static/skins/colibris/src/components/toolbar.css @@ -131,23 +131,24 @@ } } -@media (max-width: 800px) { - - .toolbar ul li { - margin: 5px 2px; - } - - .toolbar .menu_right { - border-top: 1px solid #d2d2d2; - border-top: var(--toolbar-border); - background-color: #ffffff; - background-color: var(--bg-color); - padding: 0; - } - - .toolbar ul li a:hover { background-color: transparent; } - - .toolbar ul li.separator { margin: 0; display: none; } +.mobile-layout .toolbar ul li { + margin: 5px 2px; +} +.mobile-layout .toolbar ul li.separator { + margin: 0 5px; +} +@media (max-width: 800px) { + .mobile-layout .toolbar ul li.separator { + display: none; + } +} +.mobile-layout .toolbar .menu_right { + border-top: 1px solid #d2d2d2; + border-top: var(--toolbar-border); + background-color: #ffffff; + background-color: var(--bg-color); + padding: 0; +} +.mobile-layout .toolbar ul li a:hover { + /* background-color: transparent; */ } - - diff --git a/src/static/skins/colibris/src/layout.css b/src/static/skins/colibris/src/layout.css index 6385cf140..1ec3886c8 100644 --- a/src/static/skins/colibris/src/layout.css +++ b/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 */ - } -} -