From 84d82b506bcf50925a0e3610710f6d6dffc8eda9 Mon Sep 17 00:00:00 2001 From: Sebastian Castro Date: Mon, 20 Apr 2020 15:51:02 +0200 Subject: [PATCH] css: Fix some problems with new UI refs #3907 (#3908) * css: Fix sidedivinner padding creating ui problems refs #3907 * css: Fix colorpicker for mobile --- src/static/css/iframe_editor.css | 1 + src/static/css/pad/popup.css | 3 +++ src/static/css/pad/popup_users.css | 6 +++-- src/static/skins/colibris/pad.css | 18 ++++++++++++-- .../skins/colibris/src/components/users.css | 7 ------ src/static/skins/colibris/src/layout.css | 24 +++++++------------ .../skins/colibris/src/pad-variants.css | 8 +++---- 7 files changed, 37 insertions(+), 30 deletions(-) diff --git a/src/static/css/iframe_editor.css b/src/static/css/iframe_editor.css index 538a476f2..12f5d1c5c 100644 --- a/src/static/css/iframe_editor.css +++ b/src/static/css/iframe_editor.css @@ -17,6 +17,7 @@ html.inner-editor { #outerdocbody iframe { flex: 1 auto; display: flex; + width: 100%; } #outerdocbody #sidediv { order: -1; /* display it on the first row positionning, i.e. on the left */ diff --git a/src/static/css/pad/popup.css b/src/static/css/pad/popup.css index 0bf6e9892..fd4312cd2 100644 --- a/src/static/css/pad/popup.css +++ b/src/static/css/pad/popup.css @@ -75,6 +75,9 @@ max-height: 80vh; overflow: auto; } + .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; diff --git a/src/static/css/pad/popup_users.css b/src/static/css/pad/popup_users.css index 345274c3f..0832383f2 100644 --- a/src/static/css/pad/popup_users.css +++ b/src/static/css/pad/popup_users.css @@ -100,8 +100,10 @@ input#myusernameedit:not(.editable) { } @media (max-width: 720px) { #mycolorpicker.popup { - right: 0; - left: auto; + top: auto; + bottom: 0; + left: auto !important; + right: 0 !important; } } #mycolorpicker.popup .btn-container { diff --git a/src/static/skins/colibris/pad.css b/src/static/skins/colibris/pad.css index 4ce494f60..c1cec179c 100644 --- a/src/static/skins/colibris/pad.css +++ b/src/static/skins/colibris/pad.css @@ -49,8 +49,22 @@ --main-font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; - --editor-padding: 40px 55px; - --editor-padding-top: 40px; + --editor-horizontal-padding: 55px; + --editor-vertical-padding: 40px; +} + +@media (max-width:1000px) { + :root { + --editor-horizontal-padding: 15px; + --editor-vertical-padding: 15px; + } +} + +@media (max-width:600px) { + :root { + --editor-horizontal-padding: 15px; + --editor-vertical-padding: 15px; + } } /* Default scrollbar values */ diff --git a/src/static/skins/colibris/src/components/users.css b/src/static/skins/colibris/src/components/users.css index 7a398b17c..beb498e3b 100644 --- a/src/static/skins/colibris/src/components/users.css +++ b/src/static/skins/colibris/src/components/users.css @@ -49,11 +49,4 @@ input#myusernameedit { #mycolorpickerpreview { border-radius: 50%; -} - -@media (max-width: 720px) { - #mycolorpicker { - right: 0; - left: initial; - } } \ No newline at end of file diff --git a/src/static/skins/colibris/src/layout.css b/src/static/skins/colibris/src/layout.css index b1305048b..8ec00627e 100644 --- a/src/static/skins/colibris/src/layout.css +++ b/src/static/skins/colibris/src/layout.css @@ -20,9 +20,10 @@ #outerdocbody iframe, #outerdocbody > #innerdocbody { max-width: 900px; padding: 40px 55px; - padding: var(--editor-padding); - padding-top: 40px; - padding-top: var(--editor-padding-top); + padding-left: var(--editor-horizontal-padding); + padding-right: var(--editor-horizontal-padding); + padding-top: var(--editor-vertical-padding); + padding-bottom: var(--editor-vertical-padding); box-shadow: none; border: 0; border-radius: 8px; @@ -32,8 +33,11 @@ color: var(--text-color); } #sidediv { - padding-top: 40px; /* = #innerdocbody iframe padding-top */ - padding-top: var(--editor-padding-top); + /* Padding must be the same than editor, otherwise it creates problem */ + padding-top: 40px; /* = #innerdocbody iframe vertical padding */ + padding-bottom: 40px; + padding-top: var(--editor-vertical-padding); + padding-bottom: var(--editor-vertical-padding); } /* Fixs author_hover does not take in account the document padding */ @@ -52,13 +56,9 @@ padding-top: 0; } #outerdocbody iframe, #outerdocbody > #innerdocbody { - padding: 20px; max-width: none; border-radius: 0; } - #sidediv { - padding-top: 20px !important; /* = #outerdocbody iframe padding-top */ - } .authortooltip { margin-top: 20px !important; } .caretindicator { margin-top: 0px !important; } @@ -71,12 +71,6 @@ #outerdocbody.plugin-ep_author_neat #sidediv { padding-right: 0 !important; } } -@media (max-width:600px) { - #outerdocbody iframe, #outerdocbody > #innerdocbody { - padding: 15px; - } - /* #sidediv is hidden at this size of screen */ -} @media only screen and (max-width: 720px) { #editorcontainerbox { margin-bottom: 39px; /* margin for bottom toolbar */ diff --git a/src/static/skins/colibris/src/pad-variants.css b/src/static/skins/colibris/src/pad-variants.css index 6841878fb..212acdfcf 100644 --- a/src/static/skins/colibris/src/pad-variants.css +++ b/src/static/skins/colibris/src/pad-variants.css @@ -189,8 +189,8 @@ .light-editor.light-background, .super-dark-editor.super-dark-background, .dark-editor.dark-background { - --editor-padding: 20px 35px; - --editor-padding-top: 20px; + --editor-horizontal-padding: 35px; + --editor-vertical-padding: 20px; } } @@ -218,8 +218,8 @@ } @media (min-width: 1001px) { .full-width-editor { - --editor-padding: 20px 35px !important; - --editor-padding-top: 20px !important; + --editor-horizontal-padding: 35px !important; + --editor-vertical-padding: 20px !important; } } .full-width-editor ::-webkit-scrollbar-track,