From ef99cde11398731dad8b85fd2c5429914b1f7c27 Mon Sep 17 00:00:00 2001 From: Sebastian Castro Date: Tue, 17 Mar 2020 13:45:21 +0100 Subject: [PATCH 1/5] colibris: fixs toolbar popup (settings, embed, import...) and chat on mobile --- .../skins/colibris/src/components/chat.css | 6 ++-- .../skins/colibris/src/components/popup.css | 35 +++++++++++++++++++ .../skins/colibris/src/components/toolbar.css | 5 +-- .../skins/colibris/src/components/users.css | 11 ------ src/static/skins/colibris/src/layout.css | 8 +++++ 5 files changed, 50 insertions(+), 15 deletions(-) diff --git a/src/static/skins/colibris/src/components/chat.css b/src/static/skins/colibris/src/components/chat.css index 7a2979e02c1..18cafc3f37d 100644 --- a/src/static/skins/colibris/src/components/chat.css +++ b/src/static/skins/colibris/src/components/chat.css @@ -105,8 +105,10 @@ bottom: 44px; } - #chatbox { - width: 100%; + #chatbox, #chatbox.stickyChat { + width: 100% !important; + height: 50% !important; + top: initial !important; right: 0; } diff --git a/src/static/skins/colibris/src/components/popup.css b/src/static/skins/colibris/src/components/popup.css index 7b3c0381b7a..f985c744ea6 100644 --- a/src/static/skins/colibris/src/components/popup.css +++ b/src/static/skins/colibris/src/components/popup.css @@ -18,6 +18,7 @@ .popup h1 { margin-bottom: 15px; + font-size: 2em !important; } .popup h2 { @@ -28,3 +29,37 @@ margin: 10px 0; } +@media (max-width: 720px) { + .popup .column { + width: 100%; + margin-bottom: 20px; + } + .popup #exportColumn { + padding: 0; + width: 100%; + } + .popup .exportlink { + margin: 0 0 10px 0; + } + + .popup h1 { font-size: 1.8em !important; } + + #connectivity, #embed, #import_export, #settings, #users, #mycolorpicker, #chatbox { + bottom: 44px !important; + box-shadow: 0 0 0 1px rgba(99,114,130,.16), 3px -7px 20px 6px rgba(27, 39, 51, 0.16); + border-radius: 0 !important; + } + #connectivity, #embed, #import_export, #settings, #users, #mycolorpicker { + right: 0 !important; + overflow-y: auto; + top: initial !important; + max-height: 70%; + } + #users { + height: auto !important; + } + #embed { padding-bottom: 30px; } + + #embedreadonly { margin-top: 8px; } +} + diff --git a/src/static/skins/colibris/src/components/toolbar.css b/src/static/skins/colibris/src/components/toolbar.css index ce19b5be898..8fd8bb620f7 100644 --- a/src/static/skins/colibris/src/components/toolbar.css +++ b/src/static/skins/colibris/src/components/toolbar.css @@ -103,6 +103,9 @@ background-color: transparent; overflow-x: visible; } + .toolbar ul.menu_right li { + margin-left: 10px; + } .toolbar ul.menu_left { padding: 2px 0 0 0; } @@ -128,8 +131,6 @@ } .toolbar ul li a:hover { background-color: transparent; } - #connectivity, #embed, #import_export, #settings { bottom: 42px; } - li.superscript, li.subscript, li[data-key="undo"], diff --git a/src/static/skins/colibris/src/components/users.css b/src/static/skins/colibris/src/components/users.css index bb5fbb49500..6d8866bfb89 100644 --- a/src/static/skins/colibris/src/components/users.css +++ b/src/static/skins/colibris/src/components/users.css @@ -66,19 +66,8 @@ table#otheruserstable { } @media (max-width: 720px) { - #users { - bottom: 42px; - top: initial !important; - height: auto !important; - } - #mycolorpicker { - width: auto; - height: auto; - right: 0; - bottom: 42px; left: initial; - top: initial !important; } } diff --git a/src/static/skins/colibris/src/layout.css b/src/static/skins/colibris/src/layout.css index 4a9827dc404..e5ad5ebac6e 100644 --- a/src/static/skins/colibris/src/layout.css +++ b/src/static/skins/colibris/src/layout.css @@ -28,6 +28,14 @@ #outerdocbody.plugin-ep_author_neat { padding-left: 120px; /* more space for sidediv */ } +@media (max-width: 720px) { + #editorcontainer { + width: 100% !important; + right: 0 !important; + left: 0 !important; + } +} + @media (max-width:600px) { #outerdocbody.plugin-ep_author_neat { padding-left: 0; } #options-linenoscheck { display:none; } From f028bf8109b02ec0168462e37069bbe829cba18a Mon Sep 17 00:00:00 2001 From: Sebastian Castro Date: Tue, 17 Mar 2020 14:34:36 +0100 Subject: [PATCH 2/5] colibris: fixs timeslider on mobile --- src/static/css/pad.css | 3 +- .../skins/colibris/src/components/toolbar.css | 3 +- src/static/skins/colibris/timeslider.css | 57 ++++++++++++++++--- src/templates/timeslider.html | 5 +- 4 files changed, 56 insertions(+), 12 deletions(-) diff --git a/src/static/css/pad.css b/src/static/css/pad.css index 10dd69eaaec..b1639befebd 100644 --- a/src/static/css/pad.css +++ b/src/static/css/pad.css @@ -72,6 +72,7 @@ a img { float: left; margin-left: 2px; height:32px; + cursor: pointer; } .toolbar ul li.separator { border: inherit; @@ -1113,7 +1114,7 @@ input[type=checkbox] { border-bottom: 1px solid #ccc; z-index: 10; } - .toolbar ul.menu_right { + .toolbar ul.menu_right, .timeslider-bar .editbarright { right:0px !important; height: 32px; position: fixed; diff --git a/src/static/skins/colibris/src/components/toolbar.css b/src/static/skins/colibris/src/components/toolbar.css index 8fd8bb620f7..2ec4e687d09 100644 --- a/src/static/skins/colibris/src/components/toolbar.css +++ b/src/static/skins/colibris/src/components/toolbar.css @@ -109,11 +109,12 @@ .toolbar ul.menu_left { padding: 2px 0 0 0; } - .toolbar ul.menu_right { + .toolbar ul.menu_right, .timeslider-bar .editbarright { left: 0; padding-left: 8px; padding-top: 8px; height: 35px !important; + border: none; border-top: 1px solid #d2d2d2; background-color: white; } diff --git a/src/static/skins/colibris/timeslider.css b/src/static/skins/colibris/timeslider.css index ba5199baa97..79cc5b16723 100644 --- a/src/static/skins/colibris/timeslider.css +++ b/src/static/skins/colibris/timeslider.css @@ -6,9 +6,11 @@ } } -.timeslider #import_export, .timeslider #settings{ - top: 108px !important; - right: 55px; +@media (min-width: 721px) { + .timeslider #import_export, .timeslider #settings{ + top: 108px !important; + right: 55px; + } } .timeslider #export > p { @@ -30,10 +32,12 @@ .timeslider-bar { background: none; } .timeslider-bar p { margin: 8px; font-size: 12px;} -.timeslider-bar #editbar { - border: none; - background: none !important; - margin-right: 10px; +@media (min-width: 721px) { + .timeslider-bar #editbar { + border: none; + background: none !important; + margin-right: 10px; + } } .timeslider #padmain { @@ -49,7 +53,7 @@ } .timeslider #editorcontainerbox { - height: 100%; + min-height: 100%; overflow: visible; margin-top: 0 !important; } @@ -139,4 +143,41 @@ .timeslider #authorsList .author { padding: 2px 5px; border-radius: 3px; +} + +@media (max-width: 720px) { + .timeslider-bar #editbar { + padding: 3px 0px 5px 10px; + } + .timeslider-bar #editbar ul { + display: flex; + justify-content: flex-end; + } + .timeslider-bar #editbar ul li { + margin-left: 10px; + } + .timeslider #editbar .grouped-right { + margin: 0 !important; + } + .editbar-title h1 { + font-size: 1.8em !important; + } + #timeslider { + margin: -5px 0 -2px 0 !important; + } + #timeslider #timeslider-slider { margin: 0; } + #ui-slider-bar { + margin-right: 130px; + } + .timeslider #leftstep { right: 35px; } + .timeslider #rightstep { right: 5px; } + .timeslider #playpause_button { right: 65px; } + #timeslider #timer { + top: 5px; + left: 5px; + text-align: left; + } + .timeslider #editorcontainerbox { + padding-bottom: 55px !important; + } } \ No newline at end of file diff --git a/src/templates/timeslider.html b/src/templates/timeslider.html index 60194af12da..1bc61a64320 100644 --- a/src/templates/timeslider.html +++ b/src/templates/timeslider.html @@ -45,6 +45,7 @@ <% e.begin_block("timesliderScripts"); %> + <% e.end_block(); %> @@ -87,12 +88,12 @@ <% e.end_block(); %> -
+

