mirrors/etherpad-lite
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2025-04-20 23:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source 
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
This commit is contained in:
Sebastian Castro 2020-09-19 20:09:30 +02:00 • committed by GitHub
parent 299bd962b6
commit 12bd617f51
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 82 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/static/js/pad_editbar.js
View file

@ -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');
}
}