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

css: refactor element positioning

Browse source 
No more javascript to change css properties
Remove a number of useless tables
Try to stop positioning elements with absolute, but use flex-boxes instead

Adds comment to pad template, and move popups and chatbox inside editorcontainerbox (so absolute positioning is straightforward)

Make the design more consistent: always use base color, font-family and font-size. USe relative font size if necessary (.9rem instead of 11px for example)

Remove two columns in the popups, just use one column

Remove css meant to support old browser (like -webkit-box-shadow, -moz-box-shadow). Those css rules are quite common now, and If we want to support very old browser, we should use clean-css or other tools to add them automatically
This commit is contained in:
Sebastian Castro 2020-04-02 14:36:49 +02:00 • committed by muxator
parent 0603bf8097
commit 5fd6aeeea6
20 changed files with 839 additions and 1224 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,41 +1,45 @@
html {
font-size: 62.5%;
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
#editbar {
height: auto;
}
#editorcontainerbox {
position: absolute;
bottom: 0;
top: 0;
width: 100%;
}
#editorcontainer {
position: absolute;
top: 37px; /* + 1px border */
left: 0px;
right: 0px;
bottom: 0px;
z-index: 1;
flex: 1 auto;
position: relative; /* for nested popup to use absolute positionning */
/* Required to be able to scroll on iOS: */
-webkit-overflow-scrolling: touch;
/* For sticky chat */
display: flex;
flex-direction: row;
}
#editorcontainer iframe {
#editorcontainerbox #editorcontainer {
display: flex; /* transfer flex properties to nested elements, here the iframe */
height: 100%;
flex: 1 auto;
}
#editorcontainerbox #editorcontainer iframe {
width: 100%;
padding: 0;
margin: 0;
left: 0; /* Required for safari fixes RTL */
}
iframe {
position: absolute
#editorcontainerbox .sticky-container { /* container for #users, #chat, #toc (table of content) and so on... */
display: flex;
flex-direction: column;
width: 200px;
max-width: 40%;
flex-shrink: 0;
}
@media all and (max-width: 400px) {
#editorcontainer {
top: 68px;
}
#editorcontainerbox .sticky-container:not(.stikyUsers):not(.stickyChat) {
width: 0; /* hide when the container is empty */
}
@media only screen and (max-width: 720px) {
#editorcontainer {
margin-bottom: 33px
#editorcontainerbox {
margin-bottom: 37px; /* Leave space for the bottom toolbar on mobile */
}
}
}