-

+

From 6eed4c50c052f5829e33a023b39f480b9440920d Mon Sep 17 00:00:00 2001 From: Sebastian Castro Date: Tue, 17 Mar 2020 20:14:10 +0100 Subject: [PATCH 3/5] colibris: on mobile, use + button to display the missing formatting icons --- src/static/js/pad_editbar.js | 3 +- src/static/skins/colibris/pad.css | 3 +- src/static/skins/colibris/pad.js | 28 +++++++++++ .../skins/colibris/src/components/toolbar.css | 48 ++++++++++++++++++- src/static/skins/colibris/src/layout.css | 1 - 5 files changed, 77 insertions(+), 6 deletions(-) diff --git a/src/static/js/pad_editbar.js b/src/static/js/pad_editbar.js index 9cf357aadd5..52a29a257de 100644 --- a/src/static/js/pad_editbar.js +++ b/src/static/js/pad_editbar.js @@ -209,9 +209,8 @@ var padeditbar = (function() redrawHeight: function(){ var minimunEditbarHeight = self.calculateEditbarHeight(); var editbarHeight = minimunEditbarHeight + 1 + "px"; - var containerTop = minimunEditbarHeight + 6 + "px"; + var containerTop = minimunEditbarHeight + 1 + "px"; $('#editbar').css("height", editbarHeight); - $('#editorcontainer').css("top", containerTop); // make sure pop ups are in the right place diff --git a/src/static/skins/colibris/pad.css b/src/static/skins/colibris/pad.css index ad17132f874..0d8977415c6 100644 --- a/src/static/skins/colibris/pad.css +++ b/src/static/skins/colibris/pad.css @@ -85,7 +85,8 @@ h1, .yui-skin-sam .yui-panel .hd, p[data-l10n-id="ep_comments_page.comment"], .comment-reply-input-label span, -.stepper, #importmessageabiword, #importmessageabiword > a +.stepper, #importmessageabiword, #importmessageabiword > a, +.toolbar .show-more-icon-btn { color: #64d29b; } #ui-slider-handle, #playpause_button_icon { background-color: #64d29b; diff --git a/src/static/skins/colibris/pad.js b/src/static/skins/colibris/pad.js index 88ddce4c38a..1c3ddab6464 100644 --- a/src/static/skins/colibris/pad.js +++ b/src/static/skins/colibris/pad.js @@ -1,4 +1,32 @@ function customStart() { $('#pad_title').show(); + + var showMoreIconBtn = $('') + showMoreIconBtn.click(function() { + $('.toolbar').toggleClass('full-icons'); + $('#editorcontainer').css('top', $('.menu_left').height() + 1 + 'px'); + }) + $('.toolbar').append(showMoreIconBtn) + + var timer; + // on resize end + window.onresize = function(){ + clearTimeout(timer); + timer = setTimeout(checkAllIconAreDisplayedInToolbar, 100); + }; + setTimeout(checkAllIconAreDisplayedInToolbar, 300); + setTimeout(checkAllIconAreDisplayedInToolbar, 600); +} + +function checkAllIconAreDisplayedInToolbar() +{ + // reset style + $('.toolbar').removeClass('cropped') + console.log("check icons displayed", $('.toolbar .menu_left')[0].scrollWidth, $('.toolbar').width()); + + if ($('.toolbar .menu_left')[0].scrollWidth > $('.toolbar').width()) { + console.log("button are hidden"); + $('.toolbar').addClass('cropped'); + } } diff --git a/src/static/skins/colibris/src/components/toolbar.css b/src/static/skins/colibris/src/components/toolbar.css index 2ec4e687d09..43bd5ead290 100644 --- a/src/static/skins/colibris/src/components/toolbar.css +++ b/src/static/skins/colibris/src/components/toolbar.css @@ -4,7 +4,8 @@ margin: 0; background-color: white !important; background: none; - border: 1px solid #d2d2d2 + border: none; + border-bottom: 1px solid #d2d2d2 } .toolbar .buttonicon { @@ -101,7 +102,6 @@ height: 39px; background: none; background-color: transparent; - overflow-x: visible; } .toolbar ul.menu_right li { margin-left: 10px; @@ -140,6 +140,50 @@ } .toolbar ul li.separator { margin: 0; } + + .toolbar .show-more-icon-btn { + display:none; + height: 39px; + width: 39px; + line-height: 39px; + text-align: center; + font-weight: bold; + font-size: 2rem; + background-color: white; + z-index: 20; + } + + .toolbar.cropped .menu_left { + width: calc(100% - 39px); /* Space for show-more-icon-button */ + display: block; + } + .toolbar.cropped .show-more-icon-btn { + display: block; + position: absolute; + border-bottom: 1px solid #d2d2d2; + right: 0; + top: 0; + } + .toolbar.cropped .show-more-icon-btn:after { + content: "+"; + } + + .toolbar.full-icons { + height: auto !important; + } + .toolbar.full-icons .show-more-icon-btn { + border-bottom: none; + } + .toolbar.full-icons .show-more-icon-btn:after { + content: "-"; + } + .toolbar.full-icons .menu_left { + display: flex; + flex-wrap: wrap; + height: auto; + width: 100%; + background-color: white; + } } diff --git a/src/static/skins/colibris/src/layout.css b/src/static/skins/colibris/src/layout.css index e5ad5ebac6e..f1d53d59915 100644 --- a/src/static/skins/colibris/src/layout.css +++ b/src/static/skins/colibris/src/layout.css @@ -8,7 +8,6 @@ } #editorcontainer { - top: 41px !important; padding-top: 0 !important; } From e15df17ab82b9212816544444ac97b4cae444c7c Mon Sep 17 00:00:00 2001 From: Sebastian Castro Date: Tue, 17 Mar 2020 20:16:54 +0100 Subject: [PATCH 4/5] no-skin: toolbar restore mobile original behavior (display all icons) --- src/static/css/pad.css | 4 ++-- src/static/skins/no-skin/pad.css | 5 +++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/static/css/pad.css b/src/static/css/pad.css index b1639befebd..06566058521 100644 --- a/src/static/css/pad.css +++ b/src/static/css/pad.css @@ -188,8 +188,8 @@ a img { outline: none; } .toolbar ul.menu_left { - left:0px; - right:250px; + left: 0px; + right: 210px; } .toolbar ul.menu_right { diff --git a/src/static/skins/no-skin/pad.css b/src/static/skins/no-skin/pad.css index b8cdb4642b6..d8a3aaa7611 100644 --- a/src/static/skins/no-skin/pad.css +++ b/src/static/skins/no-skin/pad.css @@ -2,4 +2,9 @@ #sidediv { display: none !important; } +} +@media only screen and (max-width: 720px) { + .toolbar ul.menu_left { + flex-wrap: wrap; + } } \ No newline at end of file From dac98118703b5ea88c405009d2854f666315e665 Mon Sep 17 00:00:00 2001 From: Sebastian Castro Date: Tue, 17 Mar 2020 20:24:05 +0100 Subject: [PATCH 5/5] colibris: fix embedded_hyperlink in mobile --- .../colibris/src/plugins/embedded_hyperlinks.css | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/static/skins/colibris/src/plugins/embedded_hyperlinks.css b/src/static/skins/colibris/src/plugins/embedded_hyperlinks.css index b5ec7e61cb8..06b7e82bcd3 100644 --- a/src/static/skins/colibris/src/plugins/embedded_hyperlinks.css +++ b/src/static/skins/colibris/src/plugins/embedded_hyperlinks.css @@ -3,4 +3,15 @@ margin-top: 1px; margin-right: 0; margin-left: 2px; -} \ No newline at end of file +} +@media (max-width: 720px) { + .hyperlink-dialog { + left: 0 !important; + right: 0 !important; + padding: 10px; + display: flex; + } + .hyperlink-dialog .hyperlink-url { + flex: 1 auto; + } +}