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

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

39
src/static/skins/colibris/src/components/toolbar.css
View file

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

7
src/static/skins/colibris/src/layout.css
View file

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