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

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

6
src/static/css/pad/layout.css
View file

@ -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 */
}

14
src/static/css/pad/popup.css
View file

@ -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;
}
}
}
/* 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;
}

16
src/static/css/pad/popup_users.css
View file

@ -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;

71
src/static/css/pad/toolbar.css
View file

@ -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;
}
}
}
/* 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;
